Color palette accessibility

[domyen]

Reported by @Hypnosphi

Goal
Audit and update color palette to something that's perceptually similar to the current palette but with improved accessibility.

Examples:

• 🔴 White text on blue background
• 🔴 Green text on green background in badge
• 🔴 #666 grey on white isn't accessible

Reference

• Colorbox.io from Lyft
• Stripe's recent color system article to inform this.
• HSLuv Color picker that omits impossible colors (dark yellow)

Would love some help with this if you have experience with perceptual colors + a11y. 🙏

[livekeen]

Accessibility is kind of a vague catch-all phrase but here's where I think it matters in regards to Storybook. Basically the EU has a directive to officially requiring its member states to abide by WCAG 2.1 Level AA standards.

It has a number of expectations that follow it beyond accessible colours but let's drill into that detail (which can be found here: https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum).

Basically to start adjusting the colours in the colour contrast guidelines I need to identify a few things:

• is this colour used for an icon, text, and/or a background?
  • My assumption: if a colour shifts too drastically it'll be used only for icons or text larger than 18pt
• when this colour is used for an icon or text what background colour is it on?
  • My assumption: the colour is going to used against black (#000) or white (#FFF)
• when this colour is used for text is it at least 18pt?
  • My assumption: it won't be used primarily for text that is 18pt or up

I'll submit a first pass in a little bit but I just wanted to cover my basic thinking so that there's some logic to the madness I'll submit shortly.

[livekeen]

Palette preview

theme.color.primary - Coral

🆕 #FF4785 ➡️ #DE2865
🟢 Text on white
🟢 Text on black

theme.color.secondary - Blue

🆕 #1EA7FD ➡️ #177CBB
🟢 Text on white
🟢 Text on black

theme.color.tertiary - Grey

🆕 #DDDDDD ➡️ #767676
🟢 Text on white
🟢 Text on black

theme.color.positive - Green

🆕 #66BF3C ➡️ #47852A
🟢 Text on white
🟢 Text on black
🔴 Text on rgb(0,0,0,0.05) aka #F2F2F2****

theme.color.warning - Ochre

#E69D00*
🔴 Text on white
🟢 Text on black
🔴 Text on rgb(0,0,0,0.05) aka #F2F2F2****
*#9E6C00 would work against white but I'm not sure if it looks appropriate for a warning colour. It may be advisable to revisit this colour choice altogether rather than finding a perceptually similar option in this case

theme.color.negative - Red

🆕 #FF4400 ➡️ #DB3B00
🟢 Text on white
🟢 Text on black
🔴 Text on rgb(0,0,0,0.05) aka #F2F2F2****

theme.color.orange - Orange

🆕 #FC521F ➡️ #D2471D
🟢 Text on white
🟢 Text on black

theme.color.gold - Gold

🆕 #FFAE00 ➡️ #C68700
🔴 Text on white
🟢 Icon or <18pt text on white
🟢 Text on black

theme.color.green - Green

🆕 #66BF3C ➡️ #46842A
🟢 Text on white
🟢 Text on black

theme.color.seafoam - Seafoam

🆕 #37D5D3 ➡️ #228281
🟢 Text on white
🟢 Text on black

theme.color.purple - Purple

🆕 #6F2CAC ➡️ #945CC7**
🟢 Text on white
🟢 Text on black
**Perceptually similar in my mind means the colour visually looks like it belongs in the same family as the original. I suspect this suggested colour may be a bit off from that criteria but I think the alternative option would be to limit the usage this colour to certain scenarios.

theme.color.ultraviolet - Ultraviolet

#2A0481***
🟢 Text on white
🔴 Text on black
***Based on my understanding of perceptually similar I feel it would be better to just identify what conditions this colour doesn't meet colour contrast.

---

****It may be a better path forward to redesign the alert tabs to not require a grey background. This suggestion is mainly because the alert colours appear to lose their colour meaning quite significantly when they are adjusted to meet WCAG's guidelines (e.g. https://imgur.com/a/qJw8S2x).

Please review this first pass when you have a chance and let me know whether I understood the criteria correctly.