Contrast Checker

CSS

WCAG AA and AAA contrast ratios for text and background colours.

Colours

HEX, RGB(A) or HSL(A). A translucent foreground is composited over the background first.

Foreground (text)

Background

This pair already meets AA for normal text.

Nothing to fix: 4.54:1 passes AA for normal text.

Click to load. Includes this app's own light and dark theme tokens.

Nothing leaves this page and nothing is stored.

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

Large text, 24px bold

Outline buttonSolid button

Contrast ratio

4.54:1

AA normal text ≥ 4.5:1Pass

AAA normal text ≥ 7:1Fail

AA large text ≥ 3:1Pass

AAA large text ≥ 4.5:1Pass

AA UI components ≥ 3:1Pass

Foreground

#767676

Background

#ffffff

One background, one text colour per box. Each is graded against WCAG 2.x as in the checker above.

Background

Text colours

Enter adds a field below; pasting a list fills separate fields.

Enter one or more text colours to grade them against the background.