One card, five viewers

The same product card as the designer drew it, and as four other readers may get it. Under each card, the contrast of every text pair as that reader gets it; the WCAG minimum for this size of text is 4.5:1.

Your system is using forced colors now. Cards 1 to 4 keep their colors so you can compare them; card 5 is drawn in your own palette by your browser.

  1. 1. As designedThe designer's colors on a good screen, indoors.

    Sale: 25% off

    Trailhead Fleece

    $29.99 was $39.99

    • ✓ In stock: S, M, L
    • ✕ Sold out: XL
    • S
    • M
    • L
    • XL sold out
    • Body text14.9:1
    • Sale badge5.1:1
    • Add to cart11.4:1
    • In stock6.2:1
    • Sold out6.6:1
    • Sold-out size4.7:1
  2. 2. Deuteranopia, approximatedThrough an SVG feColorMatrix (Machado et al., 2009). Red and green fall together.

    Sale: 25% off

    Trailhead Fleece

    $29.99 was $39.99

    • ✓ In stock: S, M, L
    • ✕ Sold out: XL
    • S
    • M
    • L
    • XL sold out
    • Body textneeds JavaScript
    • Sale badgeneeds JavaScript
    • Add to cartneeds JavaScript
    • In stockneeds JavaScript
    • Sold outneeds JavaScript
    • Sold-out sizeneeds JavaScript
  3. 3. Grayscalefilter: grayscale(1), as a grayscale display setting or a gray printout shows it.

    Sale: 25% off

    Trailhead Fleece

    $29.99 was $39.99

    • ✓ In stock: S, M, L
    • ✕ Sold out: XL
    • S
    • M
    • L
    • XL sold out
    • Body textneeds JavaScript
    • Sale badgeneeds JavaScript
    • Add to cartneeds JavaScript
    • In stockneeds JavaScript
    • Sold outneeds JavaScript
    • Sold-out sizeneeds JavaScript
  4. 4. Sunlight, roughlycontrast(0.6) brightness(1.3): a rough simulation of glare washing out a phone.

    Sale: 25% off

    Trailhead Fleece

    $29.99 was $39.99

    • ✓ In stock: S, M, L
    • ✕ Sold out: XL
    • S
    • M
    • L
    • XL sold out
    • Body textneeds JavaScript
    • Sale badgeneeds JavaScript
    • Add to cartneeds JavaScript
    • In stockneeds JavaScript
    • Sold outneeds JavaScript
    • Sold-out sizeneeds JavaScript
  5. 5. Forced colors, sketchedThe tokens swapped for system colors, as a Windows contrast theme would. Backgrounds go; borders and words stay.

    Sale: 25% off

    Trailhead Fleece

    $29.99 was $39.99

    • ✓ In stock: S, M, L
    • ✕ Sold out: XL
    • S
    • M
    • L
    • XL sold out
    • Body textneeds JavaScript
    • Sale badgeneeds JavaScript
    • Add to cartneeds JavaScript
    • In stockneeds JavaScript
    • Sold outneeds JavaScript
    • Sold-out sizeneeds JavaScript