What contrast ratio does WCAG require?

Level AA needs at least 4.5:1 for normal text and 3:1 for large text. Level AAA needs 7:1 for normal text and 4.5:1 for large text. Ratios run from 1:1, no contrast, to 21:1, black on white.

What counts as large text?

WCAG defines large text as at least 18 point (24px) at regular weight, or at least 14 point (about 18.7px) in bold. Anything smaller is normal text and needs the higher ratio.

How is the contrast ratio calculated?

Each color is converted to relative luminance from its linearized sRGB channels. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color and L2 that of the darker one.

Which color formats can I enter?

Hex colors only: six digits such as #111827, or three-digit shorthand such as #abc, with or without the #. Use the color pickers to choose a color visually.

Does it matter which color is the text?

Not for the ratio. It compares the lighter color with the darker one, so swapping text and background gives the same result. The preview shows the pair the way you entered it.

Color Contrast Checker

Guide

Colors

Text color

Background color

WCAG results

Readable contrast sample

Body text preview for contrast testing.

Contrast ratio

17.74:1

Normal text, AA (4.5:1)

Pass

Normal text, AAA (7:1)

Pass

Large text, AA (3:1)

Pass

Large text, AAA (4.5:1)

Pass

About the Color Contrast Checker

Check whether text stays readable on its background. Enter two hex colors and the tool calculates the WCAG 2 contrast ratio and shows whether the pair passes AA and AAA for normal and large text, next to a live preview. It is made for designers and developers building accessible color palettes.

How to use it

1 Pick or type the Text color as a hex value, such as #111827.
2 Pick or type the Background color.
3 Check the preview to see the two colors together.
4 Read the contrast ratio and the AA and AAA results for normal and large text.

Read the full Color Contrast Checker guide

Colors

WCAG results

About the Color Contrast Checker

How to use it

Frequently asked questions