How to Check Color Contrast for Accessibility (WCAG)

Published 5 November 2026 by Kloora Tools

Quick answer: use the free Color Contrast Checker to check the contrast ratio of text and background colors against WCAG accessibility levels. It runs in your browser, so nothing you enter is uploaded or stored, and there is no signup.

What is the Color Contrast Checker?

Check the contrast ratio of text and background colors against WCAG accessibility levels. People often search for it as "color contrast checker", "wcag contrast checker" or "contrast ratio calculator". This free version works on any phone or computer and needs no download.

How to use the Color Contrast Checker

Open the Color Contrast Checker.
Enter your values in the fields.
The results update instantly as you type.
Note or copy the numbers you need.

How it works

Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker colors. WCAG AA needs 4.5:1 for normal text and 3:1 for large text, and AAA needs 7:1 and 4.5:1.

Worked example

Input: Text color: #222222; Background color: #ffffff
Result: Contrast ratio: 15.91:1; AA normal text: Pass; AA large text: Pass; AAA normal text: Pass; AAA large text: Pass

Common uses

Check that body text is readable on a background
Test button and link colors in a design
Meet accessibility rules for a website

Second worked example

Here is the same tool with larger numbers, so you can see how the result scales.

Input: Text color: #222222; Background color: #ffffff
Result: Contrast ratio: 15.91:1; AA normal text: Pass; AA large text: Pass; AAA normal text: Pass; AAA large text: Pass

Tips for the best result

Read the labels carefully and use the same unit for every value.
Try the default example first to see how the tool behaves.
Change one input at a time to see how it affects the result.
Write down or copy the result before you leave the page.

Common mistakes to avoid

Mixing units, such as metres in one field and feet in another.
Entering a value in the wrong field.
Treating a result as exact when the inputs were rough estimates.
Not allowing a safety margin for waste, error or change.

Color Contrast Checker compared with doing it by hand

	Color Contrast Checker	By hand or in a spreadsheet
Speed	Instant, results update as you type	Slow, you rebuild the steps each time
Accuracy	Same standard method every time	Easy to slip on a formula or a unit
Privacy	Runs in your browser, nothing uploaded	Depends on the software you use
Cost	Free, no signup	Free or paid software needed

Try it now

Open the Color Contrast Checker and try your own numbers or text. If it helps, share it with someone who needs it.

Try it now: Color Contrast Checker. Check the contrast ratio of text and background colors against WCAG accessibility levels.

Frequently asked questions

What contrast ratio is required?

WCAG AA needs at least 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?

Text of 24 px or more, or 18.66 px or more in bold.

What does the Color Contrast Checker do?

Check the contrast ratio of text and background colors against WCAG accessibility levels.

How do I use the Color Contrast Checker?

1. Enter your values in the fields. 2. The results update instantly as you type. 3. Note or copy the numbers you need.

Is my data safe when I use the Color Contrast Checker?

Yes. Everything runs in your browser on your own device. Nothing you type or choose is uploaded, stored or shared, and no AI service is used.

Does the Color Contrast Checker work on a phone?

Yes. It works on phones, tablets and computers in any modern browser, with nothing to install.

Do I need an account or a payment to use the Color Contrast Checker?

No. It is free, has no daily limit, no watermark and needs no signup.

What information does the Color Contrast Checker need?

You enter: Text color, Background color. The results update instantly as you change any value.

How does the Color Contrast Checker work?

Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker colors.

Can I use this for "wcag contrast checker"?

Yes. The Color Contrast Checker is built for exactly that, and it also answers searches such as "color contrast checker" and "contrast ratio calculator".

How accurate is the Color Contrast Checker?

It uses the standard method and shows results to a sensible precision. For legal, medical, financial or safety decisions, confirm important numbers with a qualified professional.

Where can I find more free tools like the Color Contrast Checker?

Kloora Tools has over 150 free tools for CVs, PDFs, images, Urdu, calculators and everyday tasks. Browse them all from the home page.