A numerical measure of the difference in relative luminance between two colors, used to evaluate text legibility and UI accessibility.
Contrast ratio is a number that quantifies how different two colors are in perceived brightness (relative luminance). It is expressed as a ratio from 1:1 (identical colors, no contrast) to 21:1 (pure black on pure white, maximum contrast). The ratio is calculated using the relative luminance formula defined by the W3C in the WCAG specification.
A contrast ratio of 4.5:1 means the lighter color is 4.5 times as luminous as the darker color. This threshold is the minimum required by WCAG 2.1 AA for normal-sized text.
Contrast ratio is the primary measurable standard for color accessibility in digital interfaces. Insufficient contrast is one of the most common accessibility failures on the web, and one of the most damaging for users with low vision, aging eyes, or color vision deficiencies.
Beyond accessibility compliance, contrast ratio is a practical readability metric. Text that barely clears the 4.5:1 threshold may be technically passing but still uncomfortable to read in suboptimal conditions: bright sunlight, a low-quality monitor, or small font sizes. Adjusting lightness is usually the most effective lever for improving contrast. Good designs typically aim higher than the minimum.
The WCAG contrast ratio formula:
(L1 + 0.05) / (L2 + 0.05)The result is the contrast ratio. Tools like the Atmos contrast checker handle this calculation automatically. You just input two colors and get the ratio.
Key thresholds:
#FFFFFF) on a dark blue (#1d4ed8): approximately 7.2:1, passes WCAG AA and AAA#9ca3af) on a white background: approximately 2.8:1, fails WCAG AA for normal text#374151) on a light gray background (#f9fafb): approximately 10.4:1, comfortably passesWCAG 2 uses a single contrast ratio formula for all cases. APCA (Advanced Perceptual Contrast Algorithm), proposed for WCAG 3, accounts for font size, font weight, and usage context, meaning a thin 12px caption needs more contrast than a heavy 32px heading. APCA scores are more accurate predictors of real-world readability than the WCAG 2 ratio, but WCAG 2 is still the current legal standard.
Yes. WCAG 1.4.11 (Non-text Contrast) requires UI components (buttons, form inputs, focus indicators, icons that convey meaning) to have at least a 3:1 contrast ratio against adjacent colors. This is a lower bar than for text, but it still rules out many light-on-light or dark-on-dark combinations.
Contrast ratio measures luminance difference, not all aspects of readability. Other factors affect legibility: font size, font weight, letter spacing, line height, and rendering quality. A long paragraph at 4.5:1 contrast in a thin, small font is much harder to read than a short heading at the same ratio in a larger, heavier font. Contrast ratio is a necessary condition for accessibility, not a sufficient one.