Skip to content

Contrast Checker

Check any text and background pair against WCAG ratios and APCA scores, with pass/fail levels and a live preview.

Updated

What is the Contrast Checker?

Contrast Checker helps you quickly test whether two colors are readable together and accessible for real UI use.

Use it to check text, icons, buttons, and interface elements against WCAG contrast guidelines. It shows the contrast ratio, accessibility pass/fail status, and a live preview so you can see the result immediately.

This tool is especially useful when:

  • Choosing text colors for cards, buttons, labels, and dashboards.
  • Reviewing design system tokens before shipping.
  • Comparing an existing brand color against a background color.
  • Checking whether a combination works for normal text, large text, or UI controls.

It supports modern accessibility workflows by combining WCAG-style contrast checks with APCA-oriented guidance, so you get both familiar compliance checks and a more perceptual contrast view.

How it works

Contrast is measured by comparing the foreground color against the background color.

  1. Enter a foreground color.
  2. Enter a background color.
  3. The tool calculates the contrast result instantly.
  4. Review the WCAG ratio, APCA score, and pass/fail indicators.
  5. Use the live preview to judge readability in context.

The tool is designed for quick decisions during design and frontend development. WCAG contrast ratios are commonly used to verify readability, while APCA provides a newer perceptual contrast signal that can help with more nuanced visual decisions.

Typical accessibility thresholds include:

  • WCAG AA: 4.5:1 for normal text.
  • WCAG AA: 3:1 for large text.
  • WCAG AAA: 7:1 for normal text.
  • WCAG AAA: 4.5:1 for large text.

If the colors fail, adjust either the foreground or background until the preview and scores reach a readable level.

Examples

Check text contrast

Test whether your foreground and background colors meet accessibility thresholds.

Foreground: #111827, Background: #ffffff
 
Shows WCAG ratio, APCA score, pass/fail status, and a live preview.

Find a safer text color

Compare color pairs and identify a more readable combination quickly.

Foreground: #9ca3af, Background: #ffffff
 
Flags low contrast and suggests a safer default text color.

Frequently asked questions

What does a good contrast checker show?

It should show the WCAG ratio, a pass/fail result for your target level, and a live preview of the color pair — so you can spot a problem and fix it in one place. This tool also shows an APCA score for a second, perception-based reading.

How do I use this contrast checker?

Enter the foreground color and background color, then review the contrast ratio and accessibility results. If the score is too low, adjust one of the colors until the combination becomes readable and passes the target guideline.

What contrast ratio should I aim for?

For normal text, aim for at least 4.5:1. For large text, 3:1 is usually the minimum WCAG AA target. If you want a stricter standard, use AAA thresholds.

Does this tool check APCA too?

Yes, the tool can also show an APCA-style contrast value. That helps when you want a more perceptual reading beyond the traditional WCAG ratio.

Can I use this for buttons and UI elements?

Yes. It is useful for button labels, icons, form labels, badges, and other interface elements that need enough contrast to stay readable.

Why does a color pair sometimes fail even if it looks okay?

Human perception can be misleading, especially with low-saturation colors or subtle tone differences. Contrast checks help catch combinations that look acceptable at a glance but are still hard to read in practice.

What is the difference between WCAG and APCA?

WCAG uses a ratio-based contrast model that is widely recognized for accessibility compliance. APCA is a newer perceptual model designed to better reflect how people actually read text on screens.

Should I test text color or background color first?

Start with the color that is harder to change in your design system, then adjust the other one around it. In practice, teams often keep the brand background and refine the text color for readability.

Related tools

More utilities you might find handy.

Color

CMYK to RGB

Convert CMYK print colors to RGB values instantly with live preview, hex output, and copy-ready results.
Color

Color Blindness Simulator

Preview how images and designs appear to people with protanopia, deuteranopia, tritanopia, and other color vision deficiencies.
Color

Color Mixer

Blend two colors together at custom percentages with multiple blend modes, full color space support, and accessibility analysis