AI & Computing

Color Contrast Checker (WCAG AA and AAA)

Enter the text colour and the background colour as HEX codes.

By TheCalcTools Updated Formula checked and tested

Your numbers

Your results

Contrast ratio
Contrast ratio
—
AA, normal text (4.5:1)
—
AA, large text (3:1)
—
AAA, normal text (7:1)
—
AAA, large text (4.5:1)
—

Color Contrast Checker (WCAG AA and AAA) by TheCalcTools

How the Color Contrast Checker (WCAG AA and AAA) works

WCAG compares the relative luminance of two colours: (lighter + 0.05) ÷ (darker + 0.05), from 1:1 (same colour) to 21:1 (black on white). Luminance weights the linearised red, green and blue channels by 0.2126, 0.7152 and 0.0722.

Level AA needs 4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold). Level AAA needs 7:1 and 4.5:1.

The formula

Ratio = (L₁ + 0.05) ÷ (L₂ + 0.05)

Worked example

Using the default values shown in the calculator:

Text colour (HEX)#5B6B7F
Background colour (HEX)#FFFFFF
  1. #5B6B7F on white: 5.45:1. AA normal text: Pass; AAA normal text: Fail.

Result:

Contrast ratio5.45:1
AA, normal text (4.5:1)Pass
AA, large text (3:1)Pass
AAA, normal text (7:1)Fail
AAA, large text (4.5:1)Pass

Frequently asked questions

Does contrast apply to icons and buttons?

Yes: WCAG 1.4.11 asks for at least 3:1 for user-interface components and meaningful graphics.

Sources and further reading

HEX to RGB Converter (and RGB to HEX, HSL)Choose the direction and enter a colour Screen Size and PPI CalculatorTurn a diagonal measurement into actual width and height PPI Calculator (Pixel Density of a Screen)Enter resolution and diagonal size to get pixels per inch Reading Time CalculatorHow many hours is that book, and when will you finish?

More in AI & Computing · All calculators

This calculator gives estimates for information only. Check important results independently before you rely on them. See our disclaimer.