Low Colour Contrast

Low colour contrast is the most commonly detected WCAG failure on the web.
The 2026 WebAIM Million report found contrast errors on over 80% of the top
one million home pages. It occurs when the luminance difference between text
and its background is insufficient for users with low vision, colour blindness,
or those viewing screens in bright conditions to read the text reliably.
^[1]

---

Who it affects

Low contrast primarily affects:

• Users with low vision who have not yet reached the threshold for using
  a screen reader
• Users with colour blindness — particularly red-green deficiency affecting
  around 8% of males
• Older users whose contrast sensitivity naturally decreases with age
• All users reading in bright sunlight or on low-quality displays

^[2]

---

Minimum requirements

Text type	Minimum contrast ratio
Normal text (under 18pt or 14pt bold)	4.5:1
Large text (18pt+ or 14pt+ bold)	3:1
UI components and graphical objects	3:1
Decorative text, logos, disabled elements	No requirement

---

How to detect it

Automated scanners reliably detect contrast failures for solid-colour text
on solid-colour backgrounds. They struggle with:

• Text over gradient backgrounds
• Text over images or video
• Semi-transparent overlays
• Text rendered via CSS pseudo-elements

^[3]

For these cases, use a colour dropper tool to sample the actual rendered
colours at the point of worst contrast, then calculate the ratio manually
using a contrast checker.

---

How to fix it

Darken text or lighten the background until the ratio meets the minimum
threshold. Use a contrast checker during design — fixing contrast after
development is significantly more expensive.

Do not rely on font weight as a substitute for contrast — bold text has a
lower threshold only at 14pt and above. A bold 12px label still requires
4.5:1.
^[1]

---

Common mistakes

Relying on brand colours without checking. Brand guidelines frequently
specify colour combinations that fail WCAG. Always verify — brand consistency
does not override legal accessibility requirements.

Assuming placeholders are exempt. Placeholder text inside form inputs
must meet the same contrast requirements as regular text.

Testing only in light mode. If your site supports dark mode, contrast
must be verified in both modes independently.

---

References

1. W3C Web Accessibility Initiative. Understanding Success Criterion 1.4.3: Contrast (Minimum). https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html ↑
2. WebAIM. The WebAIM Million — 2026 Report. https://webaim.org/projects/million/ ↑
3. W3C Web Accessibility Initiative. Understanding Success Criterion 1.4.11: Non-text Contrast. https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html ↑