Color Contrast Ratio Calculator (WCAG)

Enter your foreground and background hex colors to calculate the WCAG contrast ratio and check AA / AAA accessibility compliance for normal and large text.

Created by Luis GonzalezLast updated: May 9, 2026

How to Use This Calculator

1
Enter Hex1
Input the hexadecimal code for your first color (e.g., #222222 for dark gray text).
2
Enter Hex2
Input the hexadecimal code for your second color (e.g., #FFFFFF for a white background).
3
Review Your Results
The calculator will display the contrast ratio and WCAG pass/fail results for both normal and large text.

Example Calculation

A designer wants to check the contrast ratio between dark gray text (#222222) and a white background (#FFFFFF) for WCAG compliance.

Hex1

#222222

Hex2

#FFFFFF

Results

11.67

Tips

Prioritize Text and Interactive Elements

While overall design contrast is important, prioritize achieving WCAG AA or AAA compliance for text, links, and buttons. These are the elements users interact with most directly, and poor contrast can severely hinder usability.

Consider Dark Mode vs. Light Mode

If your application offers both dark and light modes, ensure that your color palettes maintain sufficient contrast in both themes. A color combination that passes in light mode might fail dramatically when inverted for dark mode.

Use a Minimum 4.5:1 Ratio for Normal Text

For optimal accessibility, aim for a contrast ratio of at least 4.5:1 for normal-sized text. This is the WCAG AA standard, which ensures readability for a wide range of users, including those with moderate low vision.

Ensuring Readability: Understanding WCAG Color Contrast Ratios

The Color Contrast Ratio Calculator (WCAG) is an indispensable tool for web developers and designers, instantly verifying the accessibility of color combinations for text and background elements. By computing the luminance contrast ratio between any two hexadecimal colors, it provides clear pass/fail results against WCAG (Web Content Accessibility Guidelines) AA and AAA standards for both normal and large text. For example, a common pairing of dark gray text (#222222) on a white background (#FFFFFF) yields a contrast ratio of approximately 11.67:1, comfortably passing even the stringent WCAG AAA normal text requirement of 7:1.

Ensuring Digital Accessibility with Contrast Standards

Ensuring adequate color contrast is a fundamental aspect of digital accessibility, directly impacting the usability of websites and applications for individuals with visual impairments, including low vision and various forms of color blindness. The WCAG guidelines, established by the World Wide Web Consortium (W3C), provide globally recognized benchmarks. These standards not only enhance the user experience for those with disabilities but also improve readability for all users in diverse viewing conditions, such as bright sunlight or on lower-quality screens. Adhering to these standards, particularly the 4.5:1 ratio for normal text (WCAG AA), helps organizations meet legal compliance requirements in 2025.

The Luminance Formula Behind WCAG Contrast

The WCAG contrast ratio calculation is based on the relative luminance of the two colors. Relative luminance is a measure of the perceived brightness of a color, ranging from 0 (black) to 1 (white). The formula for contrast ratio ensures that the brighter color's luminance (L1) and the darker color's luminance (L2) are compared in a standardized way, with a small constant (0.05) added to avoid division by zero and to reflect the perception of very dark colors.

L_relative = (R_linear × 0.2126) + (G_linear × 0.7152) + (B_linear × 0.0722)
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

L1 is the relative luminance of the lighter color, and L2 is the relative luminance of the darker color. R_linear, G_linear, B_linear are the linearized RGB channel values.

💡 While the math can seem complex, understanding the basic principle of comparing two values for a specific outcome is key. Our Least Common Denominator (LCD) Calculator, for example, helps find common ground in different numerical systems.

Calculating Contrast for Dark Text on White

Let's calculate the contrast ratio for dark gray text (#222222) on a white background (#FFFFFF).

Determine Relative Luminance (L):
- For white (#FFFFFF), the relative luminance (L1) is 1.0.
- For dark gray (#222222), the relative luminance (L2) is approximately 0.0404.
Apply the Contrast Ratio Formula:
- Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
- Contrast Ratio = (1.0 + 0.05) / (0.0404 + 0.05)
- Contrast Ratio = 1.05 / 0.0904 ≈ 11.615:1

The calculated contrast ratio is approximately 11.62:1. This value easily passes WCAG AA (4.5:1) and AAA (7:1) requirements for normal text.

💡 When optimizing visual elements for perception, understanding how different factors contribute to an overall effect is useful. For instance, the Least Squares Slope & Intercept Calculator can help model linear relationships in data, which can be conceptually applied to optimizing visual metrics.

The Genesis of WCAG Contrast Guidelines

The Web Content Accessibility Guidelines (WCAG) and their specific contrast standards emerged from a growing recognition in the late 1990s and early 2000s that the internet needed to be accessible to everyone, regardless of disability. The World Wide Web Consortium (W3C), through its Web Accessibility Initiative (WAI), began developing these guidelines. The 4.5:1 contrast ratio for normal text was specifically chosen based on research into visual acuity and contrast sensitivity among people with low vision, ensuring that text remains legible. These ratios were introduced and refined through WCAG 1.0 (1999) and significantly formalized in WCAG 2.0 (2008), becoming a global benchmark for digital accessibility that continues to be updated and enforced in 2025.

Frequently Asked Questions

What is a color contrast ratio?

A color contrast ratio is a numerical value that represents the difference in luminance (brightness) between two adjacent colors, typically foreground text and its background. This ratio ranges from 1:1 (no contrast, e.g., white on white) to 21:1 (maximum contrast, e.g., black on white). Higher ratios indicate greater distinction, which is crucial for readability and accessibility.

What are WCAG contrast requirements?

The Web Content Accessibility Guidelines (WCAG) specify minimum contrast ratio requirements to ensure digital content is perceivable by people with visual impairments. For normal text, a ratio of at least 4.5:1 is required for Level AA compliance, and 7:1 for Level AAA. For large text (18pt regular or 14pt bold), the requirements are 3:1 for AA and 4.5:1 for AAA. These thresholds are critical for inclusive design.

Why is good color contrast important for accessibility?

Good color contrast is vital for accessibility because it significantly improves readability for users with various visual impairments, including low vision, color blindness, and age-related vision changes. Without sufficient contrast, text and interactive elements can become indistinguishable from their backgrounds, making content difficult or impossible to consume. Adhering to WCAG contrast standards ensures broader access to digital information for approximately 1 in 12 men with color blindness and many others with visual challenges.

How does text size affect contrast requirements?

Text size directly influences WCAG contrast requirements because larger text is generally easier to read, even with slightly lower contrast. For text that is 18pt (24px) or larger, or 14pt (18.66px) and bold, the minimum contrast ratio for WCAG AA compliance drops from 4.5:1 to 3:1. This relaxed requirement acknowledges that the increased size inherently aids legibility, but sufficient contrast remains necessary for optimal accessibility.