HomeFix guides → Colour contrast - inline (WCAG 1.4.3 AA)

acc

How to fix: Colour contrast - inline (WCAG 1.4.3 AA)

Why this matters

Low-contrast text is unreadable for users with reduced vision (~8% of men have some colour-vision deficiency). WCAG 1.4.3 Level AA requires 4.5:1 ratio for normal text, 3:1 for large text. This check evaluates inline styles only — full CSS rendering requires axe DevTools.

Background

Low-contrast text is unreadable for users with reduced vision. WCAG 1.4.3 Level AA requires 4.5:1 for normal text, 3:1 for large text. Inline-style check only — full CSS audit needs axe DevTools.

References

WCAG 2.1 SC 1.4.3 Contrast (Minimum) AA · SC 1.4.6 Contrast (Enhanced) AAA

How to fix

Code snippet for each stack we cover. Pick the one matching your server / framework.

nginx
No server config — CSS / design.
apache
Same.
cloudflare
Same.
wordpress
Use the WebAIM Contrast Checker (https://webaim.org/resources/contrastchecker/) on your colour palette before applying to the theme.
flask
Same — design / CSS task.
express
Same.
rails
Same.

Verify it's working

Test your text + background combinations at webaim.org/resources/contrastchecker — should pass AA at 4.5:1.

Want to know if your site has this issue?

Run a free 53-check audit — security, GDPR, NIS2, and technical SEO.

Audit my site →