Fix WCAG accessibility contrast of label presets

Ensure label color presets pass accessibility contrast standards

Label Background Text AA AAA
image #009966 #ffffff ❌ ❌
image #8fbc8f #ffffff ❌ ❌
image #3cb371 #ffffff ❌ ❌
image #00b140 #ffffff ❌ ❌
image #013220 #ffffff ✔️ ✔️
image #6699cc #ffffff ❌ ❌
image #0000ff #ffffff ✔️ ✔️
image #e6e6fa #1f1f1f ✔️ ✔️
image #9400d3 #ffffff ✔️ ❌
image #330066 #ffffff ✔️ ✔️
image #808080 #ffffff ❌ ❌
image #36454f #ffffff ✔️ ✔️
image #f7e7ce #1f1f1f ✔️ ✔️
image #c21e56 #ffffff ✔️ ❌
image #cc338b #ffffff ✔️ ❌
image #dc143c #ffffff ✔️ ❌
image #ff0000 #ffffff ❌ ❌
image #cd5b45 #ffffff ❌ ❌
image #eee600 #ffffff ❌ ❌
image #ed9121 #ffffff ❌ ❌
image #c39953 #ffffff ❌ ❌

Possible approaches (not exclusive):

  1. Don’t add any text shadows
  2. Add a text shadow just for text over orange (warning)
  3. Add a text shadow for all white text over colored background
  4. Review label color presets to have only accessible combinations
Edited Jan 07, 2022 by Taurie Davis
Assignee Loading
Time tracking Loading