Digital Drive HQ
Design & Color Tools

Color Contrast Checker

Check WCAG color contrast for accessibility.

FreeNo sign-upWorks in your browser
Almost before we knew it,
we had left the ground. Sample preview text.
Contrast ratio
17.06:1
WCAG AA — normal text (4.5:1)Pass
WCAG AA — large text (3:1)Pass
WCAG AAA — normal text (7:1)Pass
WCAG AAA — large text (4.5:1)Pass

About the Color Contrast Checker

Check color contrast free against WCAG accessibility standards. Pick your text and background colors and instantly see the contrast ratio with clear pass/fail indicators for AA (4.5:1 normal text, 3:1 large) and AAA (7:1 and 4.5:1). Low-contrast text is one of the most common accessibility failures on the web — and increasingly a legal requirement — so check before you ship.

How to use the Color Contrast Checker

  1. 1Pick a text color and a background color.
  2. 2Read the contrast ratio.
  3. 3Check the WCAG AA / AAA pass indicators.

Frequently asked questions

What contrast ratio do I need?

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

Why does contrast matter?

Sufficient contrast keeps text readable for everyone, including users with low vision — and it's a common accessibility requirement.

What counts as large text for WCAG?

18pt (24px) regular or 14pt (18.7px) bold and up — large text only needs a 3:1 ratio for AA instead of 4.5:1.

Related tools