Color Contrast Checker — Free Tool

What Is a Color Contrast Checker?

A color contrast checker measures the contrast ratio between two colors to determine if text will be readable against its background. This is essential for meeting WCAG (Web Content Accessibility Guidelines) — the international standard for web accessibility. Poor contrast makes content unreadable for millions of users with low vision or color deficiencies.

This tool calculates the contrast ratio in real time, tells you whether your color combination passes WCAG AA and AAA standards for both normal and large text, and lets you fine-tune colors until they meet accessibility requirements.

WCAG Contrast Requirements

Level	Normal Text	Large Text
AA (minimum)	4.5 : 1	3 : 1
AAA (enhanced)	7 : 1	4.5 : 1

Tips for Accessible Color Choices

→ Don't rely on color alone. Always pair color with text labels, icons, or patterns so color-blind users can distinguish elements.
→ Test both themes. If your site has light and dark modes, check contrast in both. Colors that pass on white may fail on dark backgrounds.
→ Use our Color Blindness Simulator to see how your palette looks to users with different types of color vision deficiency.

How to Use This Contrast Checker

Enter your foreground color — Paste the hex code or pick the text color you're using.
Enter your background color — Paste the hex code or pick the background color behind the text.
Read the contrast ratio — The tool calculates the WCAG contrast ratio and shows whether your combination passes AA and AAA standards for both normal and large text.
Adjust until you pass — If your colors fail, adjust the lightness of either color until the ratio meets your target level.

Tips and Best Practices

→ Aim for 4.5:1 minimum. WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). AAA requires 7:1 and 4.5:1 respectively.
→ Test all color combinations. Don't just test primary text on the main background. Check link colors, placeholder text, disabled states, error messages, and text over images or gradients.
→ Increase contrast, not just color difference. Two bright colors can have high color difference but low luminance contrast. The contrast ratio measures luminance, which is what actually affects readability.
→ Use our Color Blindness Simulator too. Good contrast doesn't guarantee good color distinction. Users with color vision deficiency need both sufficient contrast AND non-color visual cues. Try our Color Blindness Simulator.

Frequently Asked Questions

What is WCAG color contrast?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors. Level AA requires 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text.

What is a good contrast ratio?

A contrast ratio of 4.5:1 or higher meets WCAG AA standards for normal text. For large text (18px+ bold or 24px+ regular), 3:1 is sufficient. Aim for 7:1 or higher for maximum accessibility.

How is contrast ratio calculated?

Contrast ratio uses the relative luminance of two colors with the formula (L1 + 0.05) / (L2 + 0.05). The result ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white).

📖 Learn More

What is a good contrast ratio for text?+

WCAG 2.1 Level AA requires 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. For the best readability, aim for at least 7:1. Pure black on white is 21:1 — the maximum possible contrast.

What is the WCAG contrast standard?+

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors. These standards ensure text is readable by people with low vision, color blindness, or those viewing screens in challenging lighting conditions. WCAG compliance is legally required in many jurisdictions.

How is contrast ratio calculated?+

Contrast ratio is the relative luminance of the lighter color plus 0.05, divided by the relative luminance of the darker color plus 0.05. Relative luminance accounts for human perception — green appears brighter than blue at the same numeric intensity. The result ranges from 1:1 (identical) to 21:1 (black on white).

\ud83d\udcd6 Learn More

Built by Derek Giordano · Part of Ultimate Design Tools

Related Tools