#063 · CSS Developer Tool

Contrast Checker

Measure color contrast accurately using relative luminance and get WCAG pass/fail results for text and interface components.

Developer Input

Foreground and background

Live Preview

Normal and large text

Normal text preview

Large bold text preview

How to use this developer tool

  1. Enter foreground and background colors.
  2. Run the contrast check.
  3. Review WCAG results for normal, large, and UI text.
  4. Adjust either color and test again.

What this developer tool does

Calculates relative luminance using linearized sRGB values and applies WCAG contrast thresholds.

Parse color → composite alpha → linearize sRGB → compute luminance → calculate contrast ratio → evaluate thresholds.

A ratio of at least 4.5:1 is required for typical body text under WCAG AA.

Example

Foreground #ffffff on background #8b5cf6.

Tips for better output

  • Test hover, focus, and disabled states separately.
  • Do not rely on color alone to communicate status.
  • Use 7:1 when targeting AAA for normal text.

FAQ

Does this color combination pass WCAG AA contrast requirements?

The output reports AA pass or fail for normal text and large text separately.

What contrast ratio is required for normal website text?

WCAG AA generally requires at least 4.5:1 for normal text.

How do I fix a color that fails WCAG contrast?

Darken the darker color or lighten the lighter color until the ratio passes.

Is white or black text better on this background color?

The output recommends black or white using background luminance.

How do I calculate contrast for transparent text colors?

Transparent foreground colors are composited over the supplied background before contrast is calculated.

Supported formats and output

HEX, RGB(A), HSL(A), and selected named colors. Output is JSON.