Skip to content
👁️

Color Contrast Checker

Check WCAG contrast ratios between two colors.

The quick brown fox

jumps over the lazy dog. Contrast keeps text readable for everyone.

-:1 -

WCAG Results

More in Design Tools

View all →
Color Blindness Simulator Preview colour vision deficiency Pixel Art Maker Pixelate an image to a fixed palette Meme Generator Add Impact-style captions to a photo Avatar Generator Deterministic avatars from a seed Icon Generator Build an SVG icon from shapes Type Scale Generator Build a modular type scale

What Is Color Contrast Checker?

The Color Contrast Checker calculates the WCAG contrast ratio between two colours and shows whether they pass AA or AAA for normal and large text. A live preview shows the pair as real text on a real background.

Who Uses the Color Contrast Checker?

Front-end developers, designers, and content teams use it to confirm text is readable before shipping, and to pick an accessible foreground colour for an existing background.

How to Use the Color Contrast Checker

  1. Choose a foreground and a background colour.
  2. Read the contrast ratio and the AA or AAA grade.
  3. Check the large-text results before settling on a colour pair.

Why Choose Our Color Contrast Checker?

  • Exact ratio to two decimal places
  • AA and AAA results for normal and large text
  • Live preview so you can judge it, not just read it

Try the Color Contrast Checker above — it is free, fast, and works on any device. Bookmark this page to return whenever you need it.