Color Contrast Checker

WCAG contrast, checked instantly.

Check the contrast ratio between two colors against WCAG AA and AAA accessibility guidelines.

How it works

The ratio is calculated from the relative luminance of the two colors, as defined in WCAG 2. It's compared to the thresholds: 4.5:1 (AA) and 7:1 (AAA) for normal text, and 3:1 (AA) and 4.5:1 (AAA) for large text.

When it helps

Good contrast makes text readable for everyone, including people with low vision, and is required by many accessibility standards.

How the contrast ratio is calculated

Each color is first converted to its relative luminance, following the WCAG 2 definition: the red, green and blue channels are linearised and weighted (0.2126 × R + 0.7152 × G + 0.0722 × B), because our eyes are most sensitive to green and least to blue. The ratio is then (lighter + 0.05) ÷ (darker + 0.05). It ranges from 1:1 for identical colors to 21:1 for black on white.

The WCAG thresholds

Level AA asks for at least 4.5:1 for normal text and 3:1 for large text (about 24 px, or about 19 px bold). Level AAA raises this to 7:1 and 4.5:1. AA is the target most accessibility laws and guidelines point to.

A classic example: mid-grey #777777 on white comes out at 4.48:1 — just short of AA — while the very slightly darker #767676 reaches 4.54:1 and passes. For AAA on white, you need to go to around #595959, which hits 7:1.

Beyond the ratio

Contrast is one part of readable design. Thin or very small fonts need more contrast than the minimum suggests, and text over images or gradients should be checked against the lightest area behind it. Don't rely on color alone to carry meaning, either — add an icon, label or underline so the message comes through for people with color vision deficiency.

Frequently asked questions

What counts as large text?

About 24px regular, or 18.5px bold, and above.

Is passing AA enough?

AA is the level most laws and guidelines require. AAA is better where possible.

Does contrast matter for icons and buttons?

Yes. WCAG 2.1 asks for at least 3:1 contrast for meaningful graphics and the edges of interactive controls, such as input borders and icon-only buttons.

Tools In Orbit · About · Contact · Privacy · Terms