Why this matters
Low contrast text is difficult or impossible to read for users with low vision, color blindness, or when viewing screens in bright sunlight. Approximately 1 in 12 men and 1 in 200 women have color vision deficiency.
Common failures
These are the most frequent ways this criterion is violated in real-world websites:
- Light gray text on white backgrounds
- Placeholder text with insufficient contrast
- Disabled button text that's nearly invisible
- Brand colors that don't meet contrast ratios
- Text overlaid on images without a background
- Links that are only distinguished by color with insufficient contrast against surrounding text
How to fix
- Use a contrast checker: aim for 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold)
- Adjust your color palette — often a slightly darker shade passes while maintaining the brand feel
- Add semi-transparent backgrounds behind text overlaid on images
- Test in both light and dark mode
- Use CSS custom properties to maintain consistent, accessible colors across your site
Related axe-core rules
xsbl uses axe-core to automatically detect violations of this criterion. The following rules are checked:
Check your site for 1.4.3 violations
xsbl scans your rendered pages in a real browser and finds violations of this criterion automatically.
Scan your site freeOfficial reference: Understanding WCAG 1.4.3: Contrast (Minimum) (W3C)