Color Contrast Ratio Calculator
Free Color contrast ratio 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 L = 0.2126*R + 0.7152*G + 0.0722*B, where R, G, B are linearized sRGB values. The 0.05 offset accounts for ambient light.
Worked Examples
Example 1: Website Header Contrast Check
Problem:A website uses white text (#FFFFFF) on a blue background (#3B82F6). Does this meet WCAG AA requirements?
Solution:Foreground luminance: sRGB linearization of (255,255,255) = (1.0, 1.0, 1.0)\nRelative luminance = 0.2126 + 0.7152 + 0.0722 = 1.0\nBackground luminance: sRGB linearization of (59,130,246)\nR: ((59/255+0.055)/1.055)^2.4 = 0.0399\nG: ((130/255+0.055)/1.055)^2.4 = 0.2158\nB: ((246/255+0.055)/1.055)^2.4 = 0.9130\nRelative luminance = 0.2126(0.0399) + 0.7152(0.2158) + 0.0722(0.913) = 0.229\nContrast = (1.0+0.05)/(0.229+0.05) = 3.76:1
Result:Contrast ratio: 3.76:1 | AA Large Text: Pass | AA Normal Text: Fail (needs 4.5:1)
Example 2: Dark Mode Text Contrast
Problem:A dark mode design uses light gray text (#D1D5DB) on a dark background (#1F2937). Check all WCAG levels.
Solution:Foreground (#D1D5DB): R=209, G=213, B=219\nLinearized: R=0.637, G=0.659, B=0.694\nLuminance = 0.2126(0.637) + 0.7152(0.659) + 0.0722(0.694) = 0.657\nBackground (#1F2937): R=31, G=41, B=55\nLinearized: R=0.0102, G=0.0189, B=0.0361\nLuminance = 0.0178\nContrast = (0.657+0.05)/(0.0178+0.05) = 10.43:1
Result:Contrast ratio: 10.43:1 | All WCAG levels: Pass (AA, AAA, normal and large text)
Frequently Asked Questions
What is color contrast ratio and why is it important for accessibility?
Color contrast ratio is a numerical measurement of the difference in luminance (perceived brightness) between two colors, expressed as a ratio from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white). It is critically important for web accessibility because approximately 1.3 billion people worldwide live with some form of visual impairment, including 300 million with color vision deficiency. The Web Content Accessibility Guidelines (WCAG) establish minimum contrast ratios to ensure text is readable by people with moderately low vision. Insufficient contrast makes content difficult or impossible to read, effectively excluding a significant portion of users from accessing information. Many countries now have legal requirements for digital accessibility.
What are the WCAG contrast ratio requirements?
WCAG 2.1 defines two conformance levels for contrast. Level AA (minimum) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (defined as 18px regular or 14px bold and above). Level AAA (enhanced) requires 7:1 for normal text and 4.5:1 for large text. These requirements apply to text and images of text only; graphical elements and user interface components require a minimum 3:1 contrast ratio against adjacent colors under WCAG 2.1 Success Criterion 1.4.11. Logos and decorative text are exempt from contrast requirements. The upcoming WCAG 3.0 (currently in development) proposes a new APCA-based contrast model that may replace the current luminance ratio method.
How is the contrast ratio calculated mathematically?
The contrast ratio is calculated using the relative luminance of both colors. First, each sRGB color value (0-255) is converted to linear light by reversing the gamma curve: for values at or below 0.03928, divide by 12.92; for values above, apply the formula ((value + 0.055) / 1.055)^2.4. Then, relative luminance is calculated as L = 0.2126*R + 0.7152*G + 0.0722*B using the linearized values. Finally, the contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color luminance and L2 is the darker. The 0.05 offset accounts for ambient light reflections. This formula, defined in WCAG 2.1, ensures calculations align with how the human visual system perceives brightness differences.
What is the difference between WCAG 2.x contrast and APCA?
The WCAG 2.x contrast ratio formula treats foreground and background colors symmetrically, meaning white text on blue background and blue text on white background get the same ratio. However, human perception is not symmetric; light text on dark backgrounds appears differently than dark text on light backgrounds. The Advanced Perceptual Contrast Algorithm (APCA), proposed for WCAG 3.0, addresses this by incorporating polarity sensitivity (light-on-dark versus dark-on-light), font size and weight as variables in the contrast calculation, spatial frequency considerations, and better modeling of human visual perception. APCA produces directional contrast values (positive for dark-on-light, negative for light-on-dark) with different thresholds based on text size and weight, providing more nuanced and accurate accessibility guidance.
References
Reviewed by Daniel Agrici, Founder & Lead Developer · Editorial policy