← ReactContrast Validation

ForegroundBackground

import kleur from "@driangle/kleur";

function ContrastBadge({ fg, bg }) {
  const ratio = kleur.contrast(
    "#f5f5f5",
    "#3a6bd5"
  );
  // => 4.54

  const passAA = ratio >= 4.5;
  // => true

  return (
    <span className={passAA ? "pass" : "fail"}>
      {ratio.toFixed(2)}:1
      {passAA ? "AA" : "Fail"}
    </span>
  );
}

The quick brown fox jumps over the lazy dogSmall text sample for AA compliance testing

4.54:1

AA LargePass≥ 3.0:1

AAPass≥ 4.5:1

AAAFail≥ 7.0:1