55k6 Online Tools

Color Contrast Checker

Check text contrast against WCAG AA and AAA levels.

Contrast ratio-
Normal text AA (≥ 4.5)-
Normal text AAA (≥ 7)-
Large text AA (≥ 3)-
Large text AAA (≥ 4.5)-
Sample preview

Normal text: a modern web page should be readable for every visitor.

Large text sample

"Large text" means at least 24px regular or 18.66px bold, which carries a looser threshold.

Based on the WCAG 2.x relative-luminance formula: ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance. Everything is computed locally.

How to use

  1. Pick the foreground (text) and background colors with the color controls, or type HEX values directly.
  2. The ratio is computed live with the WCAG formula (a value between 1 and 21).
  3. Read the verdict table: the four AA/AAA rows for normal and large text are marked green "Pass" or red "Fail".
  4. The sample preview renders normal and large text in your colors so you can judge readability at a glance.
  5. Curious about the inverted pairing? Hit "Swap foreground / background" to exchange the two colors instantly.

FAQ

How is the contrast ratio calculated?
Each HEX color is converted to sRGB, then linearized per the WCAG definition and combined into a relative luminance L (R 0.2126, G 0.7152, B 0.0722). The ratio divides the lighter luminance plus 0.05 by the darker luminance plus 0.05, giving a value from 1 to 21.
What is the difference between AA and AAA?
They are the two WCAG conformance levels: AA is the baseline required by most laws and audits (4.5 for normal text, 3 for large text), while AAA is the stricter enhanced level (7 and 4.5). Shipping products should meet AA at minimum.
What counts as "large text"?
WCAG defines it as text of at least 24px (18pt) at regular weight, or at least 18.66px (14pt) when bold. Large text has lower contrast requirements, so its thresholds are looser.
The ratio passes but reading still feels hard — what else can I do?
Contrast only measures luminance difference, not letter spacing, line height or the typeface itself. Try a slightly larger font size, more generous line height, avoid the harsh pure-black-on-pure-white combo, or aim for 7:1 or higher for body copy to make reading more comfortable.

Related Tools