Powered by
Colour & contrast
Text Doesn't Reach the Higher Colour Contrast Level
Text that passes the usual contrast check can still be too faint for people with low vision, older eyes or screens in bright light.
color-contrast-enhancedWCAG 2.0Introduced in WCAG 2.0.Level AAAAAA — the highest level; beyond the Australian baseline (AA).
- Status
- ModerateModerate — An annoyance, with a workaround.CurrentScanners run this rule today.
- Owner
- DesignDevTestProduct
- Audit
- Automated+ManualA scanner finds it; a person confirms the fix.
Why it matters
Contrast is how much text stands out from its background. This rule checks a higher bar: 7 to 1 for normal text, and 4.5 to 1 for large text.
Many people with low vision need that extra contrast to read without strain. Everyone else benefits too — on a phone in sunlight, or at the end of a long day.
Who it affects
| Who | What they experience | Impact |
|---|---|---|
| Low-vision users (magnification) | They strain to read faint grey text, or zoom in and still struggle. | High impact |
| Cognitive and neurodivergent users | Hard-to-read text takes more effort, so they tire faster and may give up. | Partial impact |
| Voice control users | Mostly fine, though they must read a control's label to say it. | Partial impact |
Business & product impact
| Area | Why | Impact |
|---|---|---|
| Legal | This is a AAA check, above the AA level that Australian law and EN 301 549 usually point to. Few organisations must meet it, but it's strong evidence of good practice. | Low impact |
| Conversion | Clear prices, labels and buttons are read faster and trusted more, especially by older customers. | Moderate impact |
| SEO | Search engines don't measure colour contrast — no real benefit. | Low impact |
| Brand trust | Readable text feels confident and premium. Washed-out grey often reads as cheap or careless. | Moderate impact |
| Cost to fix | Cheap if you darken a few shared colour tokens. Costly if colours are hard-coded across the site. | Moderate impact |
Fixing it in code
Grey body text on white
Don't
.caption { color: #767676; background: #ffffff; }A screen reader says: “No change for screen readers — the issue is how it looks. Ratio is about 4.5 to 1.”
Do
.caption { color: #595959; background: #ffffff; }A screen reader says: “No change for screen readers. Ratio is about 7 to 1.”
A darker grey reaches 7 to 1 and still looks soft.
Fixing it in design and content
Light text on a brand colour
Don't
White text on a mid-blue button, which only just passes the usual level.
A screen reader says: “Not applicable — screen readers don't read colour.”
Do
Use a darker shade of the brand blue behind white text, and record it as the text-safe shade in the design system.
A screen reader says: “Not applicable — screen readers don't read colour.”
A darker background gives white text the extra contrast it needs.
Designer's handoff note
Pick text colours from a palette already checked at 7 to 1. Mark which pairs are safe for small text.
Watch placeholder text, captions, footers and disabled-looking text — they are the usual faint offenders.
Quick test
Tool
Colour Contrast Analyser (opens in a new tab) (free) or the WebAIM contrast checker (opens in a new tab)
Checklist
- Pass
- Normal text is 7 to 1 or more, and large text is 4.5 to 1 or more.
- Fail
- The ratio is below those numbers.
Check these at the same time
- Text colour is too close to its background colour
color-contrast
What a green scan still misses
A scanner can't reliably judge text over images, gradients or video. It also can't tell if text is readable in real light on a real phone.
Reference
- Rule ID
color-contrast-enhanced- Raised by
- axe-core: “Elements must meet enhanced color contrast ratio thresholds”
- WCAG
- 1.4.6 Contrast (Enhanced) (opens in a new tab) · Level AAA · since WCAG 2.0
- Last reviewed
- 14 October 2026