Fix guides · WCAG 2.2
Fixing low colour contrast
1.4.3 Contrast (Minimum) · Level AA W3C: Understanding 1.4.3
Text must stand out from its background by a contrast ratio of at least 4.5:1, or 3:1 for large text (at least 24 CSS pixels, or about 18.7 pixels bold). The sample below uses #a3a3a3 grey on white, a ratio of 2.52:1; the fix uses #525252, 7.81:1.
Who this affects: People with low vision or colour vision deficiencies, and anyone reading a phone in daylight.
The failing markup
<p class="note" style="color: #a3a3a3;">Delivery takes 3 to 5 working days.</p>How to fix it
- Change the text colour, the background, or both, until the ratio reaches 4.5:1. Darkening the text is usually the smallest change.
- Fix it in the design token or CSS variable, not on each element, so every place that uses the colour is fixed at once.
- Check every state: placeholder text, disabled-looking but active controls, links on hover, and text over images or gradients.
The change
Removed: <p class="note" style="color: #a3a3a3;">Delivery takes 3 to 5 working days.</p>Added: <p class="note" style="color: #525252;">Delivery takes 3 to 5 working days.</p>Verified by the scanner
On 2026-09-13 both versions of this sample were run through Accessibility Pro's scan pipeline with arc-style, axe-core, ibm-equal-access, pa11y, focus-graph. The failing markup was reported as:
- axe-core:
color-contrast, WCAG 1.4.3 - pa11y:
HTML_CodeSniffer check, WCAG 1.4.3
The fixed markup produced no findings at all. To run the same check on every pull request, use the accessibility GitHub Action; how accurate the scanner is overall is in the published benchmark.
Worth knowing
- Text that is purely decorative, part of a logo, or on a control that is genuinely disabled is exempt.
- Contrast over a background image cannot be computed from CSS alone. The scanner samples the rendered pixels for those cases and routes uncertain ones to manual review rather than guessing.