Colour Contrast Checker

Text colour

Background colour

Result

How it looks
The quick brown fox
Contrast ratio4.54
Body text, AAпроходит
Body text, AAAне проходит
Large text, AAпроходит
Large text, AAAпроходит
Text luminance0.1812
Background luminance1

4.5 to 1 is the minimum for body text

The contrast ratio between text and background and whether it meets accessibility levels AA and AAA.

Contrast is not measured as a difference between colours but through relative luminance, weighted because the eye responds most to green and least to blue. That is where the odd-looking coefficients in the WCAG formula come from.

The thresholds are simple: body text needs 4.5 to 1 for level AA and 7 to 1 for AAA. Large text — from 18 point, or 14 point bold — needs 3 to 1 and 4.5 to 1 respectively.

What this calculator shows

The contrast ratio in the familiar "x to 1" form
AA and AAA results separately for body and large text
The relative luminance of each colour

What to keep in mind

The WCAG 2.1 formula is used: luminance with the sRGB gamma removed, then a ratio with 0.05 added to both values.
Transparency is not modelled — enter the effective colour after compositing.

FAQs

What contrast does the law require?

Public-sector sites in the EU and the US are held to WCAG level AA, which means 4.5 to 1 for body text. Many private-sector accessibility policies adopt the same bar.

What counts as large text?

From 18 point regular or 14 point bold — roughly 24 and 18.66 pixels. Large text only needs 3 to 1.

Do icons and borders need contrast too?

Yes, WCAG 2.1 requires 3 to 1 for graphical objects and user interface components — input borders, icons, focus indicators.

Why is grey text so popular and so bad?

Designers find it tidier, but #999999 on white gives only 2.8 to 1, a failure at every level. On a phone screen in sunlight it becomes genuinely hard to read.

Worked example

Grey text on white

Input: #767676 on #ffffff

Output: Contrast 4.54 to 1 — AA passes

Note: This is the exact boundary below which grey on white stops passing AA. One step lighter, at #777777, and it fails.

Useful links

All tools in Dev Tools

Colour Contrast Checker

Result

Related tools

Color Converter (HEX, RGB, HSL)

CSS Gradient Generator

Readability Score Calculator

Useful links