Color Contrast Checker — WCAG AA/AAA Ratio Tool

<div class="cc-card">
  <div class="cc-preview" id="ccPreview">
    <span class="cc-big">Big Text</span>
    <span class="cc-small">The quick brown fox jumps over the lazy dog.</span>
  </div>

  <div class="cc-inputs">
    <label class="cc-field"><span>Text</span>
      <div class="cc-swatch"><input type="color" id="ccFg" value="#475569"><input type="text" id="ccFgHex" value="#475569" maxlength="7" spellcheck="false"></div>
    </label>
    <label class="cc-field"><span>Background</span>
      <div class="cc-swatch"><input type="color" id="ccBg" value="#ffffff"><input type="text" id="ccBgHex" value="#ffffff" maxlength="7" spellcheck="false"></div>
    </label>
  </div>

  <div class="cc-ratio"><strong id="ccRatio">0</strong><span>: 1 contrast ratio</span></div>

  <div class="cc-grid" id="ccGrid">
    <div class="cc-cell" data-k="aaNormal"><span>AA Normal</span><b></b></div>
    <div class="cc-cell" data-k="aaLarge"><span>AA Large</span><b></b></div>
    <div class="cc-cell" data-k="aaaNormal"><span>AAA Normal</span><b></b></div>
    <div class="cc-cell" data-k="aaaLarge"><span>AAA Large</span><b></b></div>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f1f5f9;color:#0f172a;display:flex;justify-content:center;padding:36px 18px}

.cc-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:18px;width:100%;max-width:400px;box-shadow:0 12px 34px -22px rgba(0,0,0,.3)}
.cc-preview{border-radius:12px;padding:22px 18px;display:flex;flex-direction:column;gap:8px;margin-bottom:16px;border:1px solid #e2e8f0}
.cc-big{font-size:26px;font-weight:800}
.cc-small{font-size:13.5px;line-height:1.5}

.cc-inputs{display:flex;gap:12px;margin-bottom:14px}
.cc-field{flex:1;display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#64748b}
.cc-swatch{display:flex;align-items:center;gap:8px;border:1px solid #e2e8f0;border-radius:10px;padding:6px 8px}
.cc-swatch input[type=color]{width:28px;height:28px;border:none;background:none;padding:0;cursor:pointer}
.cc-swatch input[type=text]{border:none;outline:none;font-size:13px;font-family:ui-monospace,monospace;width:100%;text-transform:uppercase;color:#0f172a}

.cc-ratio{text-align:center;margin-bottom:14px;color:#64748b;font-size:13px}
.cc-ratio strong{font-size:30px;font-weight:800;color:#0f172a;font-variant-numeric:tabular-nums}

.cc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cc-cell{border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:600;color:#475569}
.cc-cell b{font-size:11px;font-weight:800;padding:2px 8px;border-radius:20px}
.cc-cell.pass b{background:#dcfce7;color:#15803d}
.cc-cell.pass b::after{content:'PASS'}
.cc-cell.fail b{background:#fee2e2;color:#b91c1c}
.cc-cell.fail b::after{content:'FAIL'}

function clampHex(v) {
  v = v.trim(); if (v[0] !== '#') v = '#' + v;
  if (/^#[0-9a-fA-F]{3}$/.test(v)) v = '#' + v[1]+v[1]+v[2]+v[2]+v[3]+v[3];
  return /^#[0-9a-fA-F]{6}$/.test(v) ? v.toLowerCase() : null;
}
function toRgb(hex) { return [parseInt(hex.slice(1,3),16), parseInt(hex.slice(3,5),16), parseInt(hex.slice(5,7),16)]; }
// Relative luminance per WCAG 2.x.
function luminance(rgb) {
  var a = rgb.map(function (c) { c /= 255; return c <= 0.03928 ? c/12.92 : Math.pow((c+0.055)/1.055, 2.4); });
  return 0.2126*a[0] + 0.7152*a[1] + 0.0722*a[2];
}
function ratio(fg, bg) {
  var l1 = luminance(toRgb(fg)), l2 = luminance(toRgb(bg));
  var hi = Math.max(l1, l2), lo = Math.min(l1, l2);
  return (hi + 0.05) / (lo + 0.05);
}

var fg = document.getElementById('ccFg'), fgHex = document.getElementById('ccFgHex');
var bg = document.getElementById('ccBg'), bgHex = document.getElementById('ccBgHex');
var preview = document.getElementById('ccPreview');
var ratioEl = document.getElementById('ccRatio');
var cells = Array.prototype.slice.call(document.querySelectorAll('.cc-cell'));

function update() {
  var f = clampHex(fgHex.value) || fg.value;
  var b = clampHex(bgHex.value) || bg.value;
  fg.value = f; bg.value = b;
  preview.style.color = f; preview.style.background = b;
  var r = ratio(f, b);
  ratioEl.textContent = r.toFixed(2);
  var pass = { aaNormal: r >= 4.5, aaLarge: r >= 3, aaaNormal: r >= 7, aaLargeAAA: r >= 4.5, aaaLarge: r >= 4.5 };
  cells.forEach(function (cell) {
    var k = cell.getAttribute('data-k');
    var ok = pass[k];
    cell.classList.toggle('pass', !!ok);
    cell.classList.toggle('fail', !ok);
  });
}

[fg, bg].forEach(function (inp) { inp.addEventListener('input', function () { (inp === fg ? fgHex : bgHex).value = inp.value.toUpperCase(); update(); }); });
[fgHex, bgHex].forEach(function (inp) { inp.addEventListener('input', function () { var c = clampHex(inp.value); if (c) (inp === fgHex ? fg : bg).value = c; update(); }); });

update();