tailwind1-3  Exercise 1: A Contrast Audit
=========================================

<button id="btn0" class="bg-blue-500 text-white px-4 py-2 rounded-md">Subscribe</button>
<p id="cap0" class="text-gray-400">Caption</p>

How to measure: browsers paint oklch() colours, so the easy way to get real red-green-blue numbers is to let a canvas paint them and read the pixel back. Paste
this into the browser console on the page:

  const canvas = document.createElement('canvas'); canvas.width = canvas.height = 1;
  const ctx = canvas.getContext('2d', { willReadFrequently: true });
  const rgb = (css) => { ctx.clearRect(0, 0, 1, 1); ctx.fillStyle = '#000'; ctx.fillStyle = css; ctx.fillRect(0, 0, 1, 1); return [...ctx.getImageData(0, 0, 1, 1).data].slice(0, 3); };
  const lum = (c) => { const f = c.map(v => { v /= 255; return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }); return 0.2126 * f[0] + 0.7152 * f[1] + 0.0722 * f[2]; };
  const ratio = (a, b) => { let [x, y] = [lum(a), lum(b)]; if (x < y) [x, y] = [y, x]; return +((x + 0.05) / (y + 0.05)).toFixed(2); };
  const pair = (id, bg) => { const cs = getComputedStyle(document.getElementById(id)); return ratio(rgb(cs.color), rgb(bg ?? cs.backgroundColor)); };
  console.log('button', pair('btn0'), 'caption', pair('cap0', '#ffffff'));

Output (measured in headless Chrome):

  button 3.76 caption 2.6

Both are below 4.5:1, the WCAG AA minimum for normal-size text, so both fail. (3.76 would pass for large text, which needs 3:1, but a button label at the
default size is not large text.)

The smallest change for each is one step on the scale:

  button:  bg-blue-500 -> bg-blue-600     (white on blue-600)
  caption: text-gray-400 -> text-gray-500 (gray-500 on white)

Re-measured:

  button 5.25 caption 4.84

WHY THIS WORKS AS AN ANSWER
---------------------------
Contrast is the ratio between the relative luminance of the two colours, (lighter + 0.05) / (darker + 0.05). The shade numbers are not a contrast guarantee: they
step through lightness, so moving to a darker shade raises the ratio for light backgrounds. For white text, going from blue-500 to blue-600 raises the ratio from
3.76 to 5.25; for text on white, going from gray-400 to gray-500 raises it from 2.60 to 4.84. Nothing needs to change in the layout or the wording, only one shade
number in each class.
Keep in mind that the answer depends on the pair: gray-500 only just passes (4.84 against the 4.5 limit), so on a slightly off-white background it could fall below
the limit. Measure your actual pair, and prefer gray-600 (7.56 on white) for small or important text.