Text needs enough contrast
- Rule:
axe/color-contrast - Checks: Elements must meet minimum color contrast ratio thresholds
- WCAG: 1.4.3
- Fix class:
design: A fix needs a visual decision.
Who it affects
Section titled “Who it affects”- People with low vision, who zoom, magnify or need strong contrast.
- People who see some colors weakly or not at all.
How to fix it
Section titled “How to fix it”The text color is too close to its background color
Section titled “The text color is too close to its background color”Darken the text or lighten the background, or the reverse, until the contrast ratio is at least 4.5:1. Large text needs 3:1: at least 24px (18pt), or at least 18.67px (14pt) and bold (font-weight of 700 or more). Change the color where it is defined, such as a design token or CSS custom property, so every use is fixed together.
The text is faded with opacity or a semi-transparent color
Section titled “The text is faded with opacity or a semi-transparent color”Remove the opacity from the text and its ancestors, or the transparency from its color, then pick a color that meets the ratio. axe measures the blended color where it can, and asks for review where it cannot.
The text sits on a background image or gradient
Section titled “The text sits on a background image or gradient”axe cannot compute such a background, so it reports the text as needing review. Check the contrast where it is lowest, against every color behind the text, not only the lightest and darkest. Where it falls short, put the text on a solid or semi-opaque backing color, and set a passing background-color in case the image does not load.
axe asks for review on an empty form field
Section titled “axe asks for review on an empty form field”axe measures the field’s text color even when it is empty, and asks for review when that color falls short. Enter a value and check its contrast. Check the placeholder too: it needs the same ratio as other text, and axe does not test it.
Fixes that fail
Section titled “Fixes that fail”Choosing a color that comes close, such as 4.4:1
Section titled “Choosing a color that comes close, such as 4.4:1”The thresholds are minimums with no rounding, so 4.49:1 fails.
Making small text bold to use the 3:1 large-text threshold
Section titled “Making small text bold to use the 3:1 large-text threshold”Bold text counts as large only from 18.67px (14pt). Bold 14px text still needs 4.5:1.
Fixing only the state axe scanned
Section titled “Fixing only the state axe scanned”axe tests the page as it was when scanned. Hover, focus, visited, selected and error states, and any dark theme, need the same ratio, so check each.
More on the rule
Section titled “More on the rule”axe-core’s documentation of the rule
CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.