WCAG Color Contrast Ratio Calculator

Enter your foreground (text) and background RGB values to calculate the WCAG 2.1 contrast ratio and check AA/AAA compliance for normal and large text.

Created by Luis GonzalezLast updated: May 9, 2026

How to Use This Calculator

1
Enter the foreground color's RGB values
Input the Red, Green, and Blue channel values (0-255) for your text or UI element color.
2
Enter the background color's RGB values
Input the Red, Green, and Blue channel values (0-255) for the background color behind your element.
3
Review the contrast ratio and compliance
The calculator instantly shows the contrast ratio and indicates whether the color pair passes WCAG AA and AAA accessibility standards for normal and large text.

Example Calculation

A web designer is using the WCAG color contrast ratio calculator to check if black text on a white background meets the highest accessibility standards.

Foreground Red

Foreground Green

Foreground Blue

Background Red

255

Background Green

255

Background Blue

255

Results

Tips

Aim for AA, Strive for AAA

WCAG Level AA is the generally accepted standard for most websites. Level AAA is a higher standard that is more difficult to meet but provides a more accessible experience for users with low vision. The ratio for AA is 4.5:1 and for AAA is 7:1 for normal text.

Large Text is More Forgiving

The contrast requirement for large text (defined as 18pt/24px normal or 14pt/18.5px bold) is lower. The AA threshold for large text is 3:1, and the AAA threshold is 4.5:1.

Don't Rely on Color Alone

Good accessibility means not using color as the *only* way to convey information. Use icons, text labels, or underlines in addition to color changes to indicate states like 'error' or 'selected'.

Ensuring Web Accessibility with Proper Color Contrast

The WCAG Color Contrast Ratio Calculator is an indispensable tool for web designers, developers, and content creators committed to building accessible websites. It measures the difference in perceived brightness (luminance) between two colors, providing a precise ratio that determines if text is readable for people with visual impairments. By checking a color pair against the Web Content Accessibility Guidelines (WCAG) 2.1 standards, you can ensure your site is usable by the widest possible audience. The maximum possible contrast, black on white, yields a ratio of 21:1.

Why Contrast Ratios Are a Legal and Ethical Imperative

In many countries, web accessibility is a legal requirement, and failure to comply with standards like WCAG can result in lawsuits. Ethically, designing with good contrast is simply the right thing to do, as it ensures that content is not locked away from individuals with low vision or color deficiencies. Low contrast is one of the most frequent accessibility barriers on the web, making text difficult or impossible to read for millions of users. Using a tool to verify your color choices against established benchmarks like the 4.5:1 ratio for AA compliance is a fundamental step in responsible web design.

The WCAG Formula for Relative Luminance

The calculator first determines the relative luminance for both the foreground and background colors. Luminance is a measure of perceived brightness. It then plugs these values into the contrast ratio formula.

Calculate Luminance (L): Each color's R, G, and B values are first normalized (divided by 255) and then run through a specific formula to find its luminance.
Calculate Contrast Ratio: The formula compares the luminance of the lighter color (L1) and the darker color (L2).
```
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
```

The + 0.05 term is added to prevent division by zero if one of the colors is black. The resulting ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast).

💡 Creating a harmonious and accessible design involves both color and typography. Our Font Scale Ratio Calculator helps you build a consistent and readable typographic hierarchy.

Verifying a Standard Black-on-White Design

A designer wants to confirm that their choice of pure black text on a pure white background meets all accessibility standards.

Inputs:
- Foreground Color: R=0, G=0, B=0 (Black)
- Background Color: R=255, G=255, B=255 (White)
Luminance Calculation:
- The luminance of black is calculated as 0.
- The luminance of white is calculated as 1.
Contrast Ratio Calculation:
- L1 (lighter color) = 1
- L2 (darker color) = 0
- Ratio = (1 + 0.05) / (0 + 0.05) = 1.05 / 0.05 = 21

The result is 21:1. This ratio far exceeds the 7:1 requirement for the highest WCAG standard (AAA), confirming it is an excellent choice for readability.

💡 Web design and development often involve applying fundamental mathematical principles. The Fraction Addition Calculator is another tool that handles basic math with precision.

Beyond the Ratio: Perceiving Color Contrast

It is important to remember that the WCAG formula is an algorithm that approximates human perception; it is not a perfect model. The calculation is based entirely on relative luminance and does not account for color hue. Consequently, some color combinations, particularly involving highly saturated colors, might technically pass the 4.5:1 ratio but still be difficult for people with certain types of color vision deficiency (like deuteranopia or protanopia) to distinguish. This is why automated tools are a great starting point, but manual testing and user feedback remain essential components of a robust accessibility strategy.

The Next Generation: APCA Contrast

The web accessibility community is actively developing a more advanced method for calculating contrast called the Accessible Perceptual Contrast Algorithm (APCA), which is slated for inclusion in the future WCAG 3.0 standard. Unlike the current simple ratio, APCA is a more sophisticated model that takes into account factors like font weight, text size, and the specific color pair in a way that more closely aligns with modern research on visual perception. While the current WCAG 2.1 ratio is the governing standard today, APCA represents the future of ensuring that digital content is truly readable for everyone.

Frequently Asked Questions

What is a good color contrast ratio?

A good color contrast ratio meets the WCAG 2.1 Level AA standard, which is 4.5:1 for normal-sized text. An excellent ratio meets the Level AAA standard of 7:1. These thresholds ensure that text is readable for users with moderate low vision or color vision deficiencies.

How is the WCAG contrast ratio calculated?

The contrast ratio is calculated from the relative luminance of the foreground and background colors. The 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. Luminance itself is calculated from the sRGB values of the colors.

Why is color contrast important for accessibility?

Sufficient color contrast is crucial for web accessibility because it ensures that people with visual impairments, including low vision and color blindness, can read text and distinguish user interface elements. It is one of the most common and most critical accessibility issues on the web.