Contrast Ratio Checker Online

Contrast Ratio Checker Overview

This contrast ratio checker online computes WCAG AA and AAA compliance between text and background colors in real time. Contrast between foreground and background affects readability and accessibility. Standards like WCAG require certain ratios (e.g. 4.5:1, 7:1) for AA/AAA compliance.

This tool lets you enter foreground and background colors and computes the contrast ratio in real time, indicating whether WCAG requirements are met—useful for design and development checks.

How to Use

Set Foreground and Background

Choose or enter foreground (e.g. text) and background colors in HEX, RGB, etc. The page shows a live preview and the contrast value.

View Ratio and Level

The tool displays the contrast ratio (e.g. 4.5:1) and whether it meets WCAG 2.x AA (e.g. 4.5:1 for normal text, 3:1 for large) or AAA. Adjust colors until the requirement is satisfied.

Tweak and Suggestions

If contrast is too low, adjust lightness or saturation; some tools suggest “darker” or “lighter” or suggest the closest compliant color.

FAQ

How is contrast calculated?

Typically using WCAG’s relative luminance: compute luminance for each color, then (L1+0.05)/(L2+0.05) where L1 is the lighter one.

What are AA and AAA?

AA requires at least 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively. AAA improves readability and accessibility.

What about transparent colors?

With transparency, the effective color over the underlying layer must be considered; some tools support alpha or a simulated background for calculation.