Contrast Ratio
Definition
A measurement of the difference in brightness between text and its background, crucial for readability and accessibility.
What is Contrast Ratio?
Contrast ratio measures the difference in luminance (brightness) between two colours, typically text and its background. It's expressed as a ratio like 4.5:1 or 7:1. Higher ratios mean more contrast and easier reading.
This matters because people with vision impairments, colour blindness, or even just bright sunlight on their screen need sufficient contrast to read your content.
Understanding the Numbers
- 1:1 - No contrast (same colour)
- 3:1 - Minimum for large text (18px+ or 14px bold)
- 4.5:1 - Minimum for normal text (WCAG AA standard)
- 7:1 - Enhanced contrast (WCAG AAA standard)
- 21:1 - Maximum contrast (black on white)
WCAG Requirements
The Web Content Accessibility Guidelines set legal standards:
| Standard | Normal Text | Large Text |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
Most websites should meet AA standards at minimum. AAA is better but harder to achieve with brand colours.
Common Contrast Failures
- Light grey text on white backgrounds
- Coloured text on coloured backgrounds without checking
- Placeholder text in forms (often too light)
- Text over images without overlays
Checking Contrast
Free tools like WebAIM's Contrast Checker or browser extensions instantly calculate ratios. Enter your foreground and background colours, and they'll tell you if you pass WCAG standards.
Don't guess—always check. What looks fine on your bright monitor may be unreadable on others.