Color contrast checker

What the numbers mean

Large text is 24px or larger, or about 18.66px (14pt) or larger when bold. AA is the usual practical and legal target; aim for AAA on body copy where the design allows.

How the ratio is calculated

Each color is converted to its relative luminance, which weights red, green and blue by how bright the eye sees them, and the ratio is the lighter value plus 0.05 over the darker value plus 0.05. Identical colors give 1:1 and black on white gives 21:1. This page uses the WCAG 2 formula, the one the standard and most audit tools use.

Two limits worth knowing: the formula does not know about font weight, thin strokes or anti-aliasing, so a passing ratio on a very light weight can still be hard to read; and a color with transparency has no single ratio until you know what is behind it. The guide covers the cases that catch people out.

Common questions

What contrast ratio do I need for WCAG AA?

At least 4.5:1 for normal text and 3:1 for large text (24px or larger, or 18.66px or larger and bold). Interface components and graphics need 3:1.

What is the difference between AA and AAA?

AAA is the stricter level: 7:1 for normal text and 4.5:1 for large text. AA is the usual target. AAA is worth aiming for on body text where you can.

How is the contrast ratio calculated?

Each color becomes a relative luminance, and the ratio is the lighter luminance plus 0.05 divided by the darker luminance plus 0.05, from 1:1 for identical colors to 21:1 for black on white.

How do I check contrast on a live website?

Hover the text with the Design Toolkit extension. It reports the contrast ratio and the WCAG grade of the text against what is really behind it, including translucent backgrounds, without copying any colors by hand.

Read next