My Tool Studio
WCAG

Color Contrast Checker

Check text and background colors against WCAG 2.1 contrast requirements in real time. Get pass/fail for AA and AAA, large text and UI components, plus the nearest compliant shade of your own color. Extract palettes from images. Free, in-browser.

Always freeNo sign upRuns in your browser

Contrast ratio

4.54:1

AA · Normal text

needs 4.5:1

Pass

AA · Large text (18pt+)

needs 3:1

Pass

AA · UI components & graphics

needs 3:1

Pass

AAA · Normal text

needs 7:1

Fail

AAA · Large text

needs 4.5:1

Pass

Large heading text

Normal paragraph text. The quick brown fox jumps over the lazy dog, checking readability at typical body size.

Small print: terms, captions, helper text.

Suggested compliant alternatives (closest to your color)

#535353passes AAA at 7.69:1

Extract colors from an image

How to use

01

Pick your two colors

Enter text and background colors as hex, rgb(), or use the pickers. You can also upload a screenshot or brand image to extract its colors.

02

Read the live ratio

The contrast ratio updates instantly with pass/fail for WCAG AA and AAA, for normal text, large text, and UI components.

03

Apply the suggested fix

If a pair fails, we compute the nearest shade of your color that passes, copy the hex and you're done.

Why Color Contrast Checker

Common questions

What contrast ratio does WCAG require?
Level AA requires 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt bold) and for UI components like button borders and icons (per criterion 1.4.11). Level AAA raises text requirements to 7:1 and 4.5:1 respectively.
How is the contrast ratio calculated?
Using the WCAG relative-luminance formula: (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colors. Ratios range from 1:1 (identical) to 21:1 (black on white).
How does the suggested color work?
We progressively darken or lighten your own text color until it crosses the required threshold against your background, so the fix stays as close to your brand color as possible.
Is Color Contrast Checker free to use?
Yes. Color Contrast Checker is completely free. There is no sign up, no trial, and no usage cap.
Do I need an account to use Color Contrast Checker?
No. You can start using Color Contrast Checker straight away. We do not ask for an email address or a login.
Is my data uploaded to a server when I use Color Contrast Checker?
No. Color Contrast Checker runs entirely inside your browser, so the input you enter never leaves your device and nothing is sent to us.
Do you store the input I use with Color Contrast Checker?
No. Because everything happens locally in your browser, there is nothing for us to store. Close the tab and it is gone.
How do I use Color Contrast Checker?
Enter or paste your input and Color Contrast Checker updates the result as you go. When it looks right, copy or download it with one click.
Does Color Contrast Checker work on phones and tablets?
Yes. Color Contrast Checker is responsive and works in any modern browser on mobile, tablet, and desktop.
Which browsers does Color Contrast Checker support?
It works in current versions of Chrome, Firefox, Safari, and Edge. For the best experience, keep your browser up to date.
Is there a limit on how often I can use Color Contrast Checker?
No. You can use Color Contrast Checker as many times as you need, at no cost.
Can I use Color Contrast Checker for commercial or client work?
Yes. You are free to use the output in personal, educational, and commercial projects.
Why is Color Contrast Checker free?
The site is supported by advertising, which lets us keep every tool free and open to everyone.
What should I do if Color Contrast Checker gives an unexpected result?
First check that your input is formatted as expected. If something still looks wrong, use the feedback link on the page and we will take a look.

More WCAG tools

View all