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.

2 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
Vision
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.

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. 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.
  • 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. Use a suggestion to nudge the color until it passes, or reverse the pair.
  4. 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.

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.

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.

Color Contrast Checker (WCAG) · ToolFarm