Skip to content
littlekit.app
All tools

Contrast checker

Check text contrast with live reading samples and WCAG AA and AAA thresholds.

A pair of colors

Make every word
easy to read.

Good contrast makes text easier to read in everyday situations. Try your own foreground and background to see the difference.

This paragraph uses normal-size text.
HEX, RGB or HSL · alpha supported
HEX, RGB or HSL · alpha supported

Background must be opaque. Foreground transparency is blended over it.

9.90:1Contrast ratio
AA normal ≥ 4.5:1Pass
AA large ≥ 3:1Pass
AAA normal ≥ 7:1Pass
AAA large ≥ 4.5:1Pass
Processed on your device

How it works & useful details

How to use this tool

Choose foreground and background colors, then inspect both reading samples and the pass/fail table.

Supported values and limitations

Uses WCAG 2.2 relative sRGB luminance. Normal text needs 4.5:1 for AA and 7:1 for AAA; large text needs 3:1 and 4.5:1 respectively. Large text means at least 24 CSS px regular or 18⅔ CSS px bold. Foreground alpha is composited over an opaque background. Thresholds use the unrounded ratio.

WCAG contrast guidance