Wonderstacked

Design

Color Contrast Checker

The Color Contrast Checker measures the WCAG contrast ratio between any two colours and reports AA and AAA pass or fail for both normal and large text. It applies the official W3C relative-luminance formula in your browser, with a live preview and no signup.

Last updated · Free, no signup

Loading interactive Color Contrast Checker…

What does a color-contrast checker measure?

A color-contrast checker compares foreground and background luminance and reports whether the pair meets WCAG thresholds for normal and large text. The result ranges from 1:1 for identical colors to 21:1 for black and white, with separate AA and AAA pass indicators and a live preview.

The calculation uses the WCAG 2.1 and 2.2 sRGB relative-luminance formula and the standard 4.5:1, 3:1, and 7:1 thresholds. Contrast compliance covers text visibility only; it does not test font size, weight, focus states, non-text controls, color-blind distinguishability, or the rest of an accessibility audit.