Contrast Checker

What is Contrast Checker?

A contrast checker that computes the WCAG contrast ratio between a foreground and background colour and reports whether it clears AA (4.5:1) and AAA (7:1), applying the relaxed 3:1 and 4.5:1 thresholds to large text. The calculation runs entirely in the browser.

How to use Contrast Checker

1. 1Set the foreground (text) colour and the background colour.
2. 2Read the contrast ratio and the AA / AAA verdicts.
3. 3Use the preview panel to sanity-check how it actually looks; small type depends far more on high contrast.
4. 4When a pair fails, adjust lightness first rather than reaching for bolder or bigger text.

How do I do this in code?

Use the tool above for one-off work; for anything you repeat, move it into a script or your project.

// WCAG relative luminance
const luminance = ({ r, g, b }) => {
  const f = (c) => {
    const s = c / 255;
    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
  };
  return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
};

const ratio = (a, b) => {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
  return (hi + 0.05) / (lo + 0.05);
};

Frequently asked questions