Open domyen opened 4 years ago
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:
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.
🆕 #FF4785 ➡️ #DE2865 🟢 Text on white 🟢 Text on black
🆕 #1EA7FD ➡️ #177CBB 🟢 Text on white 🟢 Text on black
🆕 #DDDDDD ➡️ #767676 🟢 Text on white 🟢 Text on black
🆕 #66BF3C ➡️ #47852A 🟢 Text on white 🟢 Text on black 🔴 Text on rgb(0,0,0,0.05) aka #F2F2F2****
🔴 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
🆕 #FF4400 ➡️ #DB3B00 🟢 Text on white 🟢 Text on black 🔴 Text on rgb(0,0,0,0.05) aka #F2F2F2****
🆕 #FC521F ➡️ #D2471D 🟢 Text on white 🟢 Text on black
🆕 #FFAE00 ➡️ #C68700 🔴 Text on white 🟢 Icon or <18pt text on white 🟢 Text on black
🆕 #66BF3C ➡️ #46842A 🟢 Text on white 🟢 Text on black
🆕 #37D5D3 ➡️ #228281 🟢 Text on white 🟢 Text on black
🆕 #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.
🟢 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.
Reported by @Hypnosphi
Goal Audit and update color palette to something that's perceptually similar to the current palette but with improved accessibility.
Examples:
Reference
Would love some help with this if you have experience with perceptual colors + a11y. 🙏