tailwind1-8  Exercise 1: A Card That Works in Both Modes
=========================================================

First version (the caption and link keep the same colour in both modes):

<div class="rounded-xl border border-gray-200 bg-white p-4 text-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100">
  <h2 class="text-lg font-semibold">Card heading</h2>
  <p class="text-gray-500">A grey caption.</p>
  <a href="#" class="text-blue-600">A link</a>
</div>

Measure each text colour against the card's background in both modes. In DevTools use Rendering > "Emulate CSS media feature prefers-color-scheme" to switch modes, and
the contrast snippet from chapter 3, Exercise 1 (it paints the colours on a canvas and applies the WCAG formula).

Measured with the emulated system setting:

  pair                                      light mode        dark mode
  heading   gray-900 on white / gray-100 on gray-900      17.75 pass       16.13 pass
  caption   gray-500 in both modes                          4.84 pass        3.67 FAIL
  link      blue-600 in both modes                          5.25 pass        3.38 FAIL

The caption and the link pass on white and fail on the dark surface (4.5:1 is the minimum for normal-size text). The smallest fix is one dark: class on each, moving to the lighter
end of the same colour:

<div class="rounded-xl border border-gray-200 bg-white p-4 text-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100">
  <h2 class="text-lg font-semibold">Card heading</h2>
  <p class="text-gray-500 dark:text-gray-400">A grey caption.</p>
  <a href="#" class="text-blue-600 dark:text-blue-400">A link</a>
</div>

Re-measured:

  caption   gray-400 on gray-900     6.82 pass
  link      blue-400 on gray-900     6.72 pass
  (light mode is unchanged: 4.84 and 5.25)

WHY THIS WORKS AS AN ANSWER
---------------------------
A shade number is not a contrast guarantee, it is a position on a lightness scale, and the right end of the scale depends on the background. Text that is dark enough for white (500 or 600) is too
dark for a near-black surface, so the pair gets lighter in dark mode: gray-500 becomes gray-400 and blue-600 becomes blue-400. gray-400 passes comfortably on gray-900 (6.82) while gray-500 does not (3.67).
The border changes too (border-gray-200 on white becomes dark:border-gray-700) for a different reason: the card's edge needs to stay visible, and in dark mode that is better done with a lighter border than with a
shadow, since a shadow (black at about 10% opacity) is nearly invisible on a dark surface.