Skip to content
Lizely

Color Contrast Checker

Check any text/background color pair against WCAG AA and AAA contrast rules in real time.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Set the foreground (text) color using the color picker or by typing a hex value like #111111.
  2. 2.Set the background color the same way, for example #ffffff.
  3. 3.Read the contrast ratio and the AA/AAA pass or fail badges, and adjust either color until it meets the level you need.

About Color Contrast Checker

This color contrast checker measures how readable text is against its background using the official WCAG 2.x contrast formula. Pick a foreground (text) color and a background color, and it instantly returns the contrast ratio along with a clear pass or fail for every accessibility threshold that matters.

The math behind it is exactly what the Web Content Accessibility Guidelines specify. Each color channel is converted from sRGB to linear light, then combined into a relative luminance value using the weights 0.2126 for red, 0.7152 for green, and 0.0722 for blue. The contrast ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 the darker one. Ratios always fall between 1:1 (identical colors) and 21:1 (pure black on pure white).

Those numbers map onto concrete conformance levels. WCAG Level AA requires at least 4.5:1 for normal text and 3:1 for large text (roughly 18pt, or 14pt bold). Level AAA raises the bar to 7:1 for normal text and 4.5:1 for large text. A separate rule, non-text contrast, asks for at least 3:1 for UI components, icons, and graphical objects such as form field borders and focus indicators. This tool reports all of them at once so you can see exactly which standards a color pair clears.

Contrast is not a cosmetic detail. Roughly one in twelve men and one in two hundred women have some form of color vision deficiency, and millions more read with low vision, cataracts, or on cheap screens in bright sunlight. Sufficient luminance contrast is what keeps body copy, buttons, and error messages legible for all of them. It is also a legal requirement in many places: the Americans with Disabilities Act (ADA) is routinely applied to websites in the United States, Section 508 mandates it for federal agencies, and the European standard EN 301 549 references WCAG directly for public-sector sites.

A few practical tips. Contrast depends only on the two colors, not on which is text and which is background, so the ratio is symmetric. Large, bold text can pass at a lower ratio because thicker strokes are easier to read. And passing AA is a floor, not a ceiling; aiming for AAA where you can gives comfortable reading for the widest audience.

Keep in mind what the contrast ratio does and does not cover. It measures luminance contrast, not hue, so two colors with very different hues but similar brightness, such as red on green, can still fail even though they look distinct to some viewers. That is also why relying on color alone to convey meaning is discouraged; pair it with text labels, icons, or underlines. Gradients, semi-transparent overlays, and text placed on images are trickier, because the effective background changes across the element, so test against the lightest and darkest points a letter can sit on. Placeholder text, disabled states, and thin decorative fonts are common failure spots worth double-checking. Everything here runs locally in your browser, so you can test brand palettes and design tokens privately without uploading anything.

Methodology & sources

Contrast ratio per WCAG 2.x: relative luminance with sRGB linearization, ratio = (L1+0.05)/(L2+0.05); AA≥4.5:1 normal / AAA≥7:1.

Frequently asked questions

What contrast ratio do I need to pass WCAG?
For Level AA you need at least 4.5:1 for normal text and 3:1 for large text (about 18pt, or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. UI components and graphics need at least 3:1.
What counts as large text?
WCAG defines large text as at least 18pt (24px) for regular weight, or at least 14pt (about 18.66px) when bold. Large text is allowed a lower contrast ratio because thicker, bigger letters are easier to read.
Does the order of the two colors matter?
No. The WCAG contrast ratio always divides the lighter color's luminance by the darker one's, so swapping foreground and background gives the exact same result. Contrast is a property of the color pair, not of which one is text.

Related tools

Color Tools guides

View all