Color Contrast Checker

Low-contrast text is the most common accessibility failure on the web — gray-on-white body copy that's stylish in a mockup and unreadable for the hundreds of millions of people with low vision, color-vision deficiency, or simply a phone screen in sunlight. The WCAG standard quantifies readability as a contrast ratio between text and background, from 1:1 (identical colors) to 21:1 (black on white), with defined thresholds for compliance.

This checker computes the exact ratio using the official WCAG relative-luminance formula and grades it against all four thresholds: AA for normal text (4.5:1) and large text (3:1), and the stricter AAA level (7:1 and 4.5:1). AA is the level referenced by most accessibility laws and procurement requirements worldwide — if you build client work, these badges are the ones auditors check.

The live preview renders real text in your actual color pair at both sizes, because a passing ratio you can verify with your own eyes builds more confidence than a number alone. Adjust either color with the picker or by typing a HEX value, and watch the ratio and badges update instantly. Accessible contrast isn't a design constraint — the highest-converting interfaces are almost always the most readable ones.