Check the contrast ratio between two colors with pass/fail verdicts for WCAG AA and AAA, normal and large text, plus a live preview.
All calculations happen locally in your browser. Nothing leaves your device.
Contrast ratio is the relationship between the lightness of a color and the lightness of its background, expressed as a number like 7.2:1. It is the single most important metric for text readability: if the numbers are close together, text fades into its background; if they are far apart, text pops. WCAG (the Web Content Accessibility Guidelines) turns this number into concrete pass/fail rules for two text sizes and two conformance levels, which is exactly what the table above checks in real time.
The contrast ratio measures how different two colors are in perceived brightness, expressed as a number from 1:1 (identical) to 21:1 (black on white). If text and its background are too similar, it becomes hard to read — especially for people with low vision or color blindness, or on bright screens. WCAG defines minimum ratios that text must meet to be considered accessible.
Each color is converted to a relative luminance value using the WCAG formula: R, G and B channels are linearized from sRGB, then weighted (0.2126R + 0.7152G + 0.0722B). The ratio is (Llighter + 0.05) / (Ldarker + 0.05). This tool performs that exact calculation in your browser.
WCAG defines large text as at least 18pt (24px) regular weight, or at least 14pt (roughly 18.7px) bold. Large text needs a lower minimum ratio (3:1 for AA, 4.5:1 for AAA) because bigger glyphs are easier to distinguish than small ones.
AA (4.5:1 for normal text) is the legal baseline in many regions and covers the vast majority of users. AAA (7:1) is the gold standard for new products, documentation and anything where readability is critical — it comfortably serves older users and people with vision impairment. When in doubt, aim for AAA.
No. The color pickers only produce fully opaque colors, so the ratio is always between two solid colors. If your design uses alpha, flatten it over the actual background first, then check the resulting color pair here.
If you just finished with Color Contrast Checker, the natural next steps are Color Palette Generator, Color Converter, CSS Gradient Generator, or browse every tool in Privacy File Tools.