Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Many more people experience difficulty reading low-contrast text in other conditions: bright sunlight on mobile screens, aging eyes, fatigue, or low-quality displays. WCAG contrast requirements exist to ensure everyone can read your content.
Understanding contrast ratio
Contrast ratio compares the relative luminance of two colors. It's expressed as a ratio from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white).
The formula:
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
Where L1 is the lighter color's luminance and L2 is the darker.
Common reference points:
- 1:1 — No contrast (same color on same color)
- 3:1 — Minimum for large text AA and UI components
- 4.5:1 — Minimum for normal text AA
- 7:1 — Enhanced AAA for normal text
- 21:1 — Maximum (pure black on pure white)
WCAG levels explained
WCAG AA (minimum standard)
The legally required level in most jurisdictions (ADA in the US, WCAG 2.1 AA in the EU).
| Text type | Required ratio |
|---|---|
| Normal text (under 18pt regular / 14pt bold) | 4.5:1 |
| Large text (18pt+ regular / 14pt+ bold) | 3:1 |
| UI components and graphics | 3:1 |
WCAG AAA (enhanced standard)
Recommended but not required. Significantly improves readability for users with moderate vision impairment.
| Text type | Required ratio |
|---|---|
| Normal text | 7:1 |
| Large text | 4.5:1 |
Common contrast failures and fixes
Light gray text on white
One of the most common failures in modern "clean" design.
#999999on#FFFFFF= 2.85:1 — Fails AA#767676on#FFFFFF= 4.54:1 — Passes AA#595959on#FFFFFF= 7.0:1 — Passes AAA
Many designers use #999 as a "subtle" color without realizing it fails accessibility standards.
Dark text on dark backgrounds
A common problem in dark mode designs where brand colors may not translate well:
#0066CC(blue) on#1A1A1A(dark bg) = 3.6:1 — Fails AA for normal text#4DA6FF(lighter blue) on#1A1A1A= 8.3:1 — Passes AAA
Placeholder text in forms
Often set to a light gray that fails contrast requirements. Placeholder text must also meet 4.5:1 contrast with the input background.
Color contrast in design systems
Mature design systems like Material Design, Apple Human Interface Guidelines, and Tailwind CSS build WCAG compliance into their color scales. If you use gray-700 text on gray-50 background in Tailwind, the contrast is designed to pass.
The problem arises when designers create custom brand palettes without checking contrast, or when color values are adjusted during development without re-checking.
Relative luminance explained
Relative luminance measures how bright a color appears to the human eye, on a scale from 0 (absolute black) to 1 (absolute white). It's not simply the average of RGB values — the formula accounts for the non-linear way human eyes perceive brightness.
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
(after linearizing each channel from sRGB)
Green contributes the most to perceived brightness, which is why pure green (#00FF00) appears much brighter than pure blue (#0000FF) even at the same "value."
How to check color contrast free
- Go to Color Contrast Checker
- Enter your foreground (text) color as a hex value
- Enter your background color
- See the contrast ratio and WCAG AA/AAA pass/fail instantly
- Get alternative color suggestions if failing
- Check hex, RGB, HSL, and luminance values for both colors