Color Contrast Checker – WCAG AA/AAA Compliance Tool (Free, Browser-Based)

#webdev #tools #javascript #a11y

Color Contrast Checker

Built a free browser-based tool to check color contrast ratios for WCAG 2.1 AA and AAA compliance: devnestio.pages.dev/color-contrast-checker/

Features

Foreground + background color pickers with hex input
Live contrast ratio display (e.g. 12.63:1)
All four WCAG levels checked at once:
- AA Normal (≥ 4.5:1)
- AA Large text (≥ 3:1)
- AAA Normal (≥ 7:1)
- AAA Large text (≥ 4.5:1)
Live text preview — see how your colors actually look
Swap button — instantly flip fg/bg
RGB + luminance display for debugging

The Math (WCAG Relative Luminance)

The contrast ratio formula from WCAG 2.1:

contrast = (L1 + 0.05) / (L2 + 0.05)

Where L1 is the lighter color and L2 is the darker. Each color's relative luminance is calculated by linearizing the sRGB values:

function linearize(c) {
  c /= 255;
  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
}

function luminance({ r, g, b }) {
  return 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b);
}