Color Contrast Checker

What the Color Contrast Checker does

This tool measures the contrast ratio between a text (foreground) color and a background color, then tells you whether that pairing meets the Web Content Accessibility Guidelines (WCAG) 2.1. Contrast is calculated from the relative luminance of each color using the official WCAG formula, producing a ratio between 1:1 (no contrast) and 21:1 (black on white). The result is shown as a large ratio with pass or fail badges for each compliance level.

It is aimed at designers, developers and content creators who want their interfaces to be readable by everyone, including people with low vision or color-vision deficiencies. Meeting these standards is also a common legal and procurement requirement for public-facing websites and apps.

How to use it

Pick your text color and background color using the color swatches, or type a hex value directly into either field. A live preview shows normal text, large text and a heading using your chosen colors so you can judge readability at a glance. The contrast ratio updates instantly as you change either color.

Below the preview, four badges show whether the combination passes WCAG AA and AAA for both normal and large text. The thresholds are 4.5:1 for normal AA text, 3:1 for large AA text, 7:1 for normal AAA text and 4.5:1 for large AAA text. If a pairing fails AA, the tool suggests accessible foreground colors that reach at least 4.5:1 against your background - click any suggestion to copy its hex code. Use the Swap button to quickly reverse foreground and background.

Understanding the WCAG levels

Large text is defined by WCAG as at least 18pt, or 14pt bold, which is why it is allowed a lower contrast threshold than body text. AA is the level most organizations aim for, while AAA is a stricter target for content that needs the highest readability. Meeting the ratio is one part of accessibility; you should also avoid relying on color alone to convey meaning.