Contrast Ratio Checker - WCAG AA/AAA Color Contrast (Free)

How to use

Enter the text color — Pick the foreground (text) color with the color picker or a HEX value (#RRGGBB).
Enter the background color — Pick the background color the same way.
Read the result — The contrast ratio and AA/AAA compliance for normal and large text update instantly.

Frequently Asked Questions

How is the contrast ratio calculated?

It uses the relative luminance defined by WCAG 2.1: (lighter luminance + 0.05) / (darker luminance + 0.05). All computation runs in your browser with JavaScript.

What is the difference between AA and AAA?

For normal text, AA requires at least 4.5:1 and AAA at least 7:1. For large text (about 18pt/24px or bold 14pt/18.66px and above), AA requires 3:1 and AAA 4.5:1. This tool shows each result separately.

Are the colors I enter sent to a server?

No. Color input, ratio calculation, compliance check, and preview all happen in your browser. Nothing is sent to a server.