Accessibility & Ember: Learning about Colorblindness

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

What we can do: Do not communicate information only via colors

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

COLORBLINDNESS EMULATOR Ember & A11y