How to Use Contrast Checker

What is Contrast Checker?

Contrast Checker calculates the luminance contrast ratio between a foreground color (text) and a background color, then shows whether the combination passes or fails WCAG AA and AAA accessibility standards. Fix accessibility issues before they reach production.

Contrast failures are one of the most common WCAG violations — and one of the easiest to fix early in the design process. Checking takes seconds; retrofitting accessible colors into production is far more painful.

WCAG Contrast Levels Explained

WCAG AA — Normal Text

Requires 4.5:1 contrast ratio. The minimum for most legal compliance and accessibility audits.

WCAG AA — Large Text

Requires 3:1 for text 18px+ (regular) or 14px+ (bold). Easier to achieve on headlines.

WCAG AAA — Normal Text

Requires 7:1. Higher bar for critical reading — long-form text, captions, instructions.

WCAG AAA — Large Text

Requires 4.5:1 for large text. Matches the AA threshold for normal text.

Set foreground color

Enter the hex value for your text color, or use the color picker to sample it.

→

Set background color

Enter the hex value for the background behind the text.

→

Read the ratio

The contrast ratio appears instantly (e.g. 5.2:1). Green badges = pass, red = fail.

→

Adjust and recheck

Darken or lighten one color until you hit the minimum ratio for your use case.

Contrast Ratio Quick Reference

Ratio	Small Text	Large Text	Use
2:1	✗ Fail	✗ Fail	Decorative only
3:1	✗ Fail AA	✓ Pass AA	Large text / UI components
4.5:1	✓ Pass AA	✓ Pass AAA	Normal body text
7:1	✓ Pass AAA	✓ Pass AAA	Maximum accessibility

Tips & Common Mistakes

Don’t rely on your monitor alone. Calibrated design monitors often make low-contrast combinations look fine. Always run numbers through the checker before shipping.

Gray text on white is a common fail. Trendy light-gray body text (#999 on #FFF) only achieves ~2.85:1 — a hard AA fail for normal text. Use at least #767676 on white to hit 4.5:1.

Check all color combinations, not just body text. Placeholder text, icon-only buttons, focus rings, and disabled states all have contrast requirements.

Color Palette Generator — generate accessible color pairs
Color Converter — convert to HSL to adjust lightness for passing ratio
Color Picker — eyedrop colors from a design mockup to test

Frequently Asked Questions

What is WCAG?

WCAG stands for Web Content Accessibility Guidelines. It's an international standard (maintained by the W3C) that defines minimum accessibility requirements for web content, including contrast ratios.

What contrast ratio do I need to pass?

WCAG AA requires a 4.5:1 ratio for normal text and 3:1 for large text (18pt+ or 14pt bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.

What counts as 'large text' in WCAG?

Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.67px) or larger for bold text.

My design uses white on a light blue — will it pass?

Probably not. White (#FFFFFF) on light colors often fails AA for normal text. Use the checker to find the darkest version of your accent color that still looks on-brand while passing.

AI Text Summarizer

Go Premium