What is a good contrast ratio?

For WCAG AA compliance, normal text requires a contrast ratio of at least 4.5:1 against its background, while large text (18px+ bold or 24px+) requires 3:1. For AAA compliance, the minimum is 7:1 for normal text and 4.5:1 for large text.

How is contrast ratio calculated?

Contrast ratio is calculated from the relative luminance of both colors using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker. Relative luminance accounts for how humans perceive different wavelengths of light.

What is WCAG and why does it matter?

WCAG (Web Content Accessibility Guidelines) are internationally recognized standards for making web content accessible to people with disabilities. Contrast requirements ensure text is readable by users with low vision, color blindness, or viewing in bright sunlight.

Contrast Checker – WCAG AA/AAA Color Accessibility Checker

Q: What is color blindness simulation?

Color blindness simulation shows how your color combination appears to people with different types of color vision deficiency (CVD). Approximately 8% of men and 0.5% of women have some form of color blindness. Testing your colors helps ensure accessibility for these users.

Q: How do I fix failing contrast?

Use the smart suggestion feature: when your colors fail WCAG requirements, the tool automatically finds the closest accessible alternative by adjusting only the lightness of one color, preserving your original hue. Click 'Apply Suggestion' to instantly update your colors.

Why This Checker

Built for Accessibility-First Design

Every color change is instantly validated against WCAG 2.1 standards. Smart suggestions find the closest accessible fix in milliseconds.

⚡

Real-Time Analysis

Contrast ratio recalculates instantly as you type, pick colors, or adjust sliders. Zero delay — results update in under 16ms using optimized relative luminance calculations.

🔎

Smart Fix Engine

When colors fail WCAG requirements, the tool automatically finds the closest accessible alternative by adjusting only the lightness of one color, preserving your original design intent.

👁

Color Blindness Sim

Preview your color combinations as seen by people with Protanopia, Deuteranopia, Tritanopia, and other types of color vision deficiency, covering approximately 8% of males worldwide.

🎨

Live Preview

See exactly how your colors look in real text scenarios with adjustable font sizes and weights. Preview includes buttons, badges, links, and form inputs for comprehensive testing.

📋

One-Click Export

Copy CSS custom properties, HEX codes, or the contrast ratio to your clipboard instantly. Generated CSS is ready to paste into your project with proper variable naming.

🎯

WCAG 2.1 Compliant

Tests against all WCAG 2.1 criteria: AA and AAA for normal text, large text, and the 3:1 minimum for UI components and graphical objects. Stay ahead of accessibility standards.

FAQ

Frequently Asked Questions

For WCAG AA compliance, normal text (under 18px regular or 14px bold) requires a minimum contrast ratio of 4.5:1. Large text (18px+ regular or 14px+ bold) requires at least 3:1. For the stricter AAA level, normal text needs 7:1 and large text needs 4.5:1. Non-text elements like icons and form borders need at least 3:1.

The contrast ratio is calculated from the relative luminance of both colors using the WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter and L2 is the darker relative luminance. Relative luminance is derived from the sRGB color values using a perceptual linearization function that accounts for how humans perceive different wavelengths of light at varying intensities.

WCAG (Web Content Accessibility Guidelines) are internationally recognized standards published by the W3C for making web content accessible to people with disabilities. WCAG 2.1 Level AA is the legal requirement in many jurisdictions including the EU (European Accessibility Act) and the US (ADA, Section 508). Meeting contrast requirements ensures text is readable by users with low vision, color blindness, or those viewing in bright sunlight conditions.

Color blindness simulation transforms your color pair to approximate how it would appear to someone with a specific type of color vision deficiency (CVD). Approximately 8% of men and 0.5% of women have some form of color blindness. The most common types are Protanopia (red-blind, ~1.3% of males), Deuteranopia (green-blind, ~1.2% of males), and Tritanopia (blue-blind, ~0.001%). Testing your colors helps ensure they remain distinguishable for these users.

When your color combination fails WCAG requirements, the suggestion engine finds the minimal adjustment needed to achieve compliance. It adjusts only the lightness (L in HSL) of one color while preserving its hue and saturation, keeping your design intent intact. Two suggestions are provided: one for fixing the foreground and one for the background, so you can choose which adjustment best fits your design.

No. All contrast calculations, color transformations, and simulations run entirely in your browser using JavaScript. No color data is ever transmitted to any server. No cookies are used for tracking. The tool works completely offline once loaded and can be used without any network connection.