Skip to content
ToolFarmToolFarm
Design

Color Contrast Checker (WCAG)

Check WCAG color contrast between text and background, with live previews, pass or fail grades and accessible color suggestions. In your browser.

3 min read
Contrast ratio9.99:1
Excellent contrast

WCAG results

  • AA Large textPass
  • AAA Large textPass
  • AA Normal textPass
  • AAA Normal textPass
  • UI componentsPass

AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1.

Live preview

Layout
Preview style
AcmeRead the guidelines
Accessible

Design that everyone can read

Good contrast keeps your content legible for people with low vision, in bright sunlight or on cheap screens.

Get startedLearn more

No sign up. Runs in your browser.

Color blindness

Preview how your colors look to people with color blindness. Pick a type to redraw the preview through that color vision deficiency and catch pairs that rely on hue alone.

Accessible examples

Examples that fail

Export

:root {
  --tf-contrast-fg: #4c1d95;
  --tf-contrast-bg: #f5f3ff;
  --tf-contrast-ratio: 9.99:1;
}

What this tool does

Color contrast checker that grades any text and background pair against the WCAG accessibility guidelines. Pick two colors and you instantly see the contrast ratio, whether it passes AA and AAA for large and normal text, and how it looks on real text and buttons. A built-in color blindness simulation also redraws the preview through protanopia, deuteranopia, tritanopia and achromatopsia, so you can see how your palette reads for people with color vision deficiency. The simulation only changes the preview: the contrast ratio is always measured on your original colors. Everything runs in your browser.

Need to wrangle the colors first? Convert any value with color converter or build a set with palette generator.

What you can use it for

  • Check that body text is readable on its background before shipping a design.
  • Find an accessible foreground when a brand color fails AA on white.
  • Compare button text and fill to meet the non-text contrast rule.
  • Preview a pair through the color blindness simulation to make sure it does not rely on hue alone.
  • Share a color pair with a teammate through the URL and keep a local history of what you checked.

How to use it

  1. Enter a foreground and a background color in HEX, RGB, HSL or by name.
  2. Read the contrast ratio and the pass or fail grade for each WCAG level.
  3. Turn on the color blindness simulation to preview the pair the way protanopia, deuteranopia, tritanopia or achromatopsia sees it. The ratio stays measured on your original colors.
  4. Use a suggestion to nudge the color until it passes, or reverse the pair.
  5. Copy the values, the CSS variables or the full report with one click.

Everything runs inside your browser. No file is uploaded to any server. See more tools in this field.

Other tools people reach for in the same flow.

Design
Popular
Design

Color Converter: HEX, RGB, HSL

Convert colors between HEX, RGB and HSL online. Paste any format and get the others instantly. Free, no upload and in your browser.

Design

Color Palette Generator

Generate harmonious color palettes from any base color: analogous, complementary and more. Free and in your browser, ready to copy.

Design

CSS Gradient Generator

Build CSS gradients online with a live preview: linear, radial and conic. Copy the code for your background, free and in your browser.

Design

CSS Box Shadow Generator

Build a CSS box-shadow with a live preview: set the offset, blur, spread, color and opacity, then copy the code. Free and in your browser.

Frequently asked questions

What contrast ratio do I need?

WCAG asks for at least 4.5:1 for normal text and 3:1 for large text (18pt or 24px, or 14pt bold) to meet AA. AAA raises that to 7:1 and 4.5:1. Icons, form borders and other non-text elements need 3:1.

How is the contrast ratio calculated?

It comes from the relative luminance of each color, following the WCAG 2.1 formula. The lighter color goes on top, so the result ranges from 1:1 for two identical colors to 21:1 for black on white. Reversing the two colors never changes the ratio.

How do the accessible suggestions work?

When a pair falls short, the tool keeps the hue and saturation of your color and only shifts its lightness until it reaches the target, picking the closest match. If the foreground cannot get there on its own, it suggests adjusting the background instead.

Can I preview my colors for color blindness?

Yes. The color blindness simulation redraws the live preview the way the most common color vision deficiencies see it: protanopia and deuteranopia (red-green), tritanopia (blue-yellow) and full achromatopsia (no color). It is a visual check only, so you can spot pairs that only work because of their hue. The contrast ratio and the WCAG grades are always calculated on your original colors, never on the simulated ones.

Is my data sent anywhere?

No. Every calculation happens in your browser. The colors you check, the history and the shareable link all stay on your device.