Contrast Checker– Check WCAG Accessibility

Check color contrast ratios for WCAG 2.1 accessibility compliance.

Foreground (Text) Color

Background Color

Sample Text Preview

This is how your text will look on the selected background color.

Small body text for normal text contrast evaluation. Lorem ipsum dolor sit amet.

Contrast Ratio

21.00:1

AA Normal Text (4.5:1)

Pass

AA Large Text (3:1)

Pass

AAA Normal Text (7:1)

Pass

AAA Large Text (4.5:1)

Pass

Why Use Our Contrast Checker?

WCAG Compliant

Tests against WCAG 2.1 AA and AAA standards for both normal and large text.

Live Preview

See how your text actually looks on the background color in real-time.

Clear Results

Instant Pass/Fail indicators for all four WCAG conformance levels.

Color Pickers

Use native color pickers or type HEX codes for both foreground and background.

100% Private

All calculations happen locally in your browser. No data is sent anywhere.

Real-Time

Results update instantly as you change either color. No submit button needed.

Other Color Tools

Color Picker

Pick colors visually and get all format values

HEX to RGB

Convert HEX color codes to RGB values

RGB to HEX

Convert RGB values to HEX color codes

HSL Converter

Convert between HSL, RGB, and HEX formats

Palette Generator

Generate color palettes from a base color

Gradient Generator

Create CSS gradients visually

Complete Color Contrast Guide

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure web content is readable by everyone, including people with visual impairments. Color contrast is one of the most common accessibility issues on the web, affecting millions of users with low vision or color blindness.

The contrast ratio is calculated from the relative luminance of two colors. Relative luminance accounts for how human eyes perceive different wavelengths of light - green appears brighter than blue at the same intensity, for example. The formula produces a ratio between 1:1 (identical colors) and 21:1 (black on white).

WCAG defines two conformance levels: AA (the most common requirement, mandated by many legal standards) requires 4.5:1 for normal text and 3:1 for large text. AAA (enhanced accessibility) requires 7:1 for normal text and 4.5:1 for large text.

Level	Normal Text	Large Text	Usage
AA	4.5:1	3:1	Minimum for most websites, legally required in many jurisdictions
AAA	7:1	4.5:1	Enhanced accessibility, recommended for best user experience

Large text is defined as 18pt (24px) regular weight or 14pt (18.66px) bold weight. Larger text is inherently more readable, so it has lower contrast requirements. Most body text on websites falls under "normal text" requirements.

Legal Compliance

Many countries require WCAG AA compliance. The ADA, Section 508, and EU Accessibility Act all reference WCAG standards.

User Experience

Good contrast benefits everyone, not just users with disabilities. It improves readability on mobile devices and in bright sunlight.

Inclusivity

About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Adequate contrast ensures your content reaches everyone.

SEO Impact

Search engines consider accessibility in rankings. Google Lighthouse audits include contrast checks that affect your score.

What is color contrast ratio?

Color contrast ratio measures the difference in perceived luminance between two colors. It ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white). Higher ratios mean better readability.

What is WCAG 2.1?

WCAG (Web Content Accessibility Guidelines) 2.1 is an international standard for web accessibility. It defines minimum contrast ratios to ensure content is readable by people with visual impairments.

What contrast ratio does WCAG AA require?

WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). These are the minimum requirements for most websites.

What contrast ratio does WCAG AAA require?

WCAG AAA requires a minimum contrast ratio of 7:1 for normal text and 4.5:1 for large text. AAA is the highest level of conformance and provides the best accessibility.

What is considered large text?

Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (18.66px) or larger for bold weight. Large text has relaxed contrast requirements because it's inherently more readable.

Why does color contrast matter?

Adequate color contrast ensures text is readable for all users, including those with low vision, color blindness, or who view content in bright sunlight. It's also a legal requirement in many jurisdictions.

Is this tool free?

Yes, completely free with no signup required. Check unlimited color combinations for accessibility.

How is contrast ratio calculated?

The ratio is calculated using the relative luminance of each color. Relative luminance accounts for how human eyes perceive different wavelengths of light, following the WCAG 2.1 algorithm.

Can I swap foreground and background?

Yes, you can manually enter any colors for foreground and background. The contrast ratio is the same regardless of which color is foreground vs background.

Is my data secure?

Yes, all calculations happen locally in your browser. No data is ever sent to a server.

Contrast Checker Tool

Why Use Our Contrast Checker?

Other Color Tools

Complete Color Contrast Guide