Large text
Normal body text
Small caption
#000000 About this tool
Color contrast ratio measures the perceptual difference in luminance between two colors, expressed as a value from 1:1 (identical) to 21:1 (pure black on pure white). The WCAG 2.x formula linearizes each sRGB channel — a linear segment below 0.03928 and a 2.4-power curve above it — weights them 0.2126 R / 0.7152 G / 0.0722 B to get relative luminance, then computes (lighter + 0.05) / (darker + 0.05). Web Content Accessibility Guidelines set four thresholds: AA requires 4.5:1 for normal text and 3:1 for large text (>=24px, or >=18.66px bold); AAA raises those to 7:1 and 4.5:1.
Use it to verify body copy, buttons, links, and form labels meet accessibility requirements before shipping, to debug a design-system color pair flagged by an audit, or to find a passing alternative without abandoning your palette. Enter any CSS color — hex, rgb(), hsl(), or a named color — in either field, read the live ratio and grade grid, and when AA fails, apply the suggested foreground that nudges the original color's OKLCH lightness just far enough to reach 4.5:1.
Contrast ratio depends only on luminance, not hue — two colors with the same lightness can be wildly different in color yet still fail, because color-blind and low-vision users rely on the luminance difference.
Frequently asked questions
What contrast ratio is needed to pass WCAG?
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (24px or larger, or 18.66px and bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text.
What counts as large text for contrast purposes?
Large text is 18.66px (14pt) or larger when bold, or 24px (18pt) or larger at normal weight. It is held to a lower contrast threshold because bigger glyphs stay legible at lower contrast.
How is the WCAG contrast ratio calculated?
Each color's relative luminance is found by linearizing its sRGB channels and weighting them 0.2126 R + 0.7152 G + 0.0722 B. The ratio is then (lighter luminance + 0.05) / (darker luminance + 0.05), giving a value between 1:1 and 21:1 that is independent of which color is foreground.