Free Color Contrast Checker

Contrast is always two colors. A yellow isn't "inaccessible." Yellow on peach is.

Paste a text color and a background color. You'll get the contrast ratio and a clear pass/fail against the number designers actually use for body text: 4.5.

  • 4.5:1 = WCAG AA for normal text (the one to remember)
  • 3:1 = large text / many UI bits
  • 7:1 = AAA for your main reading pair

You do not need every brand pair to pass. You need the pairs you put type on.

Color Contrast Checker

Color Contrast Checker

Add your brand colors & use this free checker to see if your colors are high-contrast

You can add color codes in HEX, RGB, or CMYK formats or use the eyedropper tool to add them.

Choose your colors above, or press this magical button to generate random color pairs with high contrast scores! →

Contrast Ratio:

5.40

Contrast Ratio:

5.40

Collapsible content

How to use

  1. Add two colors (HEX, RGB, or CMYK — or use the eyedropper).
  2. Click to view contrast levels.
  3. If you're at 4.5 or higher for body text, you're good for that pair.
  4. If you're under 4.5, darken the text, lighten the background, or pick a different pair. Don't throw out the whole palette.

Works best in Chrome (works elsewhere; Chrome is where I test).

When a pair fails

Most brand palettes fail because everything is stuck in the midtones. Cute as swatches. Unreadable as website text.

Quick fixes without starting over:

  • Use a darker ink on the same light ground
  • Use a lighter ground under the same ink
  • Add a tinted light neutral and a tinted dark neutral (oat-milk / chocolate versions of a color you already love, not random grey)

Need the full repair (harmony, neutrals, roles), not just one pair? Color Palette Fixer. Prefer the written method: How to Fix a Color Palette.

What this free tool is (and isn't)

  • Is: a fast pair test for text + background
  • Isn't: a full palette fixer, and isn't a generator like Coolors

Building a brand palette from scratch? Color Palette Builder.

What contrast ratio do I need?

WCAG AA for normal body text is 4.5:1. Large text is 3:1. AAA body text is 7:1.

Does every color in my palette need to pass?

No. Only the pairs you put type (or critical UI) on. Accents can fail as body text. Just don't use them as body text.

HEX, RGB, or CMYK?

All three work in this checker. For web, HEX is usually enough.

Is there a free Color Palette Fixer?

No. Fixer is $67 one time. This free checker tells you if one pair hits 4.5. It doesn't diagnose or repair the whole palette.

Ready to fix your palette?

Ready to fix your palette?

Ready to fix your palette?

Ready to fix your palette?

Ready to fix your palette?

Ready to fix your palette?

Ready to fix your palette?

Ready to fix your palette?

Ready to fix your palette?

Ready to fix your palette?