Color contrast checker

Check the WCAG contrast ratio of text and background colors.

  • Development
  • 100% free
  • No sign-up
  • Runs in your browser
Color contrast checker
Reset

What is the color contrast checker?

The color contrast checker calculates the contrast ratio between a text color and a background color with the WCAG 2 formula, and tells you whether the pair passes the AA and AAA levels for normal text, large text and user interface components.

Low contrast makes text hard to read for many people, especially on phones in sunlight and for people with low vision. Accessible contrast is also part of many legal accessibility requirements.

How to use the color contrast checker

  1. 1Pick or type the text color.
  2. 2Pick or type the background color.
  3. 3Read the ratio and the pass or fail results.

Features

WCAG 2 ratio

The official relative luminance formula.

AA and AAA

Normal text, large text and UI components.

Live preview

See the text on the background.

Any format

HEX, short HEX, RGB, HSL and color names.

Frequently asked questions

What contrast ratio do I need?

WCAG AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1.

What counts as large text?

At least 24 px (18 pt) regular, or 18.7 px (14 pt) bold.

Do logos need contrast?

No, logos and decorative images are exempt.

Why is 4.49:1 a fail?

WCAG thresholds are strict: the ratio must not be rounded up.