Skip to main content

Accessibility issue guide · colour contrast

Make important text readable against its background.

ClearSite can flag many text elements whose measured colour contrast falls below axe-core's WCAG thresholds, show the affected element and help you verify the source-level repair.

Check a live page free No signup. Test the page users receive.

What the ratio means

Contrast measures the difference between text and its background.

Low-contrast text can disappear for people with low vision, colour-vision differences, ageing eyesight or anyone reading in glare. Colour choice alone is not enough; the rendered foreground and background must be measured together.

WCAG 2.2 Success Criterion 1.4.3 sets a minimum ratio of 4.5:1 for normal text and 3:1 for large text, with defined exceptions. Logos and purely incidental text are treated differently. This page is practical guidance, not a conformance determination.

Primary guidance: the W3C explanation of Contrast (Minimum) and W3C WAI design tip on sufficient contrast.

Controlled fixture · axe-core 4.11

One low-contrast line. One measured repair.

We tested the same 16px text on white before and after changing its foreground colour. #999999 returned one serious axe color-contrast finding at 2.84:1; #595959 returned zero axe violations in the same fixture.

Before · serious finding

2.84:1 does not meet 4.5:1

Book a free accessibility review
color: #999999;
background: #ffffff;

After · re-test clear

The darker text clears the rule

Book a free accessibility review

color: #595959;
background: #ffffff;

This is a controlled fixture, not customer evidence or a compliance claim. The detection logic and edge cases are described in the axe-core colour-contrast rule explanation.

From finding to verified fix

Repair the reusable colour, then test every state.

  1. 01

    Confirm the rendered colours

    Inspect the exact text element and its computed foreground and background. Gradients, images, opacity and state changes can make the apparent source value misleading.

  2. 02

    Find the shared design token

    If the same low-contrast pair appears across pages, repair the colour variable, component style, theme setting or template rather than patching each occurrence.

  3. 03

    Choose a passing pair

    For WCAG 2.2 AA, normal text needs at least 4.5:1 and large text at least 3:1. Treat the ratio as a floor, not a design target.

  4. 04

    Check every state

    Review default, hover, focus, visited, disabled, error and placeholder states against the background they actually render on.

  5. 05

    Re-scan and review visually

    Confirm the automated finding clears, then test at zoom and with real content. Passing mathematics does not guarantee comfortable reading.

What ClearSite can detect

Many rendered text elements where axe-core can calculate the foreground, background, size and weight and determine the measured ratio is below its threshold.

What a re-scan can prove

Whether that machine-detectable finding clears after the changed colours render on the same page.

What still needs a person

Text over images, gradients, changing states, disabled controls, zoom, glare and whether a mathematically passing design is comfortably readable.

Browse the website accessibility issue library, compare the related form-label repair guide, or read the full automated testing workflow and limits.

Check the page people need to read and use.

Run it free, fix the shared colour source, then re-scan the rendered result.

Find contrast issues