Tools · Color · Contrast checker
Contrast checker
Check whether two colors meet WCAG contrast requirements for text and UI.
Add a file and run the tool.
Your file is ready.
Try a different file, or try again.
Settings
Adjust the settings below. The result updates as you go.
Runs fully in your browser. Nothing is uploaded.
Runs fully in your browser. Nothing is uploaded.
How it works
Pick or enter a text color and a background color.
Read the contrast ratio and see whether it passes AA and AAA.
Adjust either color until it passes the level you need.
Frequently asked questions
4.5:1 for normal text, and 3:1 for large text (18pt, or 14pt bold) and for UI components and meaningful graphics.
7:1 for normal text and 4.5:1 for large text - a stricter level, not required for most sites but worth reaching where it's easy to.
18pt (24px) regular, or 14pt (19px) bold, per WCAG's own definition.
Yes, it also checks the 3:1 threshold for UI components (like button borders and form inputs) and meaningful graphics, per WCAG 2.1's non-text contrast rule.
No. The ratio is calculated entirely in your browser.
Guides
A closer look at specific problems this tool solves.
Why 'It Looks Fine to Me' Isn't Good Enough for Text Color
Contrast is a measurable ratio, not a matter of taste - and a designer judging a color pair on their own calibrated screen is testing one combination out of many their visitors actually have.
Read the guideHow to Check Your Text Passes WCAG Contrast (AA and AAA)
Pick a text color and a background color and four pass/fail badges update immediately - no button to press. Here is what each one means and how to read them.
Read the guideDark Mode Text Contrast: Why Light Gray Often Fails WCAG
Softening white text toward gray feels right on a dark background, and it is exactly where contrast ratios erode fastest. Here is where the real numbers land.
Read the guide
Comments