🎨 Color Contrast Checker

About this Color Contrast Checker

If text is too close in brightness to its background, many readers — especially people with low vision or ageing eyes — simply cannot read it. The WCAG accessibility guidelines set minimum contrast ratios for exactly this reason. This checker computes the ratio between any two colors using the official relative-luminance formula and grades it against the AA and AAA thresholds for normal and large text.

How to use it

1. Pick the text color with the first color well.
2. Pick the background color with the second.
3. Read the contrast ratio and the four pass/fail grades.
4. Adjust either color until your target level passes — AA is the common legal standard.

Example

Black text (#000000) on white (#ffffff) scores the maximum 21:1 and passes everything, while light grey #999999 on white scores about 2.8:1 and fails all levels.

Frequently asked questions

What counts as large text?

In WCAG terms, at least 18pt (24px), or 14pt (about 19px) if bold. Large text is allowed a lower contrast ratio.

Which level should my website meet?

AA is the level most laws and guidelines require. AAA is stricter and a good goal for body text, but is not always achievable with brand colors.

More Developer Tools