Check colour contrast

Pick two colours and see the ratio, whether it passes AA and AAA, and what the combination actually looks like — including with Japanese text, which is denser and harder to read at low contrast.

Runs entirely in your browser
Works offline
No upload
No sign-up
No watermark

Loading the tool…

How it works

Choose a foreground and background colour, or paste hex values.
Read the ratio and the four verdicts.
Adjust until body text passes 4.5:1.

Why nothing is uploaded

Every operation on this page is done by code running inside your browser tab, using the same engine that renders web pages. The file is read from disk into your tab’s memory, transformed there, and written back out as a download. It is never sent anywhere — not to us, not to a third party.

Verify it yourself

Open your browser’s developer tools (F12) and select the Network tab.
Load your file and run the tool.
The only requests you will see are the tool’s own code and, once cached, none at all.

Proof it stays local →

Frequently asked questions

Which threshold applies to me?

4.5:1 for normal body text, 3:1 for text at 24px or above (19px if bold) and for interface parts like input borders and icons, 7:1 for AAA. If you only remember one number, remember 4.5.

My design passes but still looks hard to read.

Contrast ratio does not measure font weight, size or letter spacing, and thin light type at 4.5:1 is genuinely uncomfortable. The preview panel is there so you can judge with your eyes as well as the number — particularly for Japanese, where dense kanji at small sizes needs more contrast than the formula demands.