Contrast Checker

<!--
  A WCAG contrast checker. The verdicts are the point: each threshold shows a tick or
  a cross AND the words "Pass" / "Fail", so the result never depends on the badge's
  own colour. The ratio is printed numerically too. Static snapshot.
-->
<div class="w-full max-w-sm">
  <div class="rounded-xl border border-black/10 p-4 dark:border-white/15" style="background-color:#f8fafc;color:#1e293b">
    <p class="text-base font-semibold">Sample text</p>
    <p class="text-sm">The quick brown fox.</p>
  </div>
  <div class="mt-3 flex flex-wrap items-center gap-3">
    <label class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400"><input type="color" value="#1e293b" aria-label="Text color" class="h-8 w-8 cursor-pointer rounded-md border border-black/10 bg-transparent dark:border-white/15" />Text</label>
    <label class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400"><input type="color" value="#f8fafc" aria-label="Background color" class="h-8 w-8 cursor-pointer rounded-md border border-black/10 bg-transparent dark:border-white/15" />Background</label>
    <span class="ml-auto font-mono text-sm font-semibold text-gray-900 dark:text-gray-100">14.8:1</span>
  </div>
  <ul class="mt-3 flex flex-wrap gap-2">
    <li class="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-semibold text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300">&#10003; AA Pass</li>
    <li class="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-semibold text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300">&#10003; AAA Pass</li>
  </ul>
</div>