Color Contrast Checker

Check WCAG AA and AAA contrast with live samples.

FREE - NO SIGN-UP - RUNS ON YOUR DEVICE

Runs locally in your browser

In practice

What you can count on

0uploads
- Your input stays on this device
- Nothing is sent for processing
Liveoutput
- Results update in the working area
- Change inputs and compare instantly
1 tapto copy
- Copy the result
- No account or install needed

Specification

How to

1
Set both colors
Choose the text color and the background color you plan to pair.
2
Check the ratio
A sample block shows the pair at 16 and 24 pixels, with the ratio and Pass or Fail for four WCAG levels.
3
Copy the verdicts
One Copy result button takes the ratio and the four verdicts for your notes or review ticket.

Questions

Yes. The tool processes your input inside the browser tab. Nothing is sent to a processing server or stored in an account.

Yes. Adjust any available control and the result updates. Copy it only when the output matches what you need.

Current versions of Chrome, Edge, Firefox and Safari support the browser features used here. Very old browsers may lack a required API.

Background

WCAG asks for 4.5:1 on normal text and 3:1 on large text to pass AA, and 7:1 to pass AAA. Large means 24px, or 18.66px when bold.

Contrast is against the color actually behind the text, so check text on cards, buttons and images separately.
A ratio that passes still has to be readable. Thin weights are harder than the number alone suggests.

Specification of the Color Contrast Checker tool
Input	Foreground and background colors.
Output	Contrast ratio and AA or AAA results for two text sizes.
Method	WCAG relative luminance and contrast calculations.
Entering and previewing	Each color has a hex box beside the picker for pasting a brand code. The sample draws 16px regular and 24px bold in your pair.
Price	Free. Supported by clearly labeled ads outside the working area.
Where processing happens	In your browser tab. Your input is never uploaded.

Next step