Steps to reproduce the issue

Audit finding

The currently selected item in the Atum main menu is indicated visually only by a background-colour change.

In the audited light appearance, the selected item uses --main-nav-mm-active-bg (rgb(46, 72, 107)), while unselected top-level items use --sidebarwrapper-bg (rgb(31, 48, 71)) and unselected submenu items use --main-nav-ul-bg (rgb(38, 60, 89)).

The report states that these background colours do not provide the 3:1 distinction needed to make the selected state clearly distinguishable. It notes that submenu indentation helps identify submenu items, but does not resolve the missing non-colour indication of the current page.

The report recommends adding a non-colour indicator, such as an icon or other visible marker. Alternatively, it states that the difference between current and non-current items must be more than 3:1, as in the dark appearance shown in its example.

User impact

People with low vision or colour-vision deficiencies may not be able to tell which section of the administrator interface they are currently viewing.

A slight change in dark-blue background shade may be invisible to some users, particularly when adjacent menu items use similar colours.

Without a non-colour cue, users may need to rely on the page heading or browser history to determine their location. This can make navigation slower and increase the risk of acting in the wrong administrative area.

The issue affects orientation within the backend, not merely the visual polish of the menu.

Remediation plan

Provide a current-page indication that does not depend on colour alone

• Add a visible non-colour indicator to the current main-menu item, such as an icon, marker, border, or other clearly perceivable treatment
• Ensure the indicator communicates the current location rather than keyboard focus
• Preserve a separate, visible keyboard-focus treatment
• Ensure the current-item treatment is distinguishable from unselected items by at least 3:1 where the state is conveyed through a visual boundary or indicator
• Check the light and dark appearances separately
• Verify the rendered colours after opacity, inheritance, and template styles are applied
• Ensure the indicator remains visible when the menu is collapsed or presented in a compact layout
• Ensure that adding the indicator does not obscure menu labels, icons, or focus outlines
• Preserve the programmatic current-page information where it exists
• Check top-level items and submenu items separately
• Do not rely on indentation alone to identify the current page

Preconditions

• Use Joomla 6.2 with the Atum administrator template
• Sign in with an account permitted to view the administrator dashboard and main menu
• Use a menu containing at least one top-level item and at least one submenu
• Navigate to a page that causes a main-menu item to receive its current or active state
• 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 change menu configuration merely to reproduce the issue

Steps to reproduce

1. Open the Joomla administrator interface at the site's base URL followed by /administrator/
2. Locate the main navigation menu
3. Identify the menu item corresponding to the currently viewed page
   • The report example identifies “Manage”
   • Record the exact item and page URL in the tested configuration
4. Identify an unselected top-level menu item and an unselected submenu item
5. Move the pointer away from the menu and keep keyboard focus elsewhere
6. Compare the current item with the unselected items
7. Observe whether the current item is identified by anything other than a background-colour change
8. Inspect the current and unselected items using Developer Tools
9. Record the rendered background colours, CSS custom properties, opacity, and any border or indicator
10. Check whether the audited colour values are reproduced
    • Non-selected top-level item — rgb(31, 48, 71)
    • Non-selected submenu item — rgb(38, 60, 89)
    • Selected item — rgb(46, 72, 107)
11. Measure the relevant visual distinction using a contrast-checking tool
12. Repeat in dark appearance
13. Use a colour-vision simulation or grayscale view to check whether the current item remains identifiable without relying on the exact hue
14. Capture the current and unselected states, including any non-colour indicator if one is present

Verification after remediation

1. Navigate to a page associated with a main-menu item
2. Confirm that the current item has a visible non-colour indicator
3. Confirm that the indicator is distinguishable from unselected items
4. Move keyboard focus through the menu
5. Confirm that focus remains distinguishable from the persistent current-page indicator
6. Check the current item in light and dark appearances
7. Check the menu in its compact or collapsed layout if available
8. Confirm that the indicator remains visible at 200% browser zoom
9. Confirm that the current-page state remains programmatically determinable
10. Capture the current, unselected, and focused states

Version

6.2

Expected result

The current main-menu item is identified by a means other than colour alone.

Where the state is conveyed through a visual boundary or indicator, it is distinguishable from unselected items by at least 3:1.

The current-page indication remains visible in light and dark appearances and remains distinct from keyboard focus.

Actual result

The current menu item is indicated only by a background-colour change.

In the audited light appearance, the selected item’s background differs only slightly from the backgrounds of unselected top-level and submenu items.

The report states that these colour differences do not provide the 3:1 distinction needed to make the selected state clearly distinguishable.

The current Joomla 6.2 build and appearance configuration need to be checked to establish whether the issue persists.

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 CSS custom properties and colours describe the audited configuration. Custom styles, overrides, and subsequent changes can alter the actual rendered result.

The report’s dark-appearance example is presented as an example of greater state distinction, not as a prescribed final design.

A non-colour indicator and a sufficiently distinct visual treatment are alternative approaches described by the report. Adding a non-colour indicator alone does not remove the need to verify that the resulting state remains visually distinguishable.

This issue concerns the persistent current-page state. Keyboard focus is a separate state and must remain distinguishable.

MS2a is proposed for shared navigation state styling, with MS3b covering the documented Atum integration.