Color Contrast Ratio Calculator
Free Color contrast ratio tool for art & design fundamentals. Enter values to see solutions, formulas, and educational explanations.
Reviewed for accuracy by Daniel Agrici, Founder & Lead Developer
Color Contrast Ratio Calculator
Calculator
Adjust values & calculateEnter your values below. Every result is computed in your browser — no data is sent to any server.
Formula: Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
Worked example — Contrast ratio: 3.76:1 | AA Large Text: Pass | AA Normal Text: Fail (needs 4.5:1)
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) Relative luminance = 0.2126 + 0.7152 + 0.0722 = 1.0 Background luminance: sRGB linearization of (59,130,246) R: ((59/255+0.055)/1.055)^2.4 = 0.0399 G: ((130/255+0.055)/1.055)^2.4 = 0.2158 B: ((246/255+0.055)/1.055)^2.4 = 0.9130 Relative luminance = 0.2126(0.0399) + 0.7152(0.2158) + 0.0722(0.913) = 0.229 Contrast = (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 Linearized: R=0.637, G=0.659, B=0.694 Luminance = 0.2126(0.637) + 0.7152(0.659) + 0.0722(0.694) = 0.657 Background (#1F2937): R=31, G=41, B=55 Linearized: R=0.0102, G=0.0189, B=0.0361 Luminance = 0.0178 Contrast = (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.
How does color blindness affect contrast perception?
Color blindness (color vision deficiency) affects approximately 8 percent of males and 0.5 percent of females of Northern European descent. The most common types are protanopia (red-blind), deuteranopia (green-blind), and tritanopia (blue-blind). Color blindness primarily affects the ability to distinguish between certain hues but generally does not affect luminance perception, which is why the WCAG contrast ratio (based on luminance) remains effective for most colorblind users. However, relying solely on color to convey information (like red for errors and green for success) creates problems because these colors may appear identical to red-green colorblind users. Best practice is to combine sufficient luminance contrast with additional visual cues such as icons, patterns, underlines, or text labels.
What tools and techniques help improve poor contrast ratios?
Several techniques can improve contrast ratios without dramatically changing design aesthetics. Darkening the background or lightening the foreground directly increases the luminance difference. Adding a semi-transparent overlay or text shadow behind text improves readability on variable backgrounds like images. Using a darker shade or tint of the same hue maintains brand consistency while improving accessibility. Increasing font size and weight reduces the required contrast ratio from 4.5:1 to 3:1 for large text. For designs with colored backgrounds, tools like Color Contrast Ratio Calculator help identify the exact adjustments needed to reach WCAG thresholds. Design systems should include pre-tested accessible color pairs, and automated testing tools like axe or Lighthouse can identify contrast failures during development.
What are common contrast ratio mistakes in web design?
Common mistakes include using light gray text on white backgrounds (often seen in placeholder text and secondary information), placing text over images or gradients without contrast-ensuring overlays, assuming that visually distinct colors have sufficient luminance contrast (bright red on dark blue may look different but have poor luminance contrast), ignoring contrast requirements for interactive elements like buttons and form inputs, using thin font weights that reduce perceived contrast, and failing to test contrast in both light and dark mode variants. Another frequent error is testing only the primary text color while ignoring links, headings, captions, and error messages. Organizations should establish minimum contrast standards in their design systems and implement automated testing in their development workflows.
How do different font sizes affect contrast requirements?
Font size directly impacts readability at any given contrast ratio because larger characters have more defined edges and are easier for the visual system to resolve. WCAG defines large text as 18 points (approximately 24 CSS pixels) for regular weight or 14 points (approximately 18.66 CSS pixels) for bold weight. Large text requires only 3:1 contrast for AA compliance versus 4.5:1 for normal text. This reduced requirement reflects research showing that larger text remains legible at lower contrast levels. However, this threshold is a minimum; many accessibility experts recommend maintaining 4.5:1 even for large text whenever possible. Very small text (below 12px) may need even higher contrast than 4.5:1 to be readable, though WCAG does not specify requirements above 7:1.
How does background pattern or texture affect contrast calculations?
Background patterns and textures complicate contrast calculations because the contrast varies across the pattern. WCAG requires that text maintain sufficient contrast against all parts of the background it overlaps. For example, white text on a pattern that alternates between light and dark areas may pass contrast requirements against the dark areas but fail against the light areas. The most conservative approach is to calculate contrast against the least favorable background color. For photographic backgrounds, measuring contrast at the lightest point under the text ensures compliance. Practical solutions include adding a solid or semi-transparent color overlay behind text, using a text shadow or stroke, or placing text in a solid-colored container positioned over the textured background.
What legal requirements exist for color contrast in digital products?
Numerous legal frameworks mandate color contrast compliance. In the United States, the Americans with Disabilities Act (ADA) has been interpreted to cover websites, with WCAG 2.1 Level AA as the de facto standard. Section 508 of the Rehabilitation Act requires federal agencies to meet WCAG 2.0 Level AA. The European Accessibility Act (EAA), effective June 2025, requires digital products and services to meet accessibility standards including contrast requirements. The UK Equality Act 2010 covers web accessibility, with the Public Sector Bodies Accessibility Regulations explicitly requiring WCAG 2.1 Level AA. Canada (Accessible Canada Act), Australia (Disability Discrimination Act), and many other countries have similar requirements. Non-compliance can result in lawsuits, regulatory fines, and loss of government contracts.
References
Background & Theory
History
Reviewed for accuracy by Daniel Agrici, Founder & Lead Developer · Editorial policy
Related Calculators
🧮Active Learning Ratio Calculator
Calculate active learning ratio with inputs, formulas, and instant results.
🧮Art Composition Ratio Calculator
Calculate art composition ratio with inputs, formulas, and instant results.
🧮Ceiling Height Ratio Optimizer
Calculate ceiling height ratio optimizer with inputs, formulas, and instant results.
🧮Lighting Ratio Calculator
Calculate lighting ratio with inputs, formulas, and instant results.
🧮Wall to Floor Ratio Calculator
Calculate wall to floor ratio with inputs, formulas, and instant results.
🧮Aspect Ratio Calculator
Calculate aspect ratio with inputs, formulas, and instant results.
🧮Color Brightness Calculator
Calculate color brightness with inputs, formulas, and instant results.
🧮Color Harmony Tool
Calculate color harmony tool with inputs, formulas, and instant results.