Skip to content
justyourpalette

Color Contrast Checker

Test text and background colors against WCAG in seconds.

  • 100% Free
  • No Sign Up
  • Works in Your Browser

Contrast checker

Check text and background contrast against WCAG

More Color Tools

View all tools

Every everyday color tool, right in your browser.

No software. No uploads. No signup.

Browse all 28 tools
Color tools
28
Named colors
139
Curated palettes
216

How to use the contrast checker

Three steps, all in your browser.

  1. 1

    Enter your colors

    Type or pick the colors you want to test.

  2. 2

    Read the results

    Ratios, pass or fail badges and previews update as you change a color.

  3. 3

    Fix and copy

    Adjust until it passes, then copy the codes that work.

Color Contrast Checker: what to know

The contrast checker measures how readable text is on a background. Enter a text color and a background color to get the WCAG 2 contrast ratio and a pass or fail for each level: AA needs 4.5:1 for normal text and 3:1 for large text, AAA needs 7:1 and 4.5:1, and user interface components such as icons and input borders need 3:1.

Large text in WCAG means at least 18 point (about 24px) regular, or 14 point (about 18.66px) bold. The ratio comes from each color's relative luminance: (L1 + 0.05) / (L2 + 0.05), from 1:1 for identical colors up to 21:1 for black on white.

The checker also shows an APCA score, the contrast method being developed for future WCAG versions. APCA accounts for whether text is dark on light or light on dark and for font size, and its guidance suggests about Lc 75 or more for body text. It isn't a legal or audit requirement yet, so treat WCAG 2 as the standard to meet and APCA as a second opinion.

Popular uses

  • Checking button, link and body text colors before launch
  • Accessibility audits against WCAG 2.1 and 2.2 AA
  • Picking readable text colors for brand backgrounds
  • Testing light and dark themes side by side

Tips for the best result

  • Passing contrast isn't the whole story: thin fonts and small sizes need more than the minimum.
  • If a brand color fails with white text, try a darker shade of it for buttons and keep the original for decoration.
  • Don't rely on color alone to convey meaning; add an icon, label or underline as well.

Read how JustYourPalette works, browse named colors and curated palettes, and see our privacy details. Colors you enter and images you open are processed in your browser and are never sent to our server.

Frequently asked questions