Colour Contrast

Visual difference between foreground/background.

html

<div class="contrast-demo" data-pairing="pass">
  <p class="contrast-demo__sample" style="font-size:18px;">The quick brown fox jumps</p>
  <p class="contrast-demo__caption"></p>
</div>
<style>
.contrast-demo { width: 320px; padding: 24px; border-radius: 12px; font-family: system-ui, sans-serif; background: #FAF7F2; box-sizing: border-box; }
.contrast-demo__sample { margin: 0 0 12px; line-height: 1.4; }
.contrast-demo__sample[data-bold="true"] { font-weight: 700; }
.contrast-demo[data-pairing="pass"] .contrast-demo__sample { color: #241430; }
.contrast-demo[data-pairing="borderline"] .contrast-demo__sample { color: #909090; }
.contrast-demo[data-pairing="fail"] .contrast-demo__sample { color: #E8A020; }
.contrast-demo__caption { margin: 0; font-size: 13px; color: #241430; border-top: 1px solid #24143022; padding-top: 10px; }
.contrast-demo[data-pairing="pass"] .contrast-demo__caption::after { content: "16.1 : 1 \2014 passes AAA"; font-weight: 600; color: #1a7a44; }
.contrast-demo[data-pairing="borderline"] .contrast-demo__caption::after { content: "3.0 : 1 \2014 large text only, fails AA body text"; font-weight: 600; color: #a06a00; }
.contrast-demo[data-pairing="fail"] .contrast-demo__caption::after { content: "2.1 : 1 \2014 fails AA"; font-weight: 600; color: #b3261e; }
</style>

tailwind

<div class="contrast-tw contrast-tw--pass rounded-xl box-border" data-pairing="pass" style="width:320px;padding:24px;background:#FAF7F2;font-family:system-ui,sans-serif">
  <p class="contrast-tw__sample m-0 mb-3 leading-normal" style="font-size:18px;">The quick brown fox jumps</p>
  <p class="contrast-tw__caption m-0 text-[13px] border-t pt-2.5" style="border-color:#24143022"></p>
</div>
<style>
.contrast-tw--pass .contrast-tw__sample { color: #241430; }
.contrast-tw--borderline .contrast-tw__sample { color: #909090; }
.contrast-tw--fail .contrast-tw__sample { color: #E8A020; }
.contrast-tw--pass .contrast-tw__caption::after { content: "16.1 : 1 \2014 passes AAA"; font-weight: 600; color: #1a7a44; }
.contrast-tw--borderline .contrast-tw__caption::after { content: "3.0 : 1 \2014 large text only, fails AA body text"; font-weight: 600; color: #a06a00; }
.contrast-tw--fail .contrast-tw__caption::after { content: "2.1 : 1 \2014 fails AA"; font-weight: 600; color: #b3261e; }
</style>

react

export function ColourContrast({
  sampleText = "The quick brown fox jumps",
  pairing = "pass",
  fontSize = 18,
  bold = false,
}) {
  const info = {
    pass: { color: "#241430", label: "16.1 : 1 \u2014 passes AAA", note: "#1a7a44" },
    borderline: { color: "#909090", label: "3.0 : 1 \u2014 large text only, fails AA body text", note: "#a06a00" },
    fail: { color: "#E8A020", label: "2.1 : 1 \u2014 fails AA", note: "#b3261e" },
  }[pairing];
  return (
    <div style={{ width: 320, padding: 24, borderRadius: 12, background: "#FAF7F2", boxSizing: "border-box", fontFamily: "system-ui, sans-serif" }}>
      <p style={{ margin: "0 0 12px", lineHeight: 1.4, fontSize, fontWeight: bold ? 700 : 400, color: info.color }}>{sampleText}</p>
      <p style={{ margin: 0, fontSize: 13, borderTop: "1px solid #24143022", paddingTop: 10, fontWeight: 600, color: info.note }}>{info.label}</p>
    </div>
  );
}