One order card, six viewing conditions
The same card on a good screen indoors, and under five conditions it will meet: a projector, the sun, a night-shift setting, grayscale and paper. Each is a rough simulation. Under each card, the contrast of every pair as that view gets it: text needs 4.5:1, the progress bar 3:1 against its track.
Your system is using forced colors now. The cards keep their colors so you can compare them; the rest of the page uses your palette.
1. As designed A good screen, indoors.
Order 4471: Trailhead Fleece
Placed October 24. Updated 2 hours ago.
✓ Shipped
Track the package
View order
Body text 14.9:1 Updated time 5.5:1 Link 7.5:1 Shipped badge 6.2:1 View order 5.1:1 Progress bar 3.7:1
2. Projector, roughly contrast(0.65) saturate(0.6): black lifts to gray, white dims, color drains.
Order 4471: Trailhead Fleece
Placed October 24. Updated 2 hours ago.
✓ Shipped
Track the package
View order
3. Sunlight, roughly contrast(0.6) brightness(1.3): glare adds light to text and background alike.
Order 4471: Trailhead Fleece
Placed October 24. Updated 2 hours ago.
✓ Shipped
Track the package
View order
4. Night shift, roughly Green and blue turned down: a warmer white point.
Order 4471: Trailhead Fleece
Placed October 24. Updated 2 hours ago.
✓ Shipped
Track the package
View order
5. Grayscale grayscale(1): a grayscale setting, an e-ink reader or a gray printout.
Order 4471: Trailhead Fleece
Placed October 24. Updated 2 hours ago.
✓ Shipped
Track the package
View order
6. Print preview, sketched Backgrounds dropped, as browsers print by default; the bar kept with print-color-adjust: exact.
Order 4471: Trailhead Fleece
Placed October 24. Updated 2 hours ago.
✓ Shipped
Track the package
View order
These are rough simulations. A real projector, sky or night-shift setting depends on the hardware, its settings and the room, and printers differ by ink, paper and driver. What the simulations show reliably is that pairs with narrow margins fail first; the exact order depends on the colors, which is why the gray "Updated time" line, 5.5:1 indoors, ends up below the 5.1:1 button. The words carry the meaning in every view: "Shipped" with a check, "Step 3 of 4" beside the bar, an underlined link.
Print this page to see the real print rule: card 1 alone, with the progress bar kept by print-color-adjust: exact.