What Is the WCAG Contrast Ratio?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). WCAG AAA requires 7:1. The contrast ratio formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's relative luminance and L2 is the darker color's relative luminance.
WCAG Contrast Levels
| Level | Normal Text | Large Text |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
How the Formula Works
The contrast ratio ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white). To compute it:
- Convert each color from hex to linear RGB by dividing each channel by 255 and applying the sRGB transfer function.
- Calculate relative luminance:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B - Compute the ratio:
(L_lighter + 0.05) / (L_darker + 0.05)
What Counts as Large Text?
Large text is 18pt (24px) or larger at regular weight, or 14pt (approximately 18.66px) or larger at bold weight. Large text has a relaxed contrast requirement because its size already improves readability.
Practical Examples
- Black (#000000) on white (#FFFFFF): contrast ratio = 21:1 (passes AAA)
- Gray (#767676) on white (#FFFFFF): contrast ratio = 4.54:1 (passes AA, fails AAA)
- Gray (#959595) on white (#FFFFFF): contrast ratio = 2.99:1 (fails AA for normal text)
Use the gen8x color contrast checker to test your own color combinations against WCAG standards.