Taxa contraste cores

WCAG: (L1+0.05)/(L2+0.05). AA=4.5:1, AAA=7:1.
Created by
Renato Passos, Eng. de Software
Reviewed by
Renato Passos, Eng. de Software

Last updated: Apr 18, 2026

Taxa contraste
6,33

Formula

(L1+0.05)/(L2+0.05)

About this calculator

The color contrast ratio calculator checks accessibility between color pairs in web or graphic interfaces. It uses the formula (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are linear luminance values. Results of 4.5:1 or higher meet WCAG AA standards, while 7:1 or more fulfill AAA. This ensures readability, particularly for text on light or dark backgrounds.

To use, input colors in hexadecimal or RGB format. The tool converts these to linear luminance values, adds 0.05 to avoid division by zero, and calculates the ratio. Ratios below 3:1 are unacceptable. Color order matters: typically, the background color should have higher luminance.

Applicable to web projects, apps, and graphic design, this tool prevents inadequate contrast that hinders readability for low-vision users. Test both color options as background/text. Update colors if the ratio is below 4.5:1 to meet minimal accessibility requirements.

Note: don't rely solely on numeric contrast. Validate combinations on different screens and lighting conditions. Browser developer tools can verify practical results. For small text, prioritize AAA compliance for enhanced accessibility.

Frequently asked questions

How does the contrast formula work?

The formula (L1 + 0.05) / (L2 + 0.05) compares linear luminance values. The 0.05 addition prevents errors in extreme contrasts, ensuring stable calculations.

What's the difference between AA and AAA standards?

AA requires a minimum 4.5:1 ratio for normal text, while AAA demands 7:1. Higher levels offer better accessibility but may look visually challenging to implement.

Do I have to follow AA or AAA requirements legally?

It depends on your target audience. AA is often the legal minimum in many countries, but AAA is recommended for users with severe visual impairments.

Why does my visual contrast look good but the calculator shows low ratio?

Human perception isn't linear. Luminance-based tools are more accurate for accessibility than visual judgment alone.

How to choose colors with proper contrast?

Use pre-defined palettes like Material Design or color pickers with automatic contrast validation to ensure accessibility compliance.

Other Design calculators