Color contrast checker

Check text and background colours against WCAG contrast.

Text colour

Background colour

Normal text, 16px. The quick brown fox jumps over the lazy dog.

Large text, 24px

Solid buttonOutline button

Large text is 24px regular or 18.66px bold and up. Transparent colours are flattened onto the background (and a transparent background onto white) before measuring.

Contrast ratio4.48:1

AA · Normal textneeds 4.5:1Fail
AA · Large textneeds 3:1Pass
AAA · Normal textneeds 7:1Fail
AAA · Large textneeds 4.5:1Fail
UI componentsneeds 3:1Pass

Nearest passing shade

Keeps hue and chroma, changes only OKLCH lightness.

Target

AA 4.5:1AAA 7:1

Adjust

TextBackground

Darker#767676 · 4.52:1

What it does

Contrast ratio with AA and AAA results for normal and large text.
Live preview of the pair as text and as a button.
Suggests the nearest lighter or darker shade that passes.

All tools