Is the Color Contrast Checker free?

Yes. Check as many color pairs as you like, free on TheToolss.

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.

What counts as large text?

Large text is about 18.66px and bold, or 24px and up. It has a lower contrast requirement.

Which color formats can I enter?

You can use the color swatches or type 3- or 6-digit hex codes such as #fff or #1a1a1a.

Yes. Contrast is calculated in your browser and nothing is uploaded.

Color Contrast Checker

Check text/background color contrast against WCAG AA and AAA.

100% free
Private in browser
No signup
No watermarks

Text color

Background color

Almost before we knew it,

we had left the ground. — large & normal text preview

WCAG contrast

Contrast ratio 17.40:1

AA — Normal textPass

AA — Large textPass

AAA — Normal textPass

AAA — Large textPass

AA needs 4.5:1 (normal) or 3:1 (large ≥ 18.66px bold / 24px). AAA needs 7:1 or 4.5:1.

Rate this tool

Be the first to rate — helps others and improves this page.

About Color Contrast Checker

Color Contrast Checker on TheToolss measures the contrast between a text color and a background color and tells you whether it meets the WCAG accessibility guidelines. It shows the exact contrast ratio and pass/fail badges for AA and AAA at both normal and large text sizes, with a live preview so you can see the combination in context. Pick colors with the swatches or paste hex codes. Everything is computed in your browser using the official WCAG luminance formula.

How to use Color Contrast Checker

Set the text color with the swatch or a hex code.
Set the background color the same way.
Read the contrast ratio and the AA / AAA pass/fail badges.
Adjust colors until you reach the level you need.

Key features

Exact WCAG contrast ratio
AA and AAA results for normal and large text
Live text-on-background preview
Color swatch pickers plus hex input
Private browser tool — no signup

Frequently asked questions

Is the Color Contrast Checker free?: Yes. Check as many color pairs as you like, free on TheToolss.
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.
What counts as large text?: Large text is about 18.66px and bold, or 24px and up. It has a lower contrast requirement.
Which color formats can I enter?: You can use the color swatches or type 3- or 6-digit hex codes such as #fff or #1a1a1a.
Is my data private?: Yes. Contrast is calculated in your browser and nothing is uploaded.

Related In-Depth Guides

Learn practical workflows, real-world examples, and expert tips in our comprehensive guides:

Design & Developer · 5 min read

Web Accessibility & Color Contrast (WCAG 2.1): How to Design AA & AAA Palettes

A practical guide to color contrast ratios, accessibility compliance, WCAG 2.1 AA/AAA standards, and building accessible UI palettes.