Contrast Checker

WCAG 2.x: linearize sRGB at 0.04045, L = 0.2126R + 0.7152G + 0.0722B.

Your inputs stay in your browser. No account required.

Loading tool controls…

How Contrast Checker works

WCAG 2.x: linearize sRGB at 0.04045, L = 0.2126R + 0.7152G + 0.0722B. Contrast = (lighter L + 0.05)/(darker L + 0.05). AA normal text requires 4.5:1; large text 3:1.

Try an example

Black on white → 21:1.

Good to know

Pass/fail uses the unrounded ratio. Large means at least 18pt regular or 14pt bold. Opaque solid colours only; no transparency or gradients.

Your privacy

Processing happens on this device for this tool. We do not upload your input, put it in share links or save it to your favourites. Closing this tab discards the working input; downloaded results remain wherever you save them.

When this tool is useful

Use the contrast checker to test a foreground/background pair against the documented WCAG relative-luminance ratios.

How to use it

Choose the text and background colours or enter their exact colour values.
Read the ratio and the normal-text, large-text and UI guidance.
Test the pair in the real component, including focus, hover, disabled and dark-mode states.

Checks before you rely on the result

A ratio is a starting point, not a complete accessibility audit.
Font size, weight, anti-aliasing, images and surrounding colours affect real readability.
Do not communicate status by colour alone; pair colour with text, shape or another cue.

This page is maintained with the tool implementation and its deterministic tests. If the result looks wrong, report the issue with a non-sensitive example.

Read the Contrast Checker instructions

A useful next step

Colour Picker

HEX ↔ RGB

Gradient Generator

Made for clarity. Built to be useful.Report an issue