Color Contrast Checker WCAG

Understanding WCAG Color Contrast

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by people with visual impairments. The contrast ratio measures the difference in perceived brightness between foreground and background colors. A ratio of 1:1 means no difference (same color), while 21:1 is the maximum (pure black on pure white).

This tool calculates the exact contrast ratio using the WCAG 2.1 algorithm. It linearizes sRGB color values, computes relative luminance using the formula L = 0.2126R + 0.7152G + 0.0722B, and then calculates the ratio as (L1 + 0.05) / (L2 + 0.05). The results show whether your color combination passes AA and AAA standards for both normal and large text.

WCAG Compliance Levels

AA compliance is the minimum recommended standard. It requires 4.5:1 contrast for normal text (under 18pt or 14pt bold) and 3:1 for large text. AAA compliance provides enhanced accessibility with 7:1 for normal text and 4.5:1 for large text. Most websites aim for AA compliance at minimum, with AAA being the gold standard for organizations committed to maximum accessibility.

The Luminance Formula

The relative luminance formula weights the three color channels differently because the human eye is most sensitive to green light, somewhat sensitive to red, and least sensitive to blue. The coefficients 0.2126 (red), 0.7152 (green), and 0.0722 (blue) reflect this biological reality. Before applying these weights, each color value undergoes gamma correction to convert from the non-linear sRGB space to linear light values.

Tips for Improving Contrast

If your color combination fails a WCAG level, try darkening the foreground or lightening the background. For colored text on colored backgrounds, increasing the lightness difference between the two colors improves contrast. Avoid placing text on busy backgrounds or images without a semi-transparent overlay. Test your colors in both light and dark modes to ensure accessibility in all contexts.

Frequently Asked Questions

What is the WCAG contrast ratio?

A measure of brightness difference between two colors, ranging from 1:1 to 21:1, calculated from relative luminance values.

What are the AA and AAA requirements?

AA: 4.5:1 normal text, 3:1 large text. AAA: 7:1 normal text, 4.5:1 large text. AA is the minimum recommended standard.

How is relative luminance calculated?

L = 0.2126R + 0.7152G + 0.0722B with linearized sRGB values. The coefficients reflect human eye sensitivity to each color.

What is large text?

18pt (24px) regular weight or 14pt (18.66px) bold weight. Large text has lower contrast requirements due to its inherent readability.

Why is contrast important?

300 million people have color vision deficiency. Sufficient contrast ensures text readability for everyone, including in challenging viewing conditions.