 Hello and welcome to the colorblindness emulator talk. I am very excited to present to you my work around colorblindness, give you an introduction to this whole topic, and immerse yourself in the eyes of others. My name is Agat Badia, and I actually used to be a former recruiter and talked with many, many, many developers, and one day I just decided to become a developer myself. And that's what I've been doing for the past two years. Today I am a UI engineer at CrowdStrike, and I've also been doing some podcast work with Agat's diary, talking with many awesome people in tech, and also with untold developer stories. And when I'm not coding, I'm also creating jewelry. I've really enjoyed doing that. So if you're into jewelry, feel free to check it out. And overall, I'm always super happy to connect. So feel free to ping me on LinkedIn, on Twitter, or on GitHub. So I think after my first six months as a developer, I got into accessibility and learned a lot about it. You know, discovering how people enable screen readers to give you information, or just, you know, enable people using keyboards only to go through the navigation on a website, and came to topic around colorblindness. And this was just fascinating. I had so many questions, and I wondered things like, how do people with colorblindness see colors? How many people with colorblindness? Are they on earth? And, you know, how many types of colorblindness are there? How can we understand more how people with colorblindness see? I can actually start to answer one of these questions, which is how many people are colorblind? And it's actually one in 12 persons with XY chromosome, but also one in 200 persons with XX chromosomes. What does it mean? It's basically here talking about genetic conditions. So there is a recessive trait with the X chromosome that is passed along it, and people with just one X chromosome only need their one X to be defective to catch it, whereas with people with XX chromosomes, they need both to be defective. So it explains why people with XY chromosomes tend to be more colorblind than people with XX chromosomes. But it's not only the reason why people become or are colorblinds, it's also due to retinal damage. It could be, for instance, damage happening right away or with age and with time in the eye, but also through medical condition like glaucoma, and this will trigger the eye to develop a certain form of colorblindness. And in addition to all those different cases of colorblindness, it's important to remember that every type of colorblindness a person has is almost quite unique because it varies from total colorblindness, red-green deficiency, blue-yellow deficiency, but also you have subtypes and different levels of severity. So that's a good thing to keep in mind. And as you can see here, the estimation with this overall numbers with people having it from a genetic condition or with time or medical condition, there is an estimation of 350 million persons that are colorblind. So we're talking about a lot of people. And from this, I was also wondering, how do people see colors when they are colorblind? How many types of colorblindness are there? Because from a few researches, I could find a bit more about just seeing an emulation on a photo, how it looks with this type of colorblindness, but it always felt a bit unsatisfactory because I would not see how people see online, for instance, or how come we don't really know upfront how many types of colorblindness they are. You might see, for instance, on the Chrome DevTool, we can emulate up to four types of colorblindness, but it's actually not as complete as you might see or as you might know. So I just decided at one point, you know what? Let's make it ourselves. I just decided to create an application that would emulate and try to be as complete as possible to emulate all types of colorblindness. So what I did is that I found an SVG filter created by Hell2U, who is basically emulating eight types of colorblindness. We'll see later on, which are different subtypes in four categories. And this person was using it for photos, but actually SVG filters, you can use them for entire pages. So I took that with me and I created a Ember app and continued to do a lot of information gathering, adding real life example, mostly bad practices, you will see, and still with the aim to be 100% accessible. So at first to have this, to bring this awareness for me and emulate this and have fun with it, but I saw for anyone interested in this type of project and immersed himself and also learn along with this project. And here we have it. So before we get into a demo, I would like to give you a quick introduction. So we're not losing you when I'm presenting you the more technical term around colorblindness. So in this diagram, this is basically representing the wavelength the wavelength of light. And the wavelength of light that reflect the colors we see through our eye. So the light waves, like the waves in the water, they can be described by the distance between two successive peaks of the wave and a length known as the wavelength in this case. So the different wavelength of light here appear to our eyes as different colors. So shorter wavelengths appear blue, purple, and longer ones appear red, for instance. And in this diagram, you will see different colors going from very dark blue, black to then purple, green, yellow, red, up to very dark red and black. And we have three different lines. So one for S, M and L. L is the long wavelength of light and is represented by proton, which is responsible for red color. And L you will see later on, like M and S, are also used for showing L cones within the eye. And we're talking about the same thing, proton, L cones. They're both responsible for the red color. We also have Duton, the category responsible for green colors. And we see here it's going through the M wavelength of light for medium wavelength of light and associated with green colors. And finally, three ton responsible for blue colors. And the short wavelength of light, as you see here, is around blues and purples. So for three ton, it's quite clear to see that what it represents in terms of color. However, with Duton and Proton, it might be a bit more confusing. So you might think like, for instance, someone is missing green or red colors. It might be Duton and Proton at the same time. Well, yes and no. These are overlapping, as you can see. And Proton tend to be more on the right side, whereas Duton is more on the green side. They are overlapping, but they represent two different type of color as well. So we will see that better in the demo, but remember that Duton and Proton are responsible for different colors and can be understood if sometimes they're mixed as red-green color blindness because they are showing both red and green strong differences for those colors. So let's have a look. I will go on the color blindness emulator on Netlify. And basically what you have in here is a table of content to show you definitions, color recap, some examples and resources. Let's go to the color recap so we can see the ones that are interesting for us right now. So basically what I did is I created red, green captions, yellow, purple and blue. And from there we can emulate and see all the colors at once when we check every color blindness. So let's have a look. Here we have Protanopia. Okay, so Protan responsible for red colors for the L cones in the eye. And here Protanopia is red color blindness and Anopia that you see here literally means missing. So the L cone responsible for reds is completely missing. It's a complete red color blindness. Let's have a look. Okay, all right, indeed. So what happens here? We have definitely very strong difficulties to recognize the red caption. We do not see any type of reds. It's more of, I see that personally as clear brown or yellow. And the thing which is a bit more subtle here is that it's not only about red color blindness. As you can see here, there is difficulty to distinguish greens but also yellows which are less saturated. And between blue and purple, it's extremely difficult to distinguish them. So remember, Protan is responsible for red colors but that imply later on to have also difficulties with other colors along that. Oh, we have Protanomaly. What is that? It's still in the family of Protan which is another subtype. And Anomaly literally means that the L cones for the red colors is here but it is a shifted color vision. It's not working in the same way as people with no color blindness. So let's have a look. Okay, so we have a bit more dull version of red. Here I see more like orange. I actually see the greens a bit more clear, like in a bit more dull way as well. We can actually do the differentiation between no color blindness and Protanomaly. So you see you have still an impact of this color blindness on red obviously but also on other colors. Next we have Deuterinopia. So for Deuton responsible for green colors, it's a total green color blindness. Again, the M cones responsible for greens are not there. They're completely missing in the eye. Okay, so we have something that is also very complicated to distinguish. Here for instance, reds and yellow are completely different from non-colorblind vision but also greens which are almost all gray and again, blue and purple are very difficult to distinguish. And as you can see here, you might think, oh, it's exactly the same as Protanopia but it's actually not. There is a different version because the cones that are missing are different so the vision will be different as well. So once we've seen Deuterinopia, there is Deuterinomaly. So here we have a shifted vision of green colors and again, we still have a more dull version of some reds, some greens and other colors are a bit affected. We can see for instance, how it looks in between. It's a bit more more dull compared to non-colorblind as well. And there is also a thing to remember here. I'm showing like very strong colors, very saturated colors and when you're online or in general, when you are looking at colors that are way more subtle, for instance, in video games, when you have the outline of characters in reds or in greens and you need to differentiate them only with the color, this can come extremely difficult to distinguish for any types of color blindness obviously but also for any type of Protanomaly, Deuterinomaly, Tritanomaly because when it comes to more subtle colors, it's also very difficult to distinguish and obviously not only in video games but in other parts that might be more difficult to see. And so after Protan, Deuton, we also have Tritan and here Tritanopia which is total blue color blindness. Again, the S cone responsible for blues are not here at all. And this one looks quite different. So as you can see, it's color blindness also known as blue-yellow color blindness where basically it is very difficult to see the difference between greens, blues and purples but also in between red and yellow. As you can see, yellows almost look like pink or very like tender red. So this is very interesting to see and the interesting thing about Tritanopia, it's also one of the color blindness that happened mostly throughout the eye aging or medical condition and less around genetic conditions. So as I said earlier for people, for instance, we develop glaucoma or with the eye aging, Tritanopia can be one type of color blindness that is more triggered than the others. And so once we see in Tritanopia, there is then the other subtype Tritanomaly, so the shifted color version of blues which again is a bit more subtle but you can still see that yellows are impacted as well as blues and purples. And so this again is less obvious when we see very strong colors but online or in real life, this is also something that might get difficult for people with Tritanomaly. There is here another category we haven't seen which is achromat and it's total color blindness not seeing any color at all. So here we have achromatopsia, total color blindness. You only see white, grays and blacks and this is extremely rare. Very few people have achromatopsia but it's still something to be aware of because people do have this. And another one which is achromatomaly probably one of the less known type of color blindness which is a partial color blindness and every cones of the eyes defining colors are here but the color vision is shifted. And in here for instance, it actually feels like we put a gray filter around those colors or like those old photos that age a bit that you see a bit less of the colors it is quite different but you still see the colors. All right and so from this it's like okay great, we can see, we can understand the different types of color blindness but how can it help me to know that? Well, I had a few examples below and it's mostly about showing that communicating with color only is quite of a big issue for people with color blindness, hiding information or not even seeing the information. So with the first example, we can see here we have a form, gen, gen-do, email name, password and here I'm emulating with Protanopia and I can see the outline is very slightly different from the email and the name but I see here gray and here I see more of a khaki. It is, you know, it is quite different but I'm not super sure what it means. I mean, I can emulate it with Jeteranopia for instance. I see like yellow-green fair enough and depending on the type of color blindness, obviously I will see or I will see the information or not but basically here with this form we're simply showing just with the outline with a strong green or a red if something is valid or not and if you actually emulate that here in some cases you're not even able to see that there is an information shown here only with colors. So that's a good thing to remember. Don't do forms like that. There is another example, for instance with links and colors. So you know, if sometimes you're thinking about oh, I would prefer to remove the underline I don't really like this. Well, for people with color blindness this can be extremely difficult to see your links if not, not at all. So with, for instance here again we're back with Protanopia and this text here is supposed to have two links. I am unable to see where they are. This is extremely hard and emulating Jeteranopia as well. Okay, with some we can see that maybe these are different but this is extremely hard to see and we can also check with a chromatopsia. This is impossible to see that there are links. So again, we are showing something only with colors that is quite inaccessible for people with color blindness. We have as well the very famous color contrast issue. You know, it's ideally a color contrast ratio of 4.5 or more to have something that is accessible. And in here, well, depending on what you're emulating here let's try with Jeteranopia. This text, this piece of content here is supposed to have text that has a very low color contrast. I am unable to see what this is. And this is also another big problem not only for people without color blindness but even more for people with color blindness that this is extremely hard to see content that way. There is another example that I wanted to share as well which is color picker. You know, when you're online you would like to buy shirts, clothing or some items and you can choose the color. And with color picker you would be able for instance to see sometimes only a dot with color and that's it. So if you have a certain type of color blindness you would actually be unable to see what is available for you. With Pertanopia here, what I see is some brown, some gray, yellow, dark blue, dark gray and very, very dark gray, maybe black. With Jeteranopia I see more different types of grays. I'll see a very khaki. And with Pertanopia I'll see completely different colors with a lot of reds, pinks, bright pinks, turquoise, brown. So this is also another subtle things that we might not see if we are not colorblind but again we're showing information only with colors and this is extremely difficult if not possible to understand what you're buying at this point. And with Akramatopsia we actually have only shades of gray so this is even more inaccessible. I have one last example in this project which is around data visualization and we'll come back to data visualization you will see. In this example around pie charts, infographics in general. We have here a pie chart, how do you spend your leisure time? And we have in the legend we have TV, books, games, other and music. And here I'm emulating with Protanopia so red color blindness. And I see two types of blue, difficult to differentiate two type of yellows, difficult to differentiate as well and gray. And looking at, well obviously the legend first is extremely small so very difficult to see. But in general I would be unable to understand what color is what type of information. And you will see more examples, this gets quite difficult. And here you see we have a green color blindness, different color vision, same confusion. With Tritonopia, okay this time we have two types of turquoise, very pretty, two types of pinks, one type of gray, it's still unable, you're still unable to understand what is shared. And the last thing with Akramatopsia, this is where things are literally impossible to read. You only see grays and it's impossible to read the information. So yeah, this is about this project. Feel free to have a further look, I also added resources if you want to check out the different books I've read to create this piece of project definitions, best practices, different extensions and applications. And yeah, it has been quite a fun project to work on. All right, let's get back to the presentation. So we've seen a lot of things and I understand it's a lot to remember or to just understand, so let's do a quick recap. So we do have four types of color blindness that we have seen today with different subtypes. So proton for red colors, due ton for green colors, tree ton for blue colors, Akramat for no colors. And for each type of category, you have a subtype that either has a cone missing, the cone representing the color missing in the eye, protonopia, deuteranopia, tretonopia, acromatopsia, which are basically total color blindness of one color and with acromatopsia of all colors. Protonomally, deuteranomally, tretonomally, acromatomally, or here with anomaly, meaning that there is a shifted vision of the color and with acromatomally with all colors. And as you can see, the vision is every time different with the different hues of colors you see here. And so after this project, I was really happy with how it worked out, how immersive it is, but I was wondering because this was something I could not emulate elsewhere. So it's really nice to try it out on this project, but I wish I could do that as well on other pages, maybe to test or have fun with other websites to check out how accessible it is or not for people with color blindness and naturally came the idea of creating an extension. Do you know what? Let's go, let's create a Chrome extension. So what I did was basically to continue with the SVG filter because it was working so well and I started my very first extension. I could spend hours talking about the different obstacles and how to do that. So this would be a whole new talk. So another story for later, but basically what I did is to create a pop-up HTML to have a colorblind picker to select the different types of color blindness and still in the aim of being accessible and have this super cool immersive tool. So what I want to show you, for instance, as a quick demo is go through some bad examples that are related to data visualization. So let's have a quick look. I went to the data visualization catalog and I wanted to emulate a few things with you. So here is the extension. So we have information icon if you want to check out the GitHub repository, two eyes holding hands, which I found very, very cute. And then we have the four different types of colorblindness. So as you know, acromat, proton, due ton, tree ton, and tree chromat, which is for no colorblindness. So let's have a look. So here we have basically a donut chart. We're gonna focus on this one here, which is basically different shades of orange and maybe I see this one red. So A, B, C section and D section. Let's try with proteinopia. Okay, so as you can see, the saturation of colors is quite different because the section A and B look quite the same. So it's difficult to read it. Let's see with geotereinopia. All right, now it's A, B and C that are a bit difficult to distinguish maybe with tritonopia. Okay, it's almost impossible to distinguish most of them. Very nice. And what about acromatopsia? All right, this is really, really hard to distinguish them. For this example, I must say that the information is displayed right next to the section. So this is a good thing to know, but let's see maybe with another example. Spiral plot. I personally never seen that in real life for data visualization, but it has a lot of colors. So let's see this one maybe as a rainbow. Let's see if we do protonopia. Okay, we actually have a lot of different yellows and browns, some light grays and dark blues. It feels like we see half the colors that we're supposed to see actually. So it's quite difficult to read this. What about geotereinopia? Okay, this is also quite difficult. We have more yellows, khakis, dark blue. What about tritonopia, for instance? Okay, so now we're like having a lot of different types of reds and pinks, a lot of turquoise. So it's not something that would be very easy to read actually in real life. What about acromatopsia? Okay, this is even less possible. As you can see here, with data visualization, we're getting into very difficult things to read. And in these examples, we actually don't have legends, but imagine if we have different legends put on the side, it would be just impossible to read. Let's see for another one maybe. Sunburst diagram. Okay, here we decided we're gonna have the same monochromatic colors. Let's see, this might not be very, very nice. Okay, so as you can see, very low contrast for some, they might be difficult to read, especially for this part here, which is similarly difficult with more yellows with geotereinopia. And with tretenopia, it's actually even more difficult to distinguish colors as they really look similar. I mean, we can also see acromatopsia, it's the same. Okay, so from this, we're starting to see a few things that emerge and from the different data visualizations, but other examples around, you know, forms, links, color contrast, color picker, which is stop relying on color only. We're actually hiding information. We are making information either invisible to people with color blindness or even making it very difficult to read. And in both ways, not accessible. So there are for sure different ways to make this more inclusive. And to show you that as well, I wanted to share a quote from a colleague at CrowdStrike, who is colorblind, who is Robbie, and he said, one of the largest issues is not knowing about our largest issues. We don't see the issue, we are oblivious to it, and instead left with less information, details than normal-sided folks. That's why I've learned to request that color never be the primary and especially never the only differentiating issue. So that also shows us that there is a lack of awareness from people designing that they're actually making something inaccessible. And on the other side, people who are colorblind reading the information who don't know there is actually hidden information from them. So that's quite a big issue. And from the action point, what can we do? Obviously, the big war here is do not communicate information only via colors. And here I can show you three main solution that we can start implementing so around stronger contrast and brightness, but also rethink pre-attentive processing in an accessible way, and finally include people with colorblindness more and more in your work. So as I first start, stronger contrast and brightness. It is always a better practice to keep brighter colors than having lower saturation, lower brightness in your color scheme. Again, I'm back with data visualization, and these are always good examples to really realize the difference. So in this one we have on the left side a low brightness color scheme with a bit of blues and purples. And already here I'm emulating without colorblindness and it's quite difficult to see what means what from the legend. And on the right side we have bright blue, bright red, bright yellow, bright green in a pie chart. And this is quite easy to read. So let's see how it looks actually using the extension. Now I would like to try with red colorblindness. Okay, so basically here we see even more how low brightness color is a bad idea. From the left side we honestly I'm unable to see there is the four and five colors in the legend. I am not able to see what it exactly means. However, on the right side, you see that the color also bright that even if the color vision is different, you're still able to differentiate them here with some gray, some khaki, yellows and blue. We can also see that for instance with Tritonopia for instance where you have different colors but you're still able to differentiate them with higher brightness. And again on the left side this is extremely difficult for at least the four to five first colors. There is one thing to remember though because when you have total colorblindness like acromatopsia, this shows us that there is a limit to it. So depending on the situation if you can have a brighter colors in your color scheme this is a way to bring more accessibility but it has a limit when it comes to people with acromatopsia. So that's a good thing to keep in mind. And another part of contrast and brightness is around as well the idea of designing in grayscale. So designing in grayscale might look a little bit difficult to think about. However, if you start it step by step it might be just a great win for accessibility. So when you work with grayscale it actually helps you to focus on the context on the form, on the right contrast on the visual balance, the layout, the spacing and you start thinking about the invisible but also the most important aspect such as the readability. How is the line height? How are the paragraphs? How is the typography? The center of attention, the call to action buttons, the size of it and scannability which is grouping elements, the spacing and this just makes your design extremely clean. I personally finished this PowerPoint using the acromatopsia option and it helped me to really see if everything, every piece of information was easy to read. And there is another idea as well which is that if for instance you have your projects and you cannot change for instance your color scheme why not building a high contrast mode with maybe SVG icons that also have this contrast mode on. There is actually a chocolate run by Ann Gritt about dark mode so stay tuned for more dark mode. And from this we can also think about pre-attentive processing. So what is pre-attentive processing? Let's stop there. It is basically the subconscious accumulation of information from the environment. So the brain and how it filters and process what is important and people without colorblindness do that a lot with colors, you know? When you're sitting on a table and there are for instance a yellow toy, you see three red ones and four blue ones like your brain will process them instantly and also remember them with the colors. But what happens when people with colorblindness process information because they need more than color to help them to process information? So let's see some good examples that you can start using as well. The first one is basically combining color with different parents and hatching. This is extremely clear to see and we are on non-colorblind vision. What if we look with Protonopia? Okay, this looks super easy. I can see the one representing the dots and the one representing the different pattern with Deuteronopia we see as well without any problem. And with Deuteronopia the colors change but we're still able to understand all of that. And the great thing about this is that this does not cause any problem with Acromatopsia. So this type of visualization is super accessible and you do have other examples like linear with dotted lines, cut lines and again, this is also very easy to see. And designing in grayscale actually, if you want to use Acromatopsia in your work, please do, this is a great way to do so. And as you can see here, there is absolutely no problem to make a difference between the rank line and the price one. And as part of pre-attentive processing we can also think about colors and shape. There's this very good example from Gary Kawate in her book around accessible color schemes that is referring to an iChat feature that used to be there in the past around the availability of your contact in the application. So for instance, usually you would have only dots telling you either of your colors if someone is available with green, maybe available with yellow and not available or away with red. And with this feature, you would just have actually the same color but using different shapes. So a circle for available, but also a triangle for more or less available and a square to also say away. And this is a good example to use and make it very easy to process the information for every type of color vision. There is the famous and widely used examples around color and icons. And this is extremely easy to understand as well through checkbox, cross, loading icon. So keep doing that. It is extremely helpful for people with color blindness. And we can see it here, for instance, let's say with a chromatopsia there is always a good way to understand what is shared. And you might also think as well, what if I create a color blind friendly swatch and they are a different piece of information that could help you with that? The first one I found was the Color Brower 2.0 which is actually a tool for people creating cartography, creating maps and they do actually have a color blind safe option. So as you can see here, for instance, there are five different colors selected and here, depending on the nature of your data, you can use sequential, divergent, Cali. And depending on the nature of your data, you can use sequential, diverging, qualitative and we can have a look right now. How does it look with other type of color vision? Let's see with protonopia. It is actually quite easy to differentiate between brown khaki, yellow khaki, light blue and dark blue for those four colors selected there. We can see with maybe green color blindness. Okay, this is also quite easy to distinguish. Maybe tritonopia. Okay, so that's also quite easy with red, pink, light blue and turquoise. And here again, as you can understand because we're using color only with acromatopsia, this might not be as accessible. So in this situation, we're only looking at maps but if you're looking for a color scheme to use for a website, this would also work. And again, as a reminder, if you are only able to communicate through colors, it might not be as accessible for acromatopsia. Even if the brightness or the color swatch is accessible. And one last thing, which is probably one of the most important is include people with color blindness in your research projects, your test phase and every phase of your work. It's not only enabling you to solve problems in less time and with better outcomes, it also enables you to have people who can actually forecast potential issues that might happen that you're not aware of. And in addition to that, we as developers or designer, we would think about this a lot when we design a website or code it. But it's also every type of information that you are sharing with others. It could be a PowerPoint, it could be a Google Slide, it could be a paper research you do. This still needs to be extremely accessible for others. So remember that when you're trying to make something more accessible for people with color blindness, do it in every piece of information that you're sharing. And this brings us to our conclusion. If I motivated you to go through the whole immersive color blindness journey, I'll be very, very glad. It was a lot of information to process. So let's take a deep breath. And the first good thing is that to make things more accessible for people with color blindness, you don't have to remember all the things I told you today. This talk will be available later on if you want to go through it again. But the main thing here with this presentation is that I'm here to explain you the why's and get you started with a fun tool to have this immersive journey. So now it's your turn to use these suggestions and best practices to enable users for smooth and pleasant navigation on your projects in a more inclusive way. I would like as a last slide to thank all the person that have helped me either to work on the Netlify projects, on the extension, sending me feedback and suggestions from my talk. So thank you to all of you for your support. This talk and these projects wouldn't be there without you. And we are also hiring at Crosstrack. Feel free to check out the QR code for seeing all the job openings. And in general, if you want to go through the different resources and projects, feel free to check out the QR code for more information. And in general, I would love to hear back from you about your experience with the extension or with the different projects. Feel free to ping me on Twitter or LinkedIn or GitHub. I'll be very happy to chat with you.