Color Contrast Checker

Check any text-and-background pair against WCAG AA and AAA, preview it through color-blind vision, and get an accessible foreground suggestion — instantly and privately.

Vision simulation

Accessibility preview

The quick brown fox jumps over the lazy dog. This helps you judge body text readability.

Contrast ratio

17.74:1

Grade: AAA

Normal text — AA (4.5:1)Pass
Large text — AA (3:1)Pass
Normal text — AAA (7:1)Pass
Large text — AAA (4.5:1)Pass

Large text is ~18.66px bold or ~24px regular and above. Ratios follow WCAG 2.1.

How it works

  1. 1

    Pick two colors

    Set a foreground (text) color and a background color.

  2. 2

    Read the result

    See the contrast ratio and whether it passes WCAG AA and AAA for normal and large text.

  3. 3

    Fix it

    Use “Suggest better foreground”, or preview the pair through color-blindness simulations.

Instant & 100% private — nothing is uploaded

Every color is generated and converted right on your own device. Nothing is sent to a server, so there are no waits, no limits, and no copies kept anywhere.

Frequently asked questions

What contrast ratio do I need?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 for normal and 4.5:1 for large text. Large text is roughly 18.66px bold or 24px regular and up.
What does the color-blindness preview show?
It simulates how your color pair looks to people with protanopia, deuteranopia, tritanopia, or full color blindness, so you can spot pairs that collapse into one tone.
How does “Suggest better foreground” work?
It finds a text color that clears WCAG AA against your background while staying as close as possible to your intent.
Is my color data sent anywhere?
No. The check runs entirely in your browser. Nothing is uploaded and no colors are stored.