accessibility_newAccessibility

Contrast Checker

Check WCAG contrast compliance between text and background colors. AA and AAA standards.

Text Color (Foreground)
#
Background Color
#
The quick brown fox jumps over the lazy dog
Normal text (16px) — Lorem ipsum dolor sit amet, consectetur adipiscing elit. The contrast ratio determines how readable this text is for users with low vision.
Small text at 12px — harder to read at low contrast
Contrast Ratio
—
Common color pairs

Frequently Asked Questions

The WCAG contrast ratio measures luminance difference between foreground and background colors. It ranges from 1:1 (no contrast) to 21:1 (black on white). WCAG 2.1 Level AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold).
WCAG AA is the standard compliance level for most websites (4.5:1 normal, 3:1 large text). AAA is the enhanced level (7:1 normal, 4.5:1 large text). AA compliance is typically required by law for public websites in many jurisdictions. AAA is best-practice but not required for entire pages.
WCAG defines large text as 18pt (24px) or larger for regular weight, or 14pt (~18.67px) or larger for bold text. Large text requires a lower contrast ratio (3:1 for AA) because it is inherently easier to read at lower contrast.
Each sRGB channel is linearized: values ≤ 0.04045 are divided by 12.92; others use ((c + 0.055) / 1.055)^2.4. Luminance is then L = 0.2126R + 0.7152G + 0.0722B. Contrast = (Lmax + 0.05) / (Lmin + 0.05). This models human visual perception of brightness.

Contrast Checker — Overview

The Contrast Checker measures the luminance difference between a foreground (text) color and a background color, and reports whether the combination meets WCAG 2.1 accessibility standards. The Web Content Accessibility Guidelines define minimum contrast ratios to ensure text is readable by people with low vision or in challenging viewing conditions: AA level requires 4.5:1 for normal text and 3:1 for large text, while the stricter AAA level requires 7:1 and 4.5:1 respectively. Enter or pick your foreground and background colors, and the tool instantly calculates the contrast ratio, shows pass/fail badges for each WCAG level and text size, and previews how the text actually looks against the background. This is an essential step in any accessibility audit or compliant UI design process.

Common Use Cases

How to Use This Tool

Enter HEX codes or use the color pickers to set your foreground text color and background color. The contrast ratio appears instantly along with WCAG pass/fail indicators for normal text, large text, AA, and AAA levels. Adjust colors until you achieve the compliance level your project requires.

Related Tools

Cron Expression Builder Markdown Previewer Epoch Converter