Color Contrast Checker

Pick a text color and a background color. You get the WCAG contrast ratio and whether it passes AA and AAA.

How contrast ratio works

WCAG 2 defines contrast as a ratio between the relative luminance of two colors. Relative luminance is a weighted sum of the linearized red, green and blue values: L = 0.2126 R + 0.7152 G + 0.0722 B. Green counts most because the eye is most sensitive to it. The ratio is (L1 + 0.05) / (L2 + 0.05) with L1 the lighter color. Identical colors give 1:1, black on white gives the maximum 21:1.

WCAG contrast requirements

Logos and purely decorative text are exempt. Disabled controls are also exempt, but low contrast there still hurts usability.

Examples

• Black on white: 21:1, passes everything.
• #767676 gray on white: 4.54:1, the lightest gray that passes AA for normal text on a white background.
• #777777 gray on white: 4.48:1, just misses AA for normal text but is fine for large text.
• White on #FF8800 orange: about 2.4:1, fails even for large text; use dark text on orange instead.

FAQ

What contrast ratio do I need for WCAG AA?

WCAG 2 level AA needs at least 4.5:1 for normal text and 3:1 for large text (18 pt or 14 pt bold and up) and for user interface components and graphics.

What contrast ratio do I need for WCAG AAA?

Level AAA needs at least 7:1 for normal text and 4.5:1 for large text.

How is the contrast ratio calculated?

Each color's relative luminance L is computed from its linearized sRGB values (L = 0.2126 R + 0.7152 G + 0.0722 B). The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. It ranges from 1:1 (identical colors) to 21:1 (black on white).

Is the checker the same as the one in browser dev tools?

Yes, it uses the same WCAG 2 formula, so the ratio should match tools that follow the WCAG 2 definition. Newer APCA-based tools use a different model and give different numbers.

See also: HEX to RGB converter · random color generator · px to rem converter · aspect ratio calculator