Steps to reproduce the issue

Audit finding

The Articles list uses low-contrast graphics for some featured and published status controls in light appearance.

The audit records light-grey icons using rgb(205, 205, 205) against white rgb(255, 255, 255), producing a contrast ratio of approximately 1.58:1.

The row-selection checkbox borders also have insufficient contrast in both appearances

• Light appearance — rgb(222, 226, 230) against rgb(255, 255, 255), approximately 1.3:1
• Dark appearance — rgb(47, 51, 58) against rgb(23, 28, 36), approximately 1.34:1

These measurements concern the graphics needed to identify controls and their states, not the article-title text.

User impact

People with low vision may have difficulty finding the featured or published status controls and distinguishing the states represented by their icons.

A light-grey icon can appear unavailable even when the control is enabled, making it harder to recognize that the article's status can be changed.

Faint checkbox borders make it difficult to locate the row-selection targets before selecting articles. This interferes with preparing a selection for list actions, even when the labels or article titles remain readable.

The problem affects different parts of the same workflow: identifying article status and selecting the articles to work on.

Remediation plan

Increase the contrast of the status graphics and checkbox boundaries against their actual adjacent backgrounds

• Give enabled featured and published status graphics at least 3:1 contrast where they are needed to identify the control or its state
• Give unchecked checkbox boundaries at least 3:1 contrast where the boundary is needed to identify the control
• Use appearance-specific colours where necessary
• Consider the report's proposed colours as candidates for the audited backgrounds
  • Status icons on white — rgb(148, 148, 148)
  • Checkbox borders on white — rgb(142, 149, 156)
  • Checkbox borders on the audited dark background — rgb(101, 103, 106)
• Verify each candidate in the rendered interface rather than assuming it works on every background or under every opacity rule
• Check all available featured and publication states separately
• Preserve a clear distinction between an enabled control representing an inactive article state and a genuinely disabled control
• Ensure that hover or keyboard focus is not required merely to discover the control
• Check the selected checkbox indicator separately from the unchecked boundary
• Preserve a visible keyboard-focus treatment
• Use shared colour tokens where appropriate, then verify their application in the Articles list
• Do not apply a single hard-coded grey globally without checking other affected contexts

Preconditions

• Use Joomla 6.2 with the Atum administrator template
• Sign in with an account permitted to view the Articles list
• Use test articles representing the featured and publication states being checked
• Use an account with permission to operate the relevant controls so that enabled controls can be distinguished from permission-restricted ones
• 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 article publication or featured status merely to measure contrast

Steps to reproduce — featured and published status icons

1. Open the Joomla administrator interface at the site's base URL followed by /administrator/
2. Open Content → Articles
   • Alternatively, navigate to /administrator/index.php?option=com_content&view=articles on the same installation
3. Use the light appearance
4. Locate the controls showing featured and publication status in the article rows
5. Identify an enabled control with the light-grey icon described in the audit
   • Record the article, control name, and state it represents
   • Do not assume that an unfeatured or unpublished state means the control is disabled
6. Move the pointer away and keep keyboard focus elsewhere
7. Inspect the icon using Developer Tools
8. Record the rendered icon colour, opacity, and adjacent background colour
9. Measure the contrast ratio with a contrast-checking tool
10. Compare the result with the 3:1 minimum for the relevant graphic
11. Check whether the audited rgb(205, 205, 205) on white combination is reproduced
    • Record the actual colours if the tested build differs
12. Repeat for the other available featured and publication states
13. Capture the icon, surrounding background, and measurement
14. Check hover and focus separately
    • Record whether contrast improves only after interaction

Steps to reproduce — unchecked checkbox borders

1. Remain in Content → Articles
2. Locate an unchecked row-selection checkbox
3. Confirm that the checkbox is enabled
4. Move the pointer away and keep keyboard focus elsewhere
5. Inspect the checkbox's visible boundary and surrounding surface
6. Record the rendered border colour and background colour
7. Measure the contrast ratio
8. In light appearance, check whether the audited combination is reproduced
   • Border rgb(222, 226, 230)
   • Background rgb(255, 255, 255)
   • Reported contrast approximately 1.3:1
9. Switch to dark appearance and repeat the inspection
10. Check whether the audited dark combination is reproduced
    • Border rgb(47, 51, 58)
    • Background rgb(23, 28, 36)
    • Reported contrast approximately 1.34:1
11. Record results for each appearance separately
12. Check the select-all checkbox as an additional instance if it uses the same styling
    • Record any difference rather than assuming it matches the row checkboxes

Additional state verification

1. Select a test row's checkbox
   • Do not activate any action on the selected article
2. Check the selected-state graphic against its background
3. Clear the selection
4. Use keyboard navigation to focus the checkbox and status controls
5. Check focus visibility independently of default icon or border contrast
6. If a control is genuinely disabled, record why it is inactive and assess it separately
7. Repeat relevant checks at 200% browser zoom
8. Restore the original appearance preference and clear test selections after verification

Version

6.2

Expected result

Enabled article-status controls have sufficiently contrasting graphics to identify their function and represented state.

Unchecked row-selection checkboxes have a visible boundary with at least 3:1 contrast against the relevant adjacent background where that boundary is needed to identify the control.

The controls remain discoverable before hover or focus, and their selected and focused states remain distinguishable.

Actual result

The audit records the following insufficient contrast ratios in the Articles list

• Light-grey status icons on white — approximately 1.58:1
• Light-appearance checkbox borders — approximately 1.3:1
• Dark-appearance checkbox borders — approximately 1.34: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?

No response

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.

A control displaying an unpublished or unfeatured article state is not necessarily disabled. Check whether the control is operable before applying the inactive-control exception.

The screenshot includes drag handles, but the report's explicit icon measurements concern featured and published status controls. Do not attribute the same measured failure to the handles without checking them separately.

Issue #48407 covers checkbox examples in Update Joomla and frontend login.

MS2a is proposed for shared colours and foundational control styling, with MS3b covering the documented backend list integration.