Contrast

Difference between visual elements.

html

<div class="ct-wrap" data-pair="ink-paper" role="img" aria-label="A text sample against its background, with the measured WCAG contrast ratio and pass or fail stated as text">
  <div class="ct-sample" style="border-radius:10px;font-size:15px;font-weight:400;">The quick brown fox</div>
  <p class="ct-threshold">Required for normal text: 4.5:1</p>
  <p class="ct-verdict ct-verdict--ink-paper">Measured ratio: 16.1:1 &mdash; PASS</p>
  <p class="ct-verdict ct-verdict--gold-paper">Measured ratio: 2.1:1 &mdash; FAIL</p>
  <p class="ct-verdict ct-verdict--mint-paper">Measured ratio: 1.3:1 &mdash; FAIL</p>
</div>
<style>
.ct-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }
.ct-sample { padding: 20px; text-align: center; box-sizing: border-box; background: #FAF7F2; border: 1.5px solid #24143022; }
.ct-threshold { margin: 10px 0 0; font-size: 12px; color: #241430cc; }
.ct-verdict { display: none; margin: 4px 0 0; font-size: 13px; font-weight: 700; }
[data-pair="ink-paper"] .ct-sample { color: #241430; }
[data-pair="ink-paper"] .ct-verdict--ink-paper { display: block; color: #1a7a3d; }
[data-pair="gold-paper"] .ct-sample { color: #E8A020; }
[data-pair="gold-paper"] .ct-verdict--gold-paper { display: block; color: #b3261e; }
[data-pair="mint-paper"] .ct-sample { color: #A8E6C1; }
[data-pair="mint-paper"] .ct-verdict--mint-paper { display: block; color: #b3261e; }
</style>

tailwind

<div class="ct-tw font-sans text-[#241430] w-[300px]" data-pair="ink-paper" role="img" aria-label="A text sample against its background, with the measured WCAG contrast ratio and pass or fail stated as text">
  <div class="ct-tw-sample p-5 text-center box-border bg-[#FAF7F2] border-[1.5px] border-[#24143022]" style="border-radius:10px;font-size:15px;font-weight:400;">The quick brown fox</div>
  <p class="mt-2.5 text-xs text-[#241430]/80">Required for normal text: 4.5:1</p>
  <p class="ct-tw-verdict-ink hidden mt-1 text-sm font-bold text-[#1a7a3d]">Measured ratio: 16.1:1 &mdash; PASS</p>
  <p class="ct-tw-verdict-gold hidden mt-1 text-sm font-bold text-[#b3261e]">Measured ratio: 2.1:1 &mdash; FAIL</p>
  <p class="ct-tw-verdict-mint hidden mt-1 text-sm font-bold text-[#b3261e]">Measured ratio: 1.3:1 &mdash; FAIL</p>
</div>
<style>
.ct-tw[data-pair="ink-paper"] .ct-tw-sample { color: #241430; }
.ct-tw[data-pair="ink-paper"] .ct-tw-verdict-ink { display: block; }
.ct-tw[data-pair="gold-paper"] .ct-tw-sample { color: #E8A020; }
.ct-tw[data-pair="gold-paper"] .ct-tw-verdict-gold { display: block; }
.ct-tw[data-pair="mint-paper"] .ct-tw-sample { color: #A8E6C1; }
.ct-tw[data-pair="mint-paper"] .ct-tw-verdict-mint { display: block; }
</style>

react

export function Contrast({
  pair = "ink-paper",
  largeText = false,
  radius = 10,
  sampleText = "The quick brown fox",
}) {
  const info = {
    "ink-paper": { color: "#241430", ratio: "16.1:1", pass: true },
    "gold-paper": { color: "#E8A020", ratio: "2.1:1", pass: false },
    "mint-paper": { color: "#A8E6C1", ratio: "1.3:1", pass: false },
  }[pair];
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 300 }}
      role="img" aria-label="A text sample against its background, with the measured WCAG contrast ratio and pass or fail stated as text">
      <div style={{ padding: 20, textAlign: "center", boxSizing: "border-box", background: "#FAF7F2", border: "1.5px solid #24143022",
        borderRadius: radius, color: info.color, fontSize: largeText ? 24 : 15, fontWeight: largeText ? 700 : 400 }}>
        {sampleText}
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc" }}>
        Required for {largeText ? "large" : "normal"} text: {largeText ? "3.0" : "4.5"}:1
      </p>
      <p style={{ marginTop: 4, fontSize: 13, fontWeight: 700, color: info.pass ? "#1a7a3d" : "#b3261e" }}>
        Measured ratio: {info.ratio} &mdash; {info.pass ? "PASS" : "FAIL"}
      </p>
    </div>
  );
}