Contrast


Several situations where contrast might be an issue.


At what line does the contrast between text and background become insufficient?

  1. 1. Cras justo odio
  2. 2. Dapibus ac facilisis in
  3. 3. Morbi leo risus
  4. 4. Porta ac consectetur ac
  5. 5. Vestibulum at eros
  6. 6. Cras justo odio
  7. 7. Dapibus ac facilisis in
  8. 8. Morbi leo risus
  9. 9. Porta ac consectetur ac
  10. 10. Morbi leo risus
  11. 11. Morbi leo risus
  12. 12. Dapibus ac risus

Here is the palette for alerts of a popular framework. Do they all have good contrast?


Background images are hard!

Transformixr

Where we turn people into widgets!


Focus treatment of controls is tricky! Spot the problems by tabbing through.

1. Framework (BS4) focus

@

2. Framework (BS4) focus, with a twist

@

3. Native Browser focus

@
A link

4. Native Browser focus with a twist! (the twist being #00274c, the bane of our existence)

@
A link

5. App CSS Browser focus (overriding BS4)

@