A presentation at EmberConf 2022 by Agathe Badia
COLORBLINDNESS EMULATOR Ember & A11y
About me From ● Living in Linktr.ee: Former Tech Recruiter ● UI Engineer at Crowdstrike Agathebadia in/agathe-badia Agathe_BADIA ● Podcast Host: Agathe’s Diary agathe-in-berlin.com
ABOUT COLORBLINDNESS
How do people with colorblindness see colors?
Colorblindness ● ● 1 in 12 persons with XY chromosomes 1 in 200 persons with XX chromosomes
Colorblindness ● ● 1 in 12 persons with XY chromosomes 1 in 200 persons with XX chromosomes But also: ● Retinal damage ● Medical condition Estimation: 350+ million persons are colorblind
LET’S MAKE IT OURSELVES
SVG Filter
SVG Filter Ember + Information gathering + Real life examples + Aims to be 100% accessible = Awareness
SVG Filter Colorblindness emulator! Ember + Information gathering + Real life examples + Aims to be 100% accessible = Awareness
Deutan Responsible for green colors Tritan Responsible for blue colors Protan Responsible for red colors
Colorblindness - Recap Protan L-cones Protanopia L cones are missing Protanomaly L cones are defective Deutan M-cones Deuteranopia M cones are missing Deuteranomaly M cones are defective Tritan S-cones Achromat No color Tritanopia Achromatopsia Tritanomaly Achromatomaly S cones are missing S cones are defective Total color blindness Partial Achromatomaly
WHAT’S NEXT?
CHROME EXTENSION! Where the magic happens
SVG Filter Colorblindness extension! Extension noob starter pack + Colorblind picker + Aim to be accessible = Immersive tool!
RECOMMENDATIONS
“One of the largest issues is not knowing about some of our largest issues. […] We don’t see the issue, we are oblivious to it and instead left with less information/details than normal sighted folks. That’s why I’ve learned to request that color never be the primary and especially never the only differentiating feature” Robbie Coleman, Senior Engineer at Crowdstrike
Stronger contrast and brightness Rethink pre-attentive processing in an accessible way Include people with colorblindness in your work
Stronger contrast and brightness Keep a strong contrast in hue/color, but also in brightness Low brightness Higher brightness
Stronger contrast and brightness Design in gray scale Built-in high contrast mode + using SVG icons that also have contrast mode
Pre-attentive processing
Pre-attentive processing Combination of color with different patterns/hatching
Pre-attentive processing Combination of color with different patterns/hatching Color with solid - dotted lines
Pre-attentive processing Color and shapes (circles, triangles, squares…) Screenshot by Geri Coady
Pre-attentive processing Color and shapes (circles, triangles, squares…) Color and icons Screenshot by Geri Coady
Pre-attentive processing Colorblind friendly swatch
Include people with colorblindness in your research projects and test phase - Able to solve more problems in less time, and with better outcomes
CONCLUSION
Zoë Bijl Robbie Coleman Florian Kraft Yehuda Katz Jim Schofield Jenny Judova Michal Bryxi Anne-Greeth Schot -van Herwijnen THANK YOU We’re hiring! Resources & projects Let’s connect! Agathebadia in/agathe-badia Agathe_BADIA Nicole Chung Gonçalo Morais
How do colorblind people perceive colors? How many types of colorblindness exist? How can we help as developers?
There are many things we still don’t know about it, and bad practice is very common online. In this talk, I will share my learnings about colorblindness, share my emulator project and its outcomes. Hopefully, to spread awareness and improve the experience of colorblind users.
Because accessibility is everyone’s matter :)
for free. You
can too.