Steps to reproduce the issue

Audit finding

The Commercial indicator is displayed as a white $ icon on a yellow background and, on a plugin detail page, as a full-word “Commercial” badge.

The report states that neither presentation meets the applicable contrast requirements.

For the $ icon, a contrast ratio of at least 3:1 is sufficient under 1.4.11 Non-text Contrast. For the full-word badge text, 1.4.3 Contrast (Minimum) applies.

The report recommends using a contrast ratio of at least 4.5:1 for both presentations, so that the icon and badge use a consistent, more readable treatment.

It suggests dark text for both the icon and the word, and considers adding a dark outline around both.

User impact

People with low vision may have difficulty recognizing the $ icon as a Commercial indicator, particularly where the white symbol sits on a light yellow background.

The low-contrast full-word badge may be difficult to read on the plugin detail page. Users may not reliably understand that an extension is commercial before installing or configuring it.

A consistent treatment across the compact icon and full-word badge reduces the chance that the same status is easy to recognize in one place but difficult to recognize in another.

Remediation plan

Make the Commercial icon and badge readable against their actual backgrounds

• Give the $ icon a contrast ratio of at least 3:1 against its yellow background
• Give the full-word “Commercial” badge text a contrast ratio of at least 4.5:1 against its background
• Consider the report's recommendation to use at least 4.5:1 for both the icon and badge, providing a consistent treatment
• Use dark text for the icon and word where appropriate for the chosen background
• Consider a dark outline around the icon and badge if it improves visibility without creating visual clutter
• Verify the rendered colours after opacity, inheritance, and template styles are applied
• Check the compact icon and full-word badge separately
• Check the badge on the relevant extension detail view as well as any list or installer context where it appears
• Preserve the meaning of the Commercial status and ensure it remains programmatically determinable
• Do not rely on colour alone to convey the Commercial status
• Check hover, focus, selected, and genuinely disabled states where those states exist

Preconditions

• Use Joomla 6.2 with the Atum administrator template
• Sign in with an account permitted to access the Installer
• Use a test installation containing an extension that displays the Commercial indicator
• Record the exact extension, its version, and the view on which each indicator appears
• Record the exact Joomla build, browser name and version, operating system, viewport dimensions, and browser zoom
• Start at 100% browser zoom
• Record the active appearance and any template overrides or custom CSS
• Do not install, update, or uninstall an extension merely to measure contrast

Steps to reproduce — Commercial $ icon

1. Open the Joomla administrator interface at the site's base URL followed by /administrator/
2. Open System → Install → Extensions
   • Alternatively, navigate to /administrator/index.php?option=com_installer on the same installation
   • Record the navigation labels if they differ in the tested build
3. Locate an extension entry displaying the Commercial $ icon
4. Record the extension name, version, and view where the icon appears
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 badge background colour
8. Measure the contrast ratio with a contrast-checking tool
9. Compare the result with the 3:1 minimum for the informative icon
10. Check whether the audited white-on-yellow combination is reproduced
    • Record the actual values if the tested build differs
11. Check hover, focus, and any selected state separately
12. Capture the icon, surrounding badge, and measurement

Steps to reproduce — full-word Commercial badge

1. Remain in the Installer or open the relevant extension detail view
2. Locate the extension's full-word “Commercial” badge
3. Record the exact view and extension on which it appears
4. Move the pointer away and keep keyboard focus elsewhere
5. Inspect the badge text and its background using Developer Tools
6. Record the rendered text colour, background colour, opacity, and any border or outline
7. Measure the contrast ratio between the badge text and its background
8. Compare the result with the 4.5:1 minimum for the badge text
9. Check whether the audited low-contrast combination is reproduced
10. Check hover, focus, and any selected state separately
11. Capture the badge, surrounding background, and measurement

Additional verification

1. Compare the compact $ icon and full-word badge to confirm that they communicate the same status consistently
2. Check the indicator at 200% browser zoom
3. Confirm that the Commercial status is not conveyed by colour alone
4. If a control is genuinely disabled, record why it is inactive and assess it separately
5. Do not treat a change to the icon as evidence that the full-word badge is resolved, or vice versa

Version

6.2

Expected result

The Commercial $ icon has a contrast ratio of at least 3:1 against its adjacent background.

The full-word “Commercial” badge text has a contrast ratio of at least 4.5:1 against its background.

The report recommends using at least 4.5:1 for both presentations so that the Commercial status is consistently readable.

Actual result

The audit reports that the white $ icon on a yellow background and the corresponding full-word “Commercial” badge do not meet the applicable contrast requirements.

Exact colour values and contrast ratios need to be recorded for the Joomla 6.2 build and extension configuration being tested.

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 original issue's steps refer to an extension list, while the report's full-word badge example is on a plugin detail page. Record the exact view and extension where each indicator is reproduced.

The report does not provide exact colour values or contrast measurements. Record measured results rather than borrowing values from another badge finding.

The icon and badge are assessed under different success criteria. Do not apply the 4.5:1 text threshold to the icon as a WCAG minimum, although the report recommends it as a consistent design target.

MS2a is proposed for shared badge and icon styling, with MS3b covering the documented Installer integration.