Color Contrast Checker
Pick a text and background color and see the WCAG 2.1 contrast ratio, with an instant pass or fail for AA and AAA at both normal and large text sizes.
Contrast ratio
Normal text needs 4.5:1 (AA) or 7:1 (AAA). Large text — 18.66px bold or 24px and up — needs 3:1 (AA) or 4.5:1 (AAA).
Why contrast is the first accessibility check
Low-contrast text is one of the most common and most avoidable accessibility failures on the web. If the luminance difference between your text and its background is too small, people with low vision, color-vision deficiencies, or simply a bright screen outdoors will struggle to read it. WCAG turns that into a concrete, testable number so you can catch the problem before it ships rather than in an audit later.
The ratio depends on relative luminance, not on how “different” two hues look. That is why a mid-grey on white can fail while a saturated blue on white passes: the eye reads lightness, and the formula weights green far more heavily than red or blue. When a pairing falls short, adjust the lightness of one color rather than swapping the hue.
Frequently Asked Questions
How is the contrast ratio calculated?
It follows the WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colors. Each color channel is linearized from its sRGB value first, then weighted 0.2126 for red, 0.7152 for green, and 0.0722 for blue. The result ranges from 1:1 (identical colors) to 21:1 (black on white).
What ratio do I need to pass?
For normal-size text, WCAG AA requires at least 4.5:1 and AAA requires 7:1. For large text — 18.66px (14pt) bold, or 24px (18pt) and above — AA requires 3:1 and AAA requires 4.5:1. This tool shows a pass or fail against all four thresholds at once.
What counts as large text?
WCAG defines large text as 18pt (about 24px) or larger, or 14pt (about 18.66px) or larger when bold. Because larger, heavier letterforms are easier to read, they are allowed a lower minimum contrast than body copy.
Does contrast apply to icons and UI components too?
Yes. WCAG 2.1 adds a separate 3:1 minimum for meaningful graphics and the visual state of user-interface components (the 'non-text contrast' rule). This checker targets text contrast, but 3:1 is a useful floor to keep in mind for icons, focus rings, and control borders.
Why does the same pair sometimes pass large text but fail normal text?
The thresholds differ. A pairing at, say, 3.5:1 clears the 3:1 bar for large AA text but falls short of the 4.5:1 needed for normal AA text. Bumping the color's lightness or darkness a little is usually enough to cross into the normal-text range.
This is a helper that gives estimates — verify against your design system and real WCAG tooling before relying on it for a compliance decision.