Skip to main content
TestAccessibility

Issue guide

Common findingHigh impact on tasks

Low color contrast

Text that blends into the background is hard to read for people with low vision and in bright sunlight.

When text or controls do not contrast enough with their background, many people cannot read or tap them reliably.

See this on your site

Run a scan, then match rule names in your report to the sections below.

At a glance

Instructional

Contrast on real backgrounds

Thin fonts and imagery behind text make effective contrast worse in practice, especially on phones.

Why this matters

  • Low vision, glare, and cheap displays make low-contrast UI hard to use.
  • Small labels and helper text fail first when contrast is borderline.
  • Brand palettes often need a darker text or scrim, not a new redesign.

Where this shows up

Use this list to spot the same pattern on your templates and key URLs.

Forms

  • Placeholder-like gray labels
  • Error text on tinted backgrounds
  • Disabled styles that look like normal text

Buttons and links

  • Ghost buttons on photos
  • Secondary actions using brand pastels

Navigation

  • Header links on transparent headers over imagery

Marketing

  • Text on hero photos
  • Sale badges and countdown timers

Fix priority — address first

  • Primary buttons and body copy on main flows.
  • Legal, pricing, or error messages users must read to proceed.

Fix priority — can follow

  • Large bold headings that already meet large-text thresholds.
  • Purely decorative labels that are not required to use the page.

Who is affected

People with low vision, color blindness, and anyone on bright screens or poor displays.

Fix this in your platform

Stack-specific steps, pitfalls, and verification. Core issues link under /wordpress, /shopify, /react, or /nextjs; all issues also have /fix/… URLs.

What this issue is

Automated tools compare foreground and background colors to thresholds (often 4.5:1 for normal text under WCAG AA). Thin fonts and images behind text complicate measurement.

Why it matters

Contrast affects readability for many users, not only those with diagnosed vision disabilities. Marketing palettes sometimes prioritize brand over legibility.

Fixes

Darken text, lighten background, or add a solid backdrop behind text on busy images. Re-check hover and disabled states.

Examples (bad vs good)

  • Bad

    Body text `#999` on `#fff`.

    Good

    Darken body text to roughly `#595959` or darker on white, or change background.

  • Bad

    Yellow button with white label on white card.

    Good

    Use darker button fill or darker text; verify 4.5:1 for the label.

How to fix

  1. Pick failing pairs from the report and open computed styles in devtools.
  2. Raise contrast to at least 4.5:1 for normal text (WCAG AA) or adjust background.
  3. Add a solid overlay behind text on photos if you cannot change the image.
  4. Retest hover, disabled, and error states, then rescan.

Platform-specific notes

Where this often comes from on common stacks—and what to change.

WordPress
Theme customizer colors may override block styles; check front-end, not only the editor.
Shopify
Sale badges and countdowns are frequent offenders in custom CSS.
React
Tailwind opacity utilities reduce contrast; verify computed colors.

Common mistakes

  • Only checking the default state—not hover, focus, or error.
  • Lowering opacity with CSS utilities without recomputing contrast.
  • Assuming white text on a busy photo is fine without a scrim.

How to verify the fix

  1. Use a contrast checker on computed colors in the browser.
  2. Check focus-visible styles at the same time as static styles.
  3. Rerun the scan after theme or token changes.

Related: 1.4.3 Contrast (Minimum).

FAQ

Gradients?
Test worst-case points; solid overlays often help.
Large text?
WCAG allows lower contrast for large/bold text per definition.

Related guides

Run another scan

After you ship a fix, rescan the same URL and keep both report links to compare.

Broader topics

Principles on these pages overlap with HTML issues: PDFs for documents and downloads, mobile for touch, contrast, and small screens.

Related issues

Next steps

Keep the scan, fix, rescan loop going

Ship a fix, then run another scan on the same URL. Each run gets its own report link so you can compare before and after.

Open scan