Contrast Checker (WCAG)

Color contrast is fundamental to web accessibility. When text or UI elements don't have sufficient contrast against their background, users with visual impairments, older adults, or anyone viewing content in challenging lighting conditions may struggle to read or interact with your content. Our Contrast Checker calculates the contrast ratio between any two colors and evaluates compliance with WCAG (Web Content Accessibility Guidelines) standards.

The WCAG defines specific contrast ratio requirements for different contexts. Normal text requires higher contrast than large text, and interactive UI components have their own thresholds. Understanding these requirements isn't just about compliance—it's about creating designs that work for everyone.

Understanding Contrast Ratio

Contrast ratio is calculated using the relative luminance of two colors. The formula produces a ratio ranging from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black and white). The calculation accounts for how human eyes perceive different wavelengths of light—green appears brighter than blue at the same intensity, for example.

The ratio tells you how much brighter the lighter color is compared to the darker one. A 4.5:1 ratio means the lighter color is 4.5 times as bright (in perceptual terms) as the darker color. Higher ratios mean easier readability.

WCAG Compliance Levels

Level AA (Minimum): This is the baseline for most accessibility requirements. Normal text needs a 4.5:1 ratio, while large text (18pt or 14pt bold) only needs 3:1. UI components and graphical elements also require 3:1 against adjacent colors.

Level AAA (Enhanced): This is the highest standard and recommended for maximum accessibility. Normal text needs 7:1, and large text needs 4.5:1. While not always required, AAA compliance ensures your content is accessible to users with more significant visual impairments.

What Counts as Large Text?

WCAG defines large text as 18 point (24px) or larger, or 14 point (18.66px) bold or larger. Large text has relaxed contrast requirements because its increased size makes it inherently easier to read. However, when in doubt, aim for the stricter normal text requirements.

Common Contrast Mistakes

Low-contrast placeholder text: Light gray placeholders in input fields often fail accessibility. Consider darker placeholder colors or alternative patterns like floating labels.

Colored text on colored backgrounds: Vibrant color combinations that look striking may have poor contrast. Orange on pink, blue on purple, or green on blue frequently fail even if they seem visually distinct.

Hover and focus states: Interactive elements must maintain sufficient contrast in all states. A button that passes in its default state but fails when hovered creates accessibility barriers.

Overlaid text on images: Text placed over photographs needs careful handling. Variable image content means the same text color might pass in some areas and fail in others. Consider overlay backgrounds or text shadows.

Beyond the Ratio

While contrast ratio is essential, it's not the only factor in readability. Font weight, letter spacing, line height, and font choice all affect legibility. A technically compliant ratio with a thin, decorative font may still be difficult to read. Use contrast checking as one tool in your accessibility toolkit, not the only one.

Color Blindness Considerations

Contrast ratios don't account for color blindness. Two colors with adequate contrast for most users might appear nearly identical to someone with red-green color blindness. Always supplement color with other visual indicators like patterns, icons, or labels.

This Tool's Approach

Enter any foreground and background color in HEX or RGB format. The tool instantly calculates the contrast ratio and shows pass/fail status for all WCAG criteria. When your colors don't meet requirements, the tool suggests adjustments—lighter or darker variations of your foreground color that would achieve compliance.