WCAG Contrast Ratios: The Complete Practical Guide">Contrast ratio is the mathematical relationship between the relative luminance of two colors. It ranges from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, pure black on pure white). WCAG uses this ratio to determine whether color combinations are readable.
The Formula
The contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05) where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance itself is derived from the sRGB values using a formula that accounts for human perception of different wavelengths (green contributes more to perceived brightness than red, which contributes more than blue).
What the Numbers Mean
A ratio of 1:1 means the colors are identical in luminance. 3:1 is the minimum for large text (AA) and UI components. 4.5:1 is the minimum for normal text (AA). 7:1 is the minimum for normal text (AAA). 21:1 is the theoretical maximum. Most practical text pairs fall in the 7:1 to 15:1 range for comfortable reading.
Why Not Just Maximize?
If higher is better, why not always use 21:1 (pure black on pure white)? Because maximum contrast causes halation (a glowing effect around dark text on bright backgrounds) that creates eye strain during extended reading. The comfortable range for body text is approximately 10:1 to 15:1.
PaletteRx's Contrast Grid
You never need to calculate contrast ratios manually. PaletteRx's Step 3 tests every color pair in your palette simultaneously and shows the ratio for each pair, color-coded by pass/fail status. Green means AA pass. The grid gives you a complete picture of which combinations are usable.