A complete explanation of the relative luminance formula, AA/AAA thresholds, and practical tips for choosing accessible colors.
Color contrast is a numeric measure of how "distinguishable" a text (foreground) is from its background. The Web Content Accessibility Guidelines (WCAG) 2.x standardize this measure so text stays readable even for people with visual impairment, age-related vision loss, or poor lighting conditions. The result is a single number between 1:1 (colors are identical, no contrast) and 21:1 (pure black/white, maximum contrast).
How is color contrast calculated? (the relative luminance formula)
Quick answerFirst, each color's R, G, B channels are normalized to 0-1 and converted to a linear value with gamma correction. These three linear values are summed with the weights 0.2126×R + 0.7152×G + 0.0722×B to get the relative luminance (L). The contrast ratio is found with (L_lighter + 0.05) / (L_darker + 0.05).
- Step 1 — sRGB normalize: for each channel c, c' = c/255.
- Step 2 — gamma correction: if c' ≤ 0.03928, c_lin = c'/12.92; otherwise c_lin = ((c'+0.055)/1.055)^2.4.
- Step 3 — relative luminance: L = 0.2126·R_lin + 0.7152·G_lin + 0.0722·B_lin.
- Step 4 — ratio: add 0.05 to the higher L and the lower L, then divide: (L1+0.05)/(L2+0.05), with L1>L2.
The green channel has the highest weight (0.7152) because the human eye is most sensitive to green; the blue channel (0.0722) has the lowest weight. That's why pure red, green, and blue at the same "brightness" produce different contrast ratios.
What's the difference between AA and AAA accessibility?
Quick answerAA is WCAG's minimum (and most commonly required) level: normal text needs 4.5:1, large text and UI components need 3:1. AAA is the enhanced level: normal text needs 7:1, large text needs 4.5:1. AAA isn't always practical for every design, but it's preferred for critical content (e.g. health information, official forms).
WCAG 2.x contrast threshold summary
| Content type | AA (minimum) | AAA (enhanced) |
|---|
| Normal text (below 14pt/18.66px, unless bold) | 4.5:1 | 7:1 |
| Large text (18pt/24px+ or 14pt/18.66px+ bold) | 3:1 | 4.5:1 |
| UI component / graphical object boundary | 3:1 | not defined |
| Decorative / disabled elements | not required | not required |
What does a 4.5:1 contrast ratio mean?
Quick answer4.5:1 is the minimum ratio WCAG AA requires for normal-size text. For example, medium gray #767676 on white (#FFFFFF) barely clears this bar at roughly 4.54:1 — a classic "boundary" example frequently cited in WCAG documentation. A slightly lighter gray (e.g. #999) usually drops below 4.5:1 and fails AA.
How do I choose accessible colors?
Quick answerAim for at least AA (4.5:1 normal text / 3:1 large text) in every text/background pair; don't rely on color alone for meaning (e.g. add an icon or bold text next to red for an error message); darken or lighten your brand color's lightness to raise contrast; and check color pairs that might be confused, like red-green, with a colorblindness simulation.
Practical tip: a brand's primary color (e.g. purple #7c3aed) usually doesn't have enough contrast as text on white, but it can work well as a background with white text — that's why it's useful to test the same color as both text and background.
How do I test website contrast?
Quick answerEnter every text/background and button/icon pair from your site into the tool above and check the AA/AAA result; to compare several brand colors at once, use the Palette Check tab — it shows every pairwise combination of 4 colors in one table.