The color-contrast rule flags text that does not stand out enough from its background. Normal text needs a contrast ratio of at least 4.5:1, large text 3:1. Usually, making the text or background colour a few shades darker or lighter fixes it.
What the rule means
The contrast ratio compares the relative luminance of two colours, from 1:1 (the same colour) to 21:1 (black on white). WCAG 1.4.3 requires:
- 4.5:1 for normal text,
- 3:1 for large text – 24px (18pt) regular, or 18.66px (14pt) bold and above.
Logos and brand names, text in disabled controls, purely decorative text and text that is incidental in a photo are exempt.
Who is affected
People with low vision, people with colour vision deficiencies and older people whose contrast sensitivity declines – plus anyone using a phone in sunlight or a dim screen. Low contrast is the most common failure on the web: the WebAIM Million 2026 found it on 83.9% of the top one million home pages [4].
Why the check fails
- Light grey text for hints, dates, breadcrumbs or footer links.
- White text on light brand colours such as orange, light blue or green, especially on buttons and badges.
- Transparency:
opacityor semi-transparent text colours quietly lower contrast. - Themes and page builders with default colours nobody measured.
- Placeholder text in form fields used as the only label.
How to fix it
- Measure the reported pair – the colour picker in your browser's developer tools shows the ratio.
- Change the colour in the design token or CSS variable, not on the single element, so every page is fixed at once.
- Check each pairing in your palette once and document the approved pairs.
/* Before – fails */
.hint { color: #999999; background: #ffffff; } /* 2.85:1 */
.btn-primary { color: #ffffff; background: #f59e0b; } /* 2.15:1 *//* After – passes */
.hint { color: #767676; background: #ffffff; } /* 4.54:1 */
.btn-primary { color: #ffffff; background: #b45309; } /* 5.02:1 */Text over photos gets its own solid backdrop, so contrast holds even over the lightest part of the image:
.hero__title { color: #ffffff; background: rgb(0 0 0 / 0.7); padding: .25em .5em; }How to test it manually
- Open developer tools (F12) and select the element; the colour picker in Chrome, Edge and Firefox shows the contrast ratio.
- For text over images and gradients, use an eyedropper – for example the free Colour Contrast Analyser – on the lightest area behind the text.
- Check states: hover, focus, visited links, error messages.
- Repeat at mobile width, where text often sits on images that are beside it on desktop.
Related WCAG criterion
1.4.3 Contrast (Minimum), Level AA. Related: 1.4.11 Non-text Contrast for input borders, icons and focus indicators (3:1), and 1.4.1 Use of Color for links distinguished by colour alone.
How Reviseberg reports it
Reviseberg runs color-contrast on every crawled page twice – at 1280px and again at 360px, because a narrow layout often puts text on a different background. In the issue list you see the rule with its severity, WCAG criterion, number of affected elements and pages, and the points you get back by fixing it. Contrast failures usually come from one shared CSS class, so one change can fix dozens of pages – and the ranking reflects that. The detail view shows the CSS selector, the HTML snippet and every affected page.
Where axe-core cannot determine the background reliably – images, gradients, overlapping elements – the case goes to the Potential issues queue for a person to decide, instead of being quietly counted as a pass. You can mark findings as "ignore", "can't fix" or "false positive" with a reason; every decision is logged.
Related rules
- undefined – links that stand out from the text around them by colour alone.
- undefined – a focus indicator that is missing altogether.