[go: up one dir, main page]
Skip to content

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 by Taurie Davis