Steps to reproduce the issue

Audit finding

The report identifies three low-contrast graphical indicators in the Atum backend

1. The X icon in the Guided Tours cancel button uses semi-transparent grey rgba(128, 128, 128, 0.75) on rgb(230, 230, 230), measured at approximately 2.26:1
2. The small × control used to remove a category from the article edit form uses opacity: 0.5 when not hovered or focused, producing approximately 1.66:1 against white
3. The yellow star indicating the default passkey in MFA Setup uses rgb(255, 181, 21) on white, measured at approximately 1.76:1

These are separate components and state rules. A change to one icon does not establish that the other two are fixed.

User impact

A low-contrast cancel icon makes the way to dismiss a Guided Tour harder to identify, particularly for people with low vision.

The faint category-removal icon can make the control appear unavailable until the pointer hovers over it. Keyboard users may not receive that hover cue and may have difficulty recognizing the control.

The faint default-passkey star makes it harder to identify which configured passkey is the default. This can affect confidence when managing authentication methods.

Each icon carries information or functionality, rather than being purely decorative.

Remediation plan

Make each functional or informative icon sufficiently distinct from the background on which it is rendered

• Give each icon a contrast ratio of at least 3:1 against its relevant adjacent background
• Account for the rendered result of opacity and transparency, not only the source colour value
• For the Guided Tours cancel icon, consider the report's proposed rgb(131, 131, 131) as a candidate for the audited grey background
• For the category-removal icon, ensure the default state—not only hover or focus—meets the contrast requirement
• Consider the report's proposed rgb(146, 149, 151) as a candidate for the audited white background
• For the MFA default indicator, consider the report's proposed rgb(196, 138, 0) as a candidate for white
• Treat the proposed colours as candidates for the audited combinations, not universal replacements
• Verify the rendered colours after opacity, inheritance, and template styles are applied
• Check hover, keyboard focus, selected, and genuinely disabled states separately
• Ensure that the category-removal control remains identifiable without requiring hover
• Preserve a visible keyboard-focus treatment
• Check whether the default indicator pattern applies to other MFA methods and record any additional affected instances
• Define the relevant colours through shared design tokens where appropriate
• Do not rely on tooltips or adjacent text alone to compensate for an icon that cannot be seen

Preconditions

• Use Joomla 6.2 with the Atum administrator template
• Sign in with an account permitted to access the relevant administrator areas
• For Guided Tours, use an account able to open a tour and reach its cancel control
• For the article edit form, use a test article with at least one category selected
• For MFA Setup, configure at least one passkey and designate it as the default
• Record the exact Joomla build, browser name and version, operating system, viewport dimensions, and browser zoom
• Record the active light or dark appearance and any template overrides or custom CSS
• Start at 100% browser zoom
• Do not delete a category or passkey merely to measure contrast

Steps to reproduce — Guided Tours cancel icon

1. Open the Joomla administrator interface at the site's base URL followed by /administrator/
2. Open the Guided Tours control in the header
3. Start or open a guided tour that displays a cancel button
4. Locate the X icon in the Cancel control
5. Move the pointer away and keep keyboard focus elsewhere
6. Inspect the icon using Developer Tools
7. Record the rendered icon colour, opacity, and adjacent background colour
8. Measure the contrast ratio with a contrast-checking tool
9. Compare the result with the 3:1 minimum for the functional icon
10. Check whether the audited rgba(128, 128, 128, 0.75) on rgb(230, 230, 230) combination is reproduced
    • Record the actual values if the tested build differs
11. Check hover, focus, and any selected state separately
12. Capture the control, surrounding background, and measurement

Steps to reproduce — article category removal icon

1. Open Content → Articles
2. Open an existing test article for editing
3. Locate the selected category field
4. Find the small × control used to remove a category
5. Leave the pointer away from the control and keep keyboard focus elsewhere
6. Inspect the rendered × symbol
7. Record its rendered colour, opacity, and adjacent background colour
8. Measure the contrast ratio
9. Check whether the default state reproduces the audited approximately 1.66:1 result
10. Hover over the control and record whether contrast improves only on hover
11. Move keyboard focus to the control and record the focused appearance separately
12. Do not activate the removal control
13. Capture the default, hover, and focus states

Steps to reproduce — MFA default-passkey indicator

1. Open Users → Manage Multi-factor Authentication
   • Record the navigation labels if they differ in the tested build
2. Locate a configured passkey marked as the default
3. Identify the yellow star or other default indicator
4. Move the pointer away and keep keyboard focus elsewhere
5. Inspect the indicator using Developer Tools
6. Record its rendered colour, opacity, and adjacent background colour
7. Measure the contrast ratio
8. Check whether the audited rgb(255, 181, 21) on white combination is reproduced
9. Check whether the same default-indicator pattern appears beside other MFA methods
   • Record each affected method and its measurement separately
10. Capture the indicator, surrounding background, and measurement

Additional verification

1. Repeat relevant checks at 200% browser zoom
2. Check hover, keyboard focus, selected, and genuinely disabled states separately
3. If a control is genuinely disabled, record why it is inactive and assess it separately
4. Record whether an icon is visible only after hover or focus
5. Do not treat a change to one icon as evidence that the other two are resolved

Version

6.2

Expected result

Functional and informative icons have a contrast ratio of at least 3:1 against their relevant adjacent backgrounds.

The Guided Tours cancel icon, article-category removal icon, and MFA default-passkey indicator are identifiable before hover or focus.

The category-removal control remains visible in its default state, and keyboard focus remains distinguishable.

Actual result

The audit records the following insufficient contrast ratios

• Guided Tours cancel icon — approximately 2.26:1
• Category-removal icon in its default state — approximately 1.66:1
• MFA default-passkey star — approximately 1.76:1

The current build's rendered colours and relevant states need to be measured to establish which combinations still reproduce the finding.

What device were you using? (eg, phone, laptop)

Desktop web

What web browser were you using? (eg, Chrome, Safari)

Chrome, Firefox, Edge, Safari

Assistive Technology?

N/A

Additional Comments

The browser entries above are carried forward from the original issue and do not represent a new verification of every browser against Joomla 6.2.

Design is the responsibility tag in the original report.

The reported colours and measurements describe the audited configuration. Opacity, custom styles, and subsequent changes can alter the actual rendered contrast.

The original issue's steps cover only the Guided Tours example. This revision adds separate reproduction steps for the category-removal and MFA default-indicator examples documented in the same report finding.

The report says the default indicator “supposedly” applies to other defaults as well. Verify each affected MFA method rather than assuming the passkey result covers them.

MS2a is proposed for shared icon colours and default-state styling, with MS3b covering the documented backend integrations.