Color Contrast Checker

This color contrast checker calculates the relative luminance difference between your foreground and background colors using the official WCAG formula. When you enter hex color codes, the tool converts each color to its RGB values, then transforms those values into linear RGB space to account for how human eyes perceive brightness.

The calculation uses specific weights for red, green, and blue channels (21.26%, 71.52%, and 7.22% respectively) because human vision is most sensitive to green light and least sensitive to blue. After computing the luminance values, the tool determines which color is lighter and calculates the contrast ratio using the formula: (lighter + 0.05) / (darker + 0.05).

Your results show both the numerical ratio and which WCAG standards it meets. WCAG AA compliance requires 4.5:1 for normal text and 3:1 for large text, while the stricter AAA standard demands 7:1 and 4.5:1 respectively. These ratios ensure text remains readable for users with various visual impairments, including low vision and color blindness.

The tool instantly evaluates your color combination against all accessibility levels, helping you make informed design decisions that create inclusive web experiences for all users.

Run this contrast checker whenever you select colors for text, buttons, icons, or any interactive elements on websites and applications. Use it during the design phase to validate your color palette before development begins, and again when reviewing implemented designs across different devices and browsers.

The tool is essential for accessibility audits and compliance testing. Many organizations require WCAG AA compliance for legal reasons, making contrast checking a mandatory step in quality assurance processes. Government websites, educational institutions, and businesses serving diverse populations particularly need rigorous contrast testing.

Beyond compliance, use contrast checking to improve user experience for everyone. Higher contrast reduces eye strain during long reading sessions and improves readability on mobile devices in bright sunlight. Test your colors whenever you update brand guidelines, create marketing materials, or design user interfaces that will be viewed on various devices and in different lighting conditions.

The most common mistake is testing colors only in ideal viewing conditions. Your monitor's brightness, ambient lighting, and viewing angle all affect perceived contrast, so colors that look fine in your design environment may fail for users in different settings.

Many designers assume that passing WCAG AA is sufficient, but AAA compliance provides significantly better readability, especially for users with mild visual impairments who don't use assistive technology. When possible, aim for contrast ratios above 7:1 for critical text content.

Another frequent error is ignoring the 'large text' exception. Text 18pt or larger (or 14pt bold) only needs 3:1 contrast for AA compliance, but this doesn't mean you should use barely-passing combinations. Context matters - important calls-to-action and navigation elements benefit from higher contrast regardless of size.

The contrast ratio calculation follows the WCAG 2.1 specification precisely. First, each RGB color value is converted to linear RGB space using the sRGB transfer function: if the value ≤ 0.03928, divide by 12.92; otherwise, use the power function ((value + 0.055) / 1.055)^2.4.

Relative luminance is then calculated using: L = 0.2126 × R + 0.7152 × G + 0.0722 × B, where R, G, and B are the linear RGB values. These coefficients reflect human visual sensitivity to different wavelengths of light.

The final contrast ratio uses: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker color's luminance. The 0.05 constant prevents division by zero and accounts for ambient light reflection. A perfect black-on-white contrast produces 21:1, while identical colors yield 1:1.