What is WCAG contrast ratio?

WCAG (Web Content Accessibility Guidelines) contrast ratio measures the difference in brightness between text and background colors. It's expressed as a ratio (e.g., 4.5:1) where higher ratios indicate better contrast and readability.

What are the WCAG contrast requirements?

WCAG Level AA requires: 4.5:1 for normal text (under 18pt or 14pt bold), 3:1 for large text (18pt+ or 14pt+ bold). WCAG Level AAA requires: 7:1 for normal text, 4.5:1 for large text.

How do I check color contrast?

Select your foreground (text) color and background color using the color pickers. You can input colors in HEX, RGB, or HSL format. The tool automatically calculates the contrast ratio and shows WCAG compliance status (AA, AAA, or fail).

Why is color contrast important?

Good color contrast ensures text is readable for all users, including those with visual impairments, color blindness, or viewing screens in bright sunlight. It's also required for web accessibility compliance.

Can I test for color blindness?

Yes! The tool includes color blindness simulation (Protanopia, Deuteranopia, Tritanopia) to see how your color combinations appear to users with color vision deficiencies.

What color formats are supported?

The tool supports HEX (#RRGGBB), RGB (rgb(r, g, b)), RGBA (rgba(r, g, b, a)), HSL (hsl(h, s%, l%)), and HSLA (hsla(h, s%, l%, a)) formats for maximum flexibility.

🎯 Contrast Checker

Check color contrast ratio for WCAG accessibility compliance. Test text and background colors for AA and AAA standards. Supports HEX, RGB, HSL formats with color blindness simulation.

UI Element Type

Text Color (Foreground)

Background Color

Color Blindness Simulation

Preview

Large Text (18pt+)

Normal Text - The quick brown fox jumps over the lazy dog. This is a sample text to preview the contrast.

Contrast Ratio

21.00:1

✅ AAA - Excellent contrast

Contrast Ratio21.00:1 / 21:1

3:14.5:17:121:1

WCAG AA

Normal Text (4.5:1)✓ Pass

Large Text (3:1)✓ Pass

WCAG AAA

Normal Text (7:1)✓ Pass

Large Text (4.5:1)✓ Pass

CSS Code

color: #000000;
background-color: #ffffff;

About WCAG Contrast Standards

WCAG AA: Minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold).

WCAG AAA: Enhanced contrast ratio of 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 18pt (24px) or larger, or 14pt (18.67px) or larger if bold.

Color Formats Supported: HEX (#RRGGBB), RGB (rgb(r, g, b)), RGBA (rgba(r, g, b, a)), HSL (hsl(h, s%, l%)), HSLA (hsla(h, s%, l%, a))

Color Blindness Types: Protanopia (red-green, difficulty seeing red), Deuteranopia (red-green, difficulty seeing green), Tritanopia (blue-yellow, difficulty seeing blue)