Skip to content
ToolQivo

Color Contrast Checker

Check any text and background pair against WCAG AA and AAA.

Color Tools Reviews Free · no sign-up

The two colours

CSS 
The declaration appears here

Quick Tool Overview

The Color Contrast Checker scores a text and background pair against every WCAG 2.2 rule at once, previews the pair as real text at several sizes, and — when it fails — works out the nearest passing colour that keeps your hue.

What it does
Scores a colour pair against WCAG AA and AAA
You give it
A text colour and a background colour
You get back
The ratio, every pass or fail, and a suggested fix
Best for
Accessibility audits and choosing readable text colours
Color Tools Free, unlimited use No sign-up Runs in your browser

About the Color Contrast Checker

Enter a text colour and a background colour and get the contrast ratio between them, scored against every WCAG 2.2 rule at once: 4.5:1 for body text, 3:1 for large text and for user interface components, and the stricter 7:1 and 4.5:1 that AAA asks for.

The ratio alone is easy to misread, so the page shows the pair as real text at 14px, 18px and 24px, plus a bold sample and a button, because a number that passes on paper can still be hard to read — and a number that fails at body size may be perfectly fine for a headline.

When a pair falls short the tool does not stop at telling you so. It works out the nearest passing version of your text colour by adjusting its lightness alone, so the fix keeps the hue you chose rather than replacing it with a generic dark grey.

Key features of the Color Contrast Checker

Every rule at once

AA and AAA for normal text, large text and non-text elements, all scored from the one ratio rather than one rule at a time.

Real text previews

The pair drawn at 14px, 18px and 24px, plus bold and a button, because a passing number can still read badly.

A fix, not just a verdict

The nearest passing colour is found by moving lightness in OKLCH, so your hue survives instead of being replaced by grey.

Any notation

HEX, RGB, HSL, OKLCH or a CSS colour name — typed, pasted or picked.

Nothing leaves the page

The whole calculation runs in your browser, so unreleased brand colours stay on your machine.

How to use the Color Contrast Checker

  1. 1

    Set the two colours

    Type or pick the text colour and the background colour. Any notation works — HEX, RGB, HSL or a CSS colour name.

  2. 2

    Read the verdict

    The ratio is scored against AA and AAA for normal text, large text and UI components.

  3. 3

    Check the previews

    Real text at several sizes and weights tells you more than the number on its own.

  4. 4

    Take the suggested fix

    If the pair fails, click the nearest passing colour to adopt it and re-check.

Frequently asked questions

WCAG 2.2 AA asks for 4.5:1 for normal text, 3:1 for large text (18pt, or 14pt bold, which is roughly 24px and 18.66px bold), and 3:1 for icons, borders and other non-text elements you have to see to use. AAA raises the text figures to 7:1 and 4.5:1.

Reviews of the Color Contrast Checker

What people who use the Color Contrast Checker think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Color Contrast Checker. It takes half a minute and no account.

Write the first review

More color tools