Colour & contrast
Text Colour Is Too Close to Its Background Colour
When text and background are too similar, many people can't read the words — especially in sunlight, on cheap screens, or with ageing or low vision.
color-contrastWCAG 2.0Introduced in WCAG 2.0.Level AAAA — the Australian baseline (WCAG 2.2 AA) most laws and policies ask for.
- Status
- SeriousSerious — Significant friction, or information that is lost.CurrentScanners run this rule today.
- Owner
- DesignDevTestProduct
- Audit
- Automated+ManualA scanner finds it; a person confirms the fix.
Why it matters
Contrast is the difference in brightness between text and what sits behind it. Normal text needs a ratio of at least 4.5 to 1. Large text needs at least 3 to 1.
Low contrast hits people with low vision, colour blindness and older eyes. It also hits anyone reading a phone outside. If they can't read a price, a label or an error, they can't act on it.
Who it affects
| Who | What they experience | Impact |
|---|---|---|
| Low-vision users (magnification) | Faint text blurs into the background, so they zoom, squint or give up. | High impact |
| Cognitive and neurodivergent users | Hard-to-read text takes more effort, so they tire faster and miss details. | Partial impact |
| Voice control users | They may struggle to read a button's label in order to say it. | Partial impact |
| Deaf and hard of hearing | Affected if captions or transcripts use low-contrast text, otherwise not. | Partial impact |
Business & product impact
| Area | Why | Impact |
|---|---|---|
| Legal | It fails WCAG 2.2 Level AA, the usual standard in Australian Disability Discrimination Act complaints and in EN 301 549. Contrast is one of the most common failures found in audits. | High impact |
| Conversion | Pale prices, buttons and form hints get missed or misread. That means fewer sign-ups and sales. | Moderate impact |
| SEO | Search engines don't rank on colour contrast. Don't sell it as an SEO win. | Low impact |
| Brand trust | Unreadable text looks careless. Many customers, not just disabled ones, notice it. | Moderate impact |
| Cost to fix | Cheap if fixed in the colour palette or design tokens. Costly if every page sets its own colours. | High impact |
Fixing it in code
Light grey body text
Don't
.note { color: #aaaaaa; background: #ffffff; }Do
.note { color: #595959; background: #ffffff; }#595959 on white is about 7 to 1, well above the 4.5 to 1 minimum.
White text on a pale brand button
Don't
.btn { color: #ffffff; background: #4fb3ff; }Do
.btn { color: #ffffff; background: #0067b8; }A darker shade of the same blue gives white text enough contrast.
Fixing it in design and content
Placeholder text used as the only hint
Don't
Pale grey placeholder text inside the field is the only instruction.
Do
Put the hint in a visible label or helper text above the field, in a colour that meets 4.5 to 1.
Placeholders are often faint and disappear when typing starts.
Designer's handoff note
Check every text and background pair in your palette before handing over. Include hover, disabled-looking and error states.
Text over photos or gradients needs checking at its lightest point. Add a solid or dark overlay behind the text if needed.
Quick test
Tool
A free contrast checker (such as WebAIM's (opens in a new tab), or the colour picker in Chrome DevTools (opens in a new tab))
Checklist
- Pass
- Normal text is 4.5 to 1 or more, and large text is 3 to 1 or more.
- Fail
- The ratio is below those numbers.
What a green scan still misses
A scanner can't reliably check text over images, gradients or video, and it flags these for a person to review. It also misses states it never sees, like hover, focus or error messages.
Reference
- Rule ID
color-contrast- Raised by
- axe-core: “Elements must meet minimum color contrast ratio thresholds”
- Lighthouse: “Background and foreground colors have a sufficient contrast ratio”
- WCAG
- 1.4.3 Contrast (Minimum) (opens in a new tab) · Level AA · since WCAG 2.0
- Other standards
- EN 301 549 9.1.4.3 · RGAA 3.2.1
- Last reviewed
- 14 October 2026