Text does not have enough contrast against its background
Automated check color-contrast, run with axe-core
- WCAG
- 1.4.3 Contrast (Minimum) (Level AA)
- Severity
- Serious: completable, but painful
- Typical effort
- Moderate, 1 to 4 hours
- Category
- Visual design
Who this affects
The largest affected group by far: everyone with low vision, colour vision deficiency, or age-related sight loss. Also anyone reading on a phone in daylight.
Why it matters
Around 1 in 12 men has some colour vision deficiency, and contrast is the most common failure on the entire web. It is also the easiest thing for a complainant to demonstrate with a screenshot. Light-grey placeholder text and pale brand colours on white are the usual culprits.
How to fix it
Body text needs a contrast ratio of at least 4.5:1 against its background; large text (18pt+, or 14pt+ bold) needs 3:1. Usually this means darkening one brand colour in your CSS variables, which fixes every instance at once.
Check your own website
The free scan tests 3 pages against WCAG 2.2 A and AA in about 30 seconds. No sign-up.