Check contrast

Check foreground and background colors against WCAG contrast thresholds.

freeworks offlinenothing uploaded
ToolContrast Checker
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

Relative luminance is computed for foreground and background, then the lighter value plus 0.05 is divided by the darker value plus 0.05. The ratio is compared with WCAG thresholds that vary by text size and weight.

  • WCAG AA uses 4.5:1 for normal text and 3:1 for large text.

Worked example

Black on White
Check contrast ratio of black text on white background
Input
											Input1: #000000
Input2: #FFFFFF
Output
												Original: Foreground: #000000
Modified: Background: #FFFFFF

Contrast Ratio: 21.00:1

WCAG AA Normal Text (4.5:1): PASS
WCAG AA Large Text (3:1): PASS
WCAG AAA Normal Text (7:1): PASS
WCAG AAA Large Text (4.5:1): PASS

When to use this

Design tokens, component states, and link colors are checked for accessibility.

Edge cases

  • Transparent foregrounds must be composited before measuring.
  • Large-text thresholds differ from normal-text thresholds.
  • A passing ratio does not guarantee distinguishability for every color-vision condition.

References