Steps to reproduce the issue

Audit finding

The report identifies several text elements whose contrast is below the applicable threshold.

Text normally requires a contrast ratio of at least 4.5:1. Large text—at least 18.5 pixels bold or at least 24 pixels—may use 3:1.

The documented examples are

1. The Guided Tours Cancel button text uses rgba(128, 128, 128, 0.75) on rgb(230, 230, 230), measured at approximately 2.26:1
2. Muted helper text uses --text-muted-color (rgba(33, 37, 41, 0.75)) with an additional opacity: 0.7, producing approximately 3.29:1 in light appearance
3. The Installer's POPULAR badge uses white text on a white background, producing a contrast ratio of 1:1
4. MFA Setup uses light-grey text with insufficient contrast in both light and dark appearances; links on its detail pages are also reported as insufficient
5. The Update Joomla backup tip text has insufficient contrast

These are separate text treatments and views. Fixing one does not establish that the others are resolved.

User impact

People with low vision may be unable to read button labels, helper text, status badges, links, or tips reliably.

In Guided Tours, a low-contrast Cancel label makes the way to dismiss the tour harder to identify.

Muted text that is additionally reduced by opacity can make empty-dashboard messages, character counters, and field guidance difficult to read.

A white-on-white POPULAR badge is effectively invisible, so users may not recognize that an extension is popular.

Low-contrast MFA text and links can make it harder to configure authentication methods, while a faint update tip can make important backup guidance easy to overlook.

Remediation plan

Ensure each affected text element meets the contrast requirement for its size and weight

• Give normal-sized text a contrast ratio of at least 4.5:1 against its actual rendered background
• Use at least 3:1 only for text that qualifies as large text under the success criterion
• Measure the rendered result after opacity, inheritance, and theme styles are applied
• For the Guided Tours Cancel text, consider the report's proposed rgb(103, 103, 103) on the beige rgb(230, 230, 230) background
• For muted helper text, remove the additional opacity: 0.7 and use a muted colour that itself meets the required contrast
• Check the empty-dashboard message, article Meta Description character counter, and Backend Options Site Meta Descriptions message separately
• For the Installer POPULAR badge, either remove the badge or use a contrasting text and background combination
• For MFA Setup, correct the light-grey text and links in both light and dark appearances
• For Update Joomla, correct the backup tip text contrast
• Verify links in both their default and visited states where applicable
• Preserve a visible keyboard-focus treatment for interactive text and links
• Use shared design tokens where appropriate, then verify their rendered result in each affected view
• Do not rely on tooltips, icons, or adjacent text to compensate for unreadable text

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 dashboard example, use a dashboard with an empty card that displays the reported message
• For the article example, open an article for editing and locate the Meta Description character counter
• For Backend Options, locate the Site Meta Descriptions field and its information message
• For Installer, use a test installation with an extension listing that displays the POPULAR badge
• For MFA Setup, configure at least one authentication method and open its detail view
• For Update Joomla, use a test installation that displays the backup tip
• 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

Steps to reproduce — Guided Tours Cancel text

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 Cancel text
5. Move the pointer away and keep keyboard focus elsewhere
6. Inspect the text using Developer Tools
7. Record the rendered text colour, opacity, and adjacent background colour
8. Measure the contrast ratio with a contrast-checking tool
9. Compare the result with the 4.5:1 requirement for normal-sized text
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 button, surrounding background, and measurement

Steps to reproduce — muted helper text

1. Open a dashboard containing an empty card that displays the reported message
2. Locate the message text
3. In light appearance, inspect its rendered colour and background using Developer Tools
4. Record the computed --text-muted-color, opacity, font size, and font weight
5. Measure the contrast ratio
6. Check whether the audited approximately 3.29:1 result is reproduced
7. Confirm whether the text qualifies for the 3:1 large-text exception
8. Repeat in dark appearance and record whether it meets 4.5:1
9. Open Content → Articles and edit a test article
10. Locate the Meta Description character counter
11. Repeat the colour, opacity, size, and contrast checks
12. Open System → Global Configuration and locate the Site Meta Descriptions field
13. Repeat the checks for its information message
14. Capture each affected text element, background, and measurement

Steps to reproduce — Installer POPULAR badge

1. 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
2. Locate an extension heading displaying the POPULAR badge
3. Record the extension name and view
4. Move the pointer away and keep keyboard focus elsewhere
5. Inspect the badge text and background using Developer Tools
6. Record the rendered text colour, background colour, opacity, and any border
7. Measure the contrast ratio
8. Check whether the audited white-on-white 1:1 result is reproduced
9. Capture the badge, surrounding heading, and measurement
10. Do not treat the report's purple-background mock-up as the required fix; evaluate a contrasting treatment that fits the design system

Steps to reproduce — MFA Setup text and links

1. Open Users → Manage Multi-factor Authentication
   • Record the navigation labels if they differ in the tested build
2. Inspect the page's text elements in light appearance
3. Record the rendered text colour, background colour, opacity, font size, and font weight
4. Measure the contrast ratio for each distinct text treatment
5. Repeat in dark appearance
6. Open an authentication-method detail page, such as the YubiKey example in the report
7. Inspect its body text and links
8. Measure the text and link contrast separately
9. Check link default and visited states where applicable
10. Record each failing text treatment, link state, appearance, and measurement
11. Capture the affected page, text, and measurement

Steps to reproduce — Update Joomla backup tip

1. Open System → Update → Joomla
   • Alternatively, navigate to /administrator/index.php?option=com_joomlaupdate on the same installation
   • Record the navigation labels if they differ in the tested build
2. Locate the backup tip in the Backup on update box
3. Move the pointer away and keep keyboard focus elsewhere
4. Inspect the tip text and its background using Developer Tools
5. Record the rendered text colour, opacity, background colour, font size, and font weight
6. Measure the contrast ratio
7. Compare the result with the requirement for its size and weight
8. Capture the tip, surrounding box, and measurement
9. Do not start an update to reproduce the contrast issue

Additional verification

1. Repeat relevant checks at 200% browser zoom
2. Check hover, keyboard focus, selected, and genuinely disabled states separately
3. If text is genuinely disabled, record why it is inactive and assess it separately
4. Record each affected view, text treatment, appearance, and measurement separately
5. Do not treat a fix to one example as evidence that the other examples are resolved

Version

6.2

Expected result

Text elements meet the contrast requirement for their rendered size and weight.

Normal-sized text has a contrast ratio of at least 4.5:1 against its actual rendered background. Text qualifying as large text may use at least 3:1.

The Guided Tours Cancel text, muted helper text, Installer POPULAR badge, MFA Setup text and links, and Update Joomla backup tip are readable in the appearances in which they are displayed.

Actual result

The audit records the following insufficient text contrast

• Guided Tours Cancel text — approximately 2.26:1
• Muted helper text in light appearance — approximately 3.29:1
• Installer POPULAR badge — 1:1, white text on a white background
• MFA Setup text and links — insufficient contrast in light and dark appearances
• Update Joomla backup tip — insufficient contrast

The current Joomla 6.2 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, opacity values, and measurements describe the audited configuration. Opacity, custom styles, and subsequent changes can alter the actual rendered contrast.

The report's proposed colours are candidates for the audited backgrounds, not universal replacements.

The POPULAR badge example is distinct from the Commercial badge example in issue #48400. Do not merge their results without measuring both.

The report says “almost all” MFA Setup text has insufficient contrast. Record each affected text treatment rather than assuming every element fails.

MS2a is proposed for shared text colours and the muted-text token, with MS3b covering the documented backend integrations.