Contrast Accessibility Checker
Free Contrast accessibility tool for art & design fundamentals. Enter values to see solutions, formulas, and educational explanations.
Formula
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
Where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is calculated from linearized sRGB values: L = 0.2126R + 0.7152G + 0.0722B. WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
Worked Examples
Example 1: Testing White Text on Dark Blue Background
Problem: A website uses white text (#FFFFFF) on a dark blue-gray background (#2C3E50). Check if this meets WCAG AA and AAA requirements.
Solution: Foreground luminance (white): 1.0000\nBackground luminance (#2C3E50): 0.0586\nContrast ratio: (1.0 + 0.05) / (0.0586 + 0.05) = 9.67:1\nNormal text AA (4.5:1): PASS\nNormal text AAA (7:1): PASS\nLarge text AA (3:1): PASS\nLarge text AAA (4.5:1): PASS
Result: Contrast: 9.67:1 | Passes all WCAG levels | Excellent accessibility
Example 2: Checking Light Gray Text on White Background
Problem: A design uses light gray text (#999999) on a white background (#FFFFFF) for secondary content. Check if this is accessible.
Solution: Foreground luminance (#999999): 0.3254\nBackground luminance (white): 1.0000\nContrast ratio: (1.0 + 0.05) / (0.3254 + 0.05) = 2.80:1\nNormal text AA (4.5:1): FAIL\nLarge text AA (3:1): FAIL\nSuggested fix: Darken text to at least #767676 for 4.54:1 ratio
Result: Contrast: 2.80:1 | Fails all levels | Change #999999 to #767676 or darker
Frequently Asked Questions
What is WCAG contrast ratio and why does it matter?
The WCAG (Web Content Accessibility Guidelines) contrast ratio is a numerical measure of the difference in perceived luminance between foreground and background colors, ranging from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white). It matters because approximately 1.3 billion people worldwide live with some form of visual impairment, and millions more experience situational impairments like screen glare or aging-related vision decline. Insufficient contrast makes text difficult or impossible to read for these users. WCAG compliance is also legally required in many jurisdictions, including under the Americans with Disabilities Act and the European Accessibility Act, making it both an ethical and legal consideration for web designers.
What are the WCAG AA and AAA contrast requirements?
WCAG defines two conformance levels for contrast. Level AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt and above, or 14pt bold and above). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Additionally, UI components and graphical objects that convey information must meet a 3:1 contrast ratio against adjacent colors. Most organizations target AA compliance as the minimum acceptable standard, while AAA is considered the gold standard for accessibility. Government websites in many countries are legally required to meet at least WCAG AA contrast standards.
How is the contrast ratio calculated?
The WCAG contrast ratio formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is calculated from linearized sRGB values using the formula L = 0.2126R + 0.7152G + 0.0722B, where each channel is first converted from sRGB gamma space to linear light using a piecewise function. The coefficients reflect the human eye sensitivity to different wavelengths, with green contributing the most to perceived brightness. The 0.05 offset prevents division by zero and accounts for ambient light reflections. This formula produces a ratio between 1:1 and 21:1.
What is APCA and how does it differ from WCAG contrast?
APCA (Accessible Perceptual Contrast Algorithm) is a next-generation contrast measurement method being developed for WCAG 3.0 that addresses several limitations of the current WCAG 2.x contrast formula. Unlike the current symmetric formula where swapping foreground and background gives the same ratio, APCA accounts for the polarity effect where dark text on light backgrounds is more readable than light text on dark backgrounds. APCA also better handles middle-range colors and considers font size and weight as factors in the contrast requirement. The output is a percentage value (Lc) rather than a ratio, with different minimum thresholds for different text sizes and weights, providing more nuanced and accurate accessibility guidance.
How can I fix a color combination that fails contrast requirements?
When a color combination fails WCAG contrast requirements, you have several strategies to fix it. The most effective is to increase the lightness difference between foreground and background. Darken the darker color or lighten the lighter color until the target ratio is achieved. You can also adjust saturation, as reducing the saturation of either color while maintaining the hue can help. If your brand colors must remain unchanged, consider using them only for decorative elements or large headings while using higher-contrast colors for body text. Adding a semi-transparent overlay between text and background images ensures consistent readability regardless of image content. Contrast Accessibility Checker shows you exactly what luminance values you need to reach.
How does color blindness affect contrast perception?
Color blindness (color vision deficiency) affects approximately 8 percent of men and 0.5 percent of women of Northern European descent, with protanopia (red weakness) and deuteranopia (green weakness) being the most common types. People with color blindness can generally perceive luminance contrast normally, which is why WCAG contrast ratios based on luminance remain effective for most color-blind users. However, colors that appear distinct to typical vision may be indistinguishable to color-blind users, so never rely solely on color to convey information. Additionally, some color combinations that pass contrast checks may be particularly difficult for specific types of color blindness. Test your designs with color blindness simulation tools alongside this contrast checker.