Contrast Accessibility Checker
Free Contrast accessibility tool for art & design fundamentals. Enter values to see solutions, formulas, and educational explanations.
Reviewed by Daniel Agrici, Founder & Lead Developer
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.
References
Reviewed by Daniel Agrici, Founder & Lead Developer · Editorial policy