Steps to reproduce the issue

Audit finding

The visual indicators used for the current menu item and keyboard focus do not have sufficient contrast against their adjacent backgrounds.

The audit records the current-menu underline as blue-grey rgb(80, 90, 129) against a blue rgb(36, 50, 99) background, producing a contrast ratio of approximately 1.82:1.

It also identifies light-grey keyboard-focus outlines in first- and second-level submenus that are difficult to distinguish against white and off-white backgrounds.

The current-menu indicator and keyboard-focus indicator communicate different states and must be checked separately.

User impact

People with low vision may be unable to distinguish the underline that identifies the current menu location, making it harder to orient themselves within the site's navigation.

Sighted keyboard users may lose track of the active submenu item because its focus outline blends into the light background. They may be uncertain which link will open when they press Enter.

A colour that works on the dark top-level navigation can remain difficult to see on a light submenu. Improving only one background combination does not resolve both reported cases.

Remediation plan

Increase the contrast of each state indicator against the backgrounds where it is actually displayed

• Give the current-menu underline a contrast ratio of at least 3:1 against its adjacent background
• The report suggests rgb(118, 125, 154) as a lighter underline colour for the audited blue background
  • Treat this as a candidate for that specific colour combination, not a universal replacement for every theme
• Use a sufficiently dark focus indicator on white and off-white submenu backgrounds, or another treatment that remains distinguishable
• Where one indicator spans different backgrounds, consider a two-colour treatment rather than relying on a single colour that works in only one context
• Define the relevant colours and focus treatment through the shared design tokens where appropriate
• Keep keyboard focus distinguishable from the persistent current-menu state
• Preserve a visible indicator when the current menu item itself receives keyboard focus
• Check first- and second-level submenu implementations separately
• Ensure that indicator outlines are not clipped by menu containers
• Verify hover, focus, current, and expanded combinations rather than checking only the default state
• Retest the rendered colours after accounting for opacity, inherited styles, and template overrides

Preconditions

• Use Joomla 6.2 with the Cassiopeia frontend template
• Use a test site with a visible main menu containing at least two submenu levels
• Include a menu route that produces the current-menu underline being tested
• Use the audited colour scheme where available, or record the actual colours of the test configuration
• Record the browser name and version, operating system, viewport dimensions, and browser zoom
• Record template style settings and any custom CSS or overrides
• Start at 100% browser zoom with the navigation in its wide layout
• Enable keyboard navigation to links in the browser or operating system where required

Steps to reproduce — current-menu underline

1. Open a frontend page using the test Cassiopeia menu
2. Navigate to a page that gives a main-menu item its current or active state
   • The audit example identifies “Sample layouts”
   • If using different menu content, record the corresponding menu item and page URL
3. Move the pointer away from the menu item
4. Move keyboard focus elsewhere so that hover and focus do not mask the persistent current-menu styling
5. Locate the underline or other indicator showing the current menu state
6. Inspect the indicator using the browser's Developer Tools
7. Record the rendered indicator colour and adjacent background colour
   • Include any opacity or blending that affects the displayed result
   • Inspect a border or pseudo-element if that is how the underline is generated
8. Measure the contrast ratio using a contrast-checking tool
9. Compare the result with the 3:1 requirement for the state indicator
10. Check whether the audited colours and approximate 1.82:1 ratio are reproduced
    • Record the actual values if the current build or template configuration differs
11. Capture the menu item, underline, and surrounding background

Steps to reproduce — first-level submenu focus

1. Return to the main navigation
2. Move the pointer away from the menu
3. Use Tab or Shift+Tab to reach the menu
4. Use the supported keyboard interaction to reveal a submenu
   • Record the opening control and keys used
5. Move keyboard focus to a first-level submenu link
   • The report screenshot includes “Blog”
6. Observe the focus outline against the submenu background
7. Record the outline colour and the adjacent background colour
8. Measure the contrast of the indicator against the background it touches
9. Move to another item and return to confirm that the observed outline follows keyboard focus
10. Capture the focused and unfocused states

Steps to reproduce — second-level submenu focus

1. Open the nested submenu using the supported keyboard interaction
2. Move focus to a second-level submenu link
   • The report screenshot includes “Millions”
3. Check the focus outline against the nested submenu background
4. Record and measure the rendered colour combination
5. Check whether it differs from the first-level submenu
6. Record whether the outline remains visible and is fully displayed rather than clipped
7. Capture the focused item and its surrounding background

Combined-state and responsive verification

1. Move keyboard focus to the current menu item
2. Check that focus remains identifiable in addition to the persistent current-menu indication
3. Test items that are both expanded and focused
4. Repeat in any other supported colour scheme used by the site
5. Repeat at 200% browser zoom
6. Check the compact navigation layout where the menu changes presentation
7. Record each failing state and colour combination separately
   • Do not report every layout as failing solely because one audited combination fails

Version

6.2

Expected result

The current-menu indicator and author-styled keyboard-focus indicators have a contrast ratio of at least 3:1 against their relevant adjacent backgrounds.

Users can distinguish the current menu location from the item that currently has keyboard focus.

The indicators remain visible on the dark main navigation and the light first- and second-level submenu backgrounds.

Actual result

The audit records the current-menu underline at approximately 1.82:1, using rgb(80, 90, 129) against rgb(36, 50, 99).

It also reports insufficient contrast between light-grey keyboard-focus outlines and the white or off-white backgrounds of first- and second-level submenus.

The current Joomla 6.2 build and template configuration 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.

This finding concerns non-text state indicators, not the contrast of the menu's text labels. Text contrast should be assessed separately.

A contrast ratio of exactly 3:1 meets the stated minimum; the result does not need to be strictly greater than 3:1.

The reported RGB values and ratio describe the audited configuration. Do not assume they apply to every customized Cassiopeia style.

Issue #48424 addresses broader missing or difficult-to-see focus indicators across Joomla.

MS2a is proposed for shared indicator colours and focus styling, with MS3a covering Cassiopeia integration.