Free accessibility tool

Color Contrast Checker

Check whether text, icons, and controls are easy to see. Enter two colors to get a live WCAG AA and AAA contrast result.

No colors leave your browser.

Free
No sign-up
WCAG 2.x math

Choose colors

Foreground and background

Use the color pickers or type a 3- or 6-digit HEX value. Results update as soon as both colors are valid.

Foreground color

Used for text, icons, and control outlines.

Color picker

HEX value

For example, #17211B.

Background color

Used for the surface behind the foreground.

Color picker

HEX value

For example, #FAF5EB.

Try an example

Live result

Contrast ratio

15.22:1 Possible range: 1:1 to 21:1

Excellent contrast. This pair passes every result below.

Normal textAA · needs 4.5:1
Pass
Normal textAAA · needs 7:1
Pass
Large textAA · needs 3:1
Pass
Large textAAA · needs 4.5:1
Pass
Non-text UIAA · needs 3:1
Pass

See the pair in context

Live preview

#17211B on #FAF5EB

Sample interface

Readable design welcomes everyone.

This is large text at 24 pixels.

This normal-size paragraph shows how body text looks with your foreground and background colors. Check the measured results above before using the pair.

This underlined link uses the foreground color

Outlined control Filled control

How to read the result

What the WCAG contrast levels mean

The checker uses the WCAG 2.x sRGB relative luminance formula. Thresholds are tested against the full calculation and are never rounded up to create a pass.

Normal text

AA needs 4.5:1. AAA needs 7:1. Most paragraphs, labels, links, and button text count as normal text.

Large text

AA needs 3:1. AAA needs 4.5:1. Large text means at least 24 CSS pixels, or about 18.7 pixels when bold.

Icons and controls

Important interface graphics and control boundaries generally need 3:1 against adjacent colors. Decorative details are different.