OneMinuteBrandingOneMinuteBrandingAll tools

Free Color Contrast Checker

Check WCAG AA and AAA contrast ratios between any two colors. Preview live text samples and copy accessibility reports. No signup required.

Contrast Ratio

17.06:1

AA Normal

(4.5:1)

Pass

AA Large

(3:1)

Pass

AAA Normal

(7:1)

Pass

AAA Large

(4.5:1)

Pass

Live Preview

Heading Text (24px+)

This is body text at normal size. WCAG requires a contrast ratio of at least 4.5:1 for normal text to meet AA standards, and 7:1 for AAA.

This is small text (12px). Small text is harder to read at low contrast, so meeting higher contrast ratios is especially important here.

Foreground

HEX: #1a1a2e

RGB: 26, 26, 46

HSL: 240, 28%, 14%

Background

HEX: #ffffff

RGB: 255, 255, 255

HSL: 0, 0%, 100%

Why Use Our Color Contrast Checker?

WCAG 2.1 Compliant

Checks both AA and AAA conformance levels for normal and large text. Follows the latest WCAG 2.1 contrast ratio guidelines exactly.

Real-time Preview

See live text samples at heading, body, and small text sizes. Instantly visualize how your color choices look in practice before committing.

Developer Friendly

Copy a formatted contrast report with all pass/fail results. Share with your team, paste into documentation, or attach to accessibility audits.

How to Check Color Contrast

1

Pick Colors

Enter hex codes or use the color pickers to choose your foreground (text) and background colors.

2

Check Contrast

See the contrast ratio instantly along with WCAG AA and AAA pass/fail results for normal and large text.

3

Copy Results

Copy the full contrast report to share with your team or include in accessibility documentation.

Frequently Asked Questions

What is color contrast ratio?▼
Color contrast ratio measures the difference in luminance between two colors, expressed as a ratio like 4.5:1. The higher the ratio, the more readable text will be. A ratio of 1:1 means no contrast (same color), while 21:1 is the maximum (black on white).
What are WCAG AA and AAA standards?▼
WCAG (Web Content Accessibility Guidelines) defines two conformance levels for color contrast. AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text. AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text. Most accessibility regulations require at least AA compliance.
What counts as "large text" in WCAG?▼
Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.66px) or larger for bold text. Large text has lower contrast requirements because its increased size makes it inherently easier to read.
Why does color contrast matter for accessibility?▼
Sufficient color contrast ensures that text is readable for people with low vision, color blindness, or those viewing content in challenging conditions like bright sunlight. It is a legal requirement under accessibility laws like the ADA and the European Accessibility Act.
How do I fix a failing contrast ratio?▼
To increase contrast, make the dark color darker or the light color lighter. You can use the swap button to test reversed combinations. For brand colors that fail, consider using them only for large text or decorative elements, and choose a darker or lighter variant for body text.

Need a Complete Brand Identity?

Love this tool? We generate complete brand systems — logos, colors, typography, and Tailwind configs — all in 60 seconds with AI.

Generate Your Brand