Accessibility & Ember: Learning about Colorblindness
This is a modal window.
Das Video konnte nicht geladen werden, da entweder ein Server- oder Netzwerkfehler auftrat oder das Format nicht unterstützt wird.
Formale Metadaten
| Titel |
| |
| Serientitel | ||
| Anzahl der Teile | 16 | |
| Autor | ||
| Lizenz | CC-Namensnennung 3.0 Unported: Sie dürfen das Werk bzw. den Inhalt zu jedem legalen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen. | |
| Identifikatoren | 10.5446/62180 (DOI) | |
| Herausgeber | ||
| Erscheinungsjahr | ||
| Sprache |
Inhaltliche Metadaten
| Fachgebiet | ||
| Genre | ||
| Abstract |
|
EmberConf 20221 / 16
5
6
8
12
13
14
15
00:00
SchätzungEmulatorDigitalfilterInformationEnergiedichteDrucksondierungLineare AbbildungExogene VariableMateriewelleTermTopologieInstantiierungBitRechter WinkelMultiplikationsoperatorDifferenteDemo <Programm>GraphfärbungExogene VariableWellenlehreAbstandCASE <Informatik>TypentheorieDickeGreen-FunktionEinsMateriewelleKategorie <Mathematik>GeradeWasserdampftafelDiagrammKartesische KoordinatenDrucksondierungFilter <Stochastik>Digitale PhotographieApp <Programm>Web-SeiteKontextbezogenes SystemPunktGraphische BenutzeroberflächeAdditionMAPInformationProjektive EbeneZahlenbereichGrenzschichtablösungEmulatorSchätzfunktionBildschirmmaskeTwitter <Softwareplattform>SoftwareentwicklerTouchscreenWeb SiteSchnelltasteComputerspielReelle ZahlTotal <Mathematik>ComputeranimationVorlesung/Konferenz
09:15
Green-FunktionEmulatorInhalt <Mathematik>Web-SeiteElement <Gruppentheorie>Message-PassingEin-AusgabeE-MailCodeTypentheoriePasswortFormation <Mathematik>Normierter RaumIdeal <Mathematik>Verhandlungs-InformationssystemGraphfärbungDrucksondierungGreen-FunktionTypentheorieComputerspielDifferenteExogene VariableVersionsverwaltungInstantiierungReelle ZahlBitKategorie <Mathematik>BildverstehenMereologieFontDivisionDifferentialTotal <Mathematik>Inhalt <Mathematik>TabelleEinsVollständigkeitFamilie <Mathematik>Anwendungsspezifischer ProzessorThreadComputeranimation
16:29
Element <Gruppentheorie>CodeTypentheorieMessage-PassingE-MailPasswortBruchrechnungEin-AusgabeAuswahlaxiomKontrast <Statistik>ExistenzsatzVerschlingungFormale GrammatikWeb-SeiteGruppenoperationDreizehnLemma <Logik>Formale SpracheDrucksondierungWurm <Informatik>SystemidentifikationQuellcodeDifferenteInformationKardinalzahlÄhnlichkeitsgeometrieBildverstehenGammafunktionEmulatorMaßerweiterungInverser LimesGraphische BenutzeroberflächeAggregatzustandKanal <Bildverarbeitung>TypentheorieGraphfärbungDifferenteInformationInstantiierungProjektive EbeneBitDigitale PhotographieKontrast <Statistik>VerschlingungMaßerweiterungFehlertoleranzPasswortCoxeter-GruppeE-MailKartesische KoordinatenBildverstehenPunktSpieltheorieMultiplikationsoperatorFormation <Mathematik>Green-FunktionBildschirmmaskeInhalt <Mathematik>DrucksondierungVisualisierungKreisdiagrammFontElektronisches ForumCASE <Informatik>Computeranimation
23:43
Exogene VariableEnergiedichteDrucksondierungMateriewelleTotal <Mathematik>Partielle DifferentiationDreizehnGraphische BenutzeroberflächeDigitalfilterEmulatorMaßerweiterungVisualisierungGraphfärbungKategorie <Mathematik>SoftwaretestTypentheorieWeb-SeiteBildverstehenMaßerweiterungDifferenteZeitzoneDrucksondierungProjektive EbeneTotal <Mathematik>Graphische BenutzeroberflächeInstantiierungWeb SiteOnline-KatalogDemo <Programm>Vorlesung/Konferenz
26:22
Funktion <Mathematik>EmulatorPASS <Programm>Web logCookie <Internet>Dynamisches RAMSampler <Musikinstrument>MenütechnikSISPVisualisierungLemma <Logik>SpiralePlot <Graphische Darstellung>KommunikationsdesignPersönliche IdentifikationsnummerDiagrammBenutzerfreundlichkeitComputerspielMaßerweiterungThreadInstantiierungDifferenteMereologieInformationGraphfärbungBitKontrast <Statistik>GarbentheorieReelle ZahlVisualisierungTopologieDokumentenserverChromatisches PolynomEnergiedichteDiagrammPlotterSpiraleTypentheorieBildschirmsymbolComputeranimation
30:12
InformationInklusion <Mathematik>Kontrast <Statistik>Prozess <Informatik>GammafunktionPROMGraphfärbungMereologieBildverstehenMaßerweiterungNummernsystemGreen-FunktionInstantiierungProzess <Informatik>PunktKontrast <Statistik>GruppenoperationTelekommunikationWort <Informatik>KreisdiagrammDifferenteBitVisualisierungInformationDifferentialNormalvektorKontextbezogenes SystemVerschlingungBildschirmmaskeInverser LimesTotal <Mathematik>Computeranimation
34:44
Kontrast <Statistik>MaßstabATMBildschirmsymbolMachsches PrinzipATMBitBildschirmmaskeProzess <Informatik>Kontextbezogenes SystemMinkowski-MetrikSummengleichungSystemaufrufGeradeGraphfärbungInformationKontrast <Statistik>BildschirmsymbolKonfiguration <Informatik>PunktProjektive EbeneInstantiierungMathematikNummernsystemElement <Gruppentheorie>GruppenoperationComputeranimation
36:23
Prozess <Informatik>DreieckKreisflächeQuadratzahlBildverstehenInklusion <Mathematik>InstantiierungKartesische KoordinatenNummernsystemGeradeRankingDifferenteMereologieGüte der AnpassungShape <Informatik>SkalarproduktGraphfärbungMaßerweiterungBildverstehenTypentheorieLinearisierungVisualisierungInformationProzess <Informatik>Projektive EbeneTwitter <Softwareplattform>QR-CodeCodeRückkopplungOffene MengeGreen-FunktionImmersion <Topologie>GlättungCoxeter-GruppeRechenschieberEinsGoogolMusterspracheWeb SiteGemeinsamer SpeicherTabelleSoftwaretestBildschirmsymbolPhasenumwandlungAdditionMultiplikationsoperatorSoftwareentwicklerNatürliche ZahlProgrammierumgebungDreieckQuadratzahlKonfiguration <Informatik>Mapping <Computergraphik>VektorpotenzialPunktComputeranimation
Transkript: Englisch(automatisch erzeugt)
00:19
Hello and welcome to the colorblindness emulator talk, I am very excited to present to you
00:25
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
00:41
with many many many developers and you know 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
01:05
stories and when I'm not coding I'm also creating jewelry I really enjoy 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.
01:23
So I think after my first six months as a developer I got into accessibility and learned a lot about it, discovering how people enable screen readers to give you information or just you know enable people using keyboards only to go through the navigation
01:43
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
02:04
types of colorblindness are there, how can we understand more how people with colorblindness see. I can actually start to answer one of this question which is how many people are colorblind and it's actually one in 12 persons with XY chromosome but also one in 200 persons
02:25
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
02:44
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 colorblind. It's also due to retinal damage it could be for instance damage happening right away
03:06
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 case of colorblindness it's important to remember
03:24
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
03:43
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.
04:02
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
04:24
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 how come we don't really know upfront how many types of colorblindness they are.
04:42
You might see for instance on the Chrome dev tool 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
05:03
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 Hel2u who is basically emulating eight types of colorblindness we'll see later on which are different subtypes in four categories and this person was
05:25
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 having real-life example mostly bad practices
05:43
you will see and still with the aim to be 100% accessible so at first you have this to bring this awareness for me and emulate this and have fun with it but so for anyone interested in this type of project and immersed himself and also learn along with this project and here we have it so
06:06
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 representative
06:25
this is basically representing 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
06:43
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
07:05
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
07:26
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
07:44
red color we also have dewton 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 tree tan
08:02
responsible for blue colors and the short wavelength of light as you see here is around blues and purples so for tree tan it's quite clear to see that what it represents in terms of color however with dewton and proton it might be a bit more confusing so you might see you might think like if for
08:24
instance someone is missing green or red colors it might be dewton 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 dewton is more on the
08:40
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 dewton and proton are responsible for different colors and can be understood if sometimes they're mixed as red green color blindness because they
09:02
are showing both red and green strong differences for those colors so let's have a look and 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
09:25
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
09:42
every color blindness so let's have a look here we have protonopia okay so proton responsible for red colors for the L cones in the eye and here protonopia 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
10:05
complete red color 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
10:26
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
10:43
and between blue and purple it's extremely difficult to distinguish them so remember proton is responsible for red colors but that imply later on to have also difficulties with other colors along that oh we have
11:01
protonomaly what is that it's still in the family of proton 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 way as people with no color blindness so let's have a look okay so we have a bit
11:27
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 protonomaly so
11:45
you see you have still an impact of this color blindness on red obviously but also on other colors next we have deuteranopia so for deutant responsible for green colors it's a total green color blindness again the
12:04
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 or completely different from non colorblind
12:22
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 protonopia but it's actually not there is a different version because the cones that are missing are
12:46
different so division will be different as well so once we've seen deuteranopia there is deuteranomaly so here we have a shifted vision of green colors and again we still have a more dull version of some reds some
13:06
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
13:23
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 at greens and you need to differentiate them only with the color this can come extremely
13:44
difficult to distinguish for any types of colorblindness obviously but also for any type of protonomaly, deuteranomaly, tritonomaly because when it comes to more subtle colors it's also very difficult to distinguish and obviously not
14:02
only in video games but in other parts that might be more difficult to see and so after proton, deuteran, we also have triton and here tritonopia which is total blue colorblindness again the S cone responsible for blues are
14:21
not here at all and this one looks quite different so as you can see it's colorblindness also known as blue yellow colorblindness where basically it is very difficult to see the difference between greens blues and purples but
14:41
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 tritonopia it's also one of the colorblindness that happen mostly throughout the eye aging or medical condition and less around
15:03
genetic conditions so as I said earlier for people for instance who develop glaucoma or with the eye aging tritonopia can be one type of colorblindness that is more triggered than the others and so once we've seen
15:21
tritonopia there is then the other subtype tritonomaly 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
15:42
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 tritonomaly there is here another category we haven't seen with it which is acromat and it's total colorblindness not seeing any color at all so here we have
16:05
acromatopsia total color blindness you only see white grays and blacks and this is extremely rare very few people have acromatopsia but it's still something to be aware of because people do have this and another one which is
16:25
acromatomily probably one of the less known type of colorblindness which is a partial colorblindness and every cones of the eyes defining colors are here but the color vision is shifted and in here for instance it actually
16:42
feels like we put a gray filter around those colors or like you know 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
17:05
colorblindness but how can it help me to know that well I had it a few examples below and it's mostly about showing that communicating with color only is quite of a big issue for people with colorblindness hiding
17:23
information or not even seeing the information so whether that is the first example we can see here we have a form Jen Jen doe 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
17:44
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 deuteranopia for instance I see like yellow green fair enough and
18:02
depending on the type of color blindness obviously I will see or I will see information or not but basically here with this forum 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
18:24
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 there is another example for instance with links and colors so you know if
18:42
sometimes you're thinking about oh I would prefer to remove the underline I don't really like this well for people with colorblindness this can be extremely difficult to see your links if not not at all so with for instance here again we're back at with protanopia and this text here is
19:01
supposed to have two links I am unable to see where they are this is extremely hard and emulating deuteranopia 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
19:26
see that there are links so again we are showing something only with colors that is quite inaccessible for people with colorblindness we have as well the very famous color contrast issue you know it's ideally color contrast ratio
19:47
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 deuteranopia this text
20:02
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 colorblindness but even more for people with colorblindness that this is extremely hard to see content that way
20:26
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
20:40
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 pertinopia here what I see is some brown some gray yellow dark blue dark gray and very very dark gray may black with
21:06
deuteranopia I see more different types of grays I'll see a very khaki and with trichinopia I'll see completely different colors with a lot of reds pinks bright pinks turquoise brown so this is also another subtle things
21:25
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 achromatopsia we
21:43
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
22:01
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
22:20
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
22:40
will see more examples this get quite difficult and here you see we have a green color blindness different color vision same confusion with okay this time we have two types of turquoise very pretty two types of things one type of gray it's still enable you're still unable to understand
23:02
what is what is shared and the last thing with achromatopsia this is where things are literally impossible to read you only see grace and it's impossible to read the information so yeah this is about this project feel free to have a
23:22
further look I also had it resources if you want to check out the different books I've read to create this piece of project definitions best practices next different extensions and applications and yeah it has been quite a fun project to work on alright let's get back to presentation so we've
23:46
seen a lot of things and I understand it's a lot to 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
24:04
red colors jutan for green colors tritan for blue colors achromat 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 proton
24:21
opea jutan opea tritan opea achromatopsia which are basically total color blindness of one color and with achromatopsia of all colors protonomally jutanomally tritanomally achromatomally or here with anomaly meanings that there is a shifted vision of the color and with
24:44
achromatomally 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
25:01
was I was wondering because this was something I could not emulate I swear 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 colorblindness and naturally
25:24
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
25:40
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 colorblindness and still in the aim of being accessible and have this super cool immersive tool
26:07
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
26:20
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
26:41
of colorblindness so as you know acromat proton dewton 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 going to focus on this one here which is basically different shades of orange and maybe
27:03
I see this one red so a b c section and d section let's try with protonopia 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 um let's see with
27:24
deuteranopia 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
27:45
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
28:05
colors so let's let's see this one maybe as a 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
28:23
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 deuteranopia okay this is also quite difficult we have more yellows uh khakis dark blue and what about tritonopia for instance
28:44
okay so now we're like having a lot of different types of reds and pinks a lot of so it's not something that would be very easy to read actually in real life and what about acromatopsia okay this is even less possible as you can see here with data visualization
29:06
we're getting into very difficult things to read and in this 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
29:28
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
29:45
for this part here which is similarly difficult with more yellows with deuteranopia and with tritonopia is 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
30:10
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
30:28
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 it's not
30:45
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 credit strike who is color blind who is robbie and he said one of the largest issues is not knowing about our largest issues
31:06
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 issue so that also shows us that there is a lack
31:25
of awareness from people designing that they're actually making something inaccessible and on other side people who are colorblind reading the information who don't know they're actually there is actually hidden information from them so that's quite a big issue and from the action
31:44
point what can we do obviously the big word 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
32:06
and finally include people with color blindness more and more in your work so as a first start stronger contrast and brightness it is always a better practice to keep brighter colors than
32:24
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
32:44
and already here i'm emulating without color blindness and it's quite difficult to um 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
33:04
so let's see how it looks actually using the extension i would like to try with red color blindness okay so basically here we see even more how um low brightness color is a bad idea
33:20
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 colors are so bright that even if the color vision is different you're still able to differentiate them
33:41
here with some gray some khaki yellows and blue we can also see that for instance with tritanopia 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
34:01
for at least the four to five first colors there is one thing to remember though because when you have total color blindness like achromatopsia this shows us that there is a limit to it so depending on the situation if you can have brighter colors in your color scheme
34:25
this is a way to bring more accessibility but it has a limit when it comes to people with achromatopsia so that's a good thing to keep in mind and another part of contrast and
34:42
brightness is around as well the idea of designing in grayscale so designing in grayscale might look a little bit um difficult to think about however if you started step by step it might be just a great win for accessibility so when you work with grayscale it actually helps you
35:05
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 aspects such as the readability how is the line height how are the paragraphs how is the typography the center
35:25
of attention you know the call to action buttons the size of it and scanability which is you know grouping elements the spacing and this just makes your design extremely clean i personally finished this poor point using the achromatopsia option and it helped me to really see if
35:45
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
36:00
scheme why not building a high contrast mode with maybe svg icons that also have this contrast mode on there is actually a talk later on by angry about dark mode so stay tuned for more dark mode and from this we can also think about pre-attentive processing so what is
36:25
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 color blindness do that a lot with colors you know when you're seated on
36:43
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 color blindness process information because they need more
37:01
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 patterns and this is extremely clear to see and we are on non-colorblind vision what if we look with
37:22
protonopia okay this looks super easy i can see the one representing the dots and the one representing the different pattern with deuteranopia we see as well without any problem and with tritonopia the colors changed but we're still able to understand all of that
37:43
and the great thing about this is that this does not cause any problem with achromatopsia so this type of visualization is super accessible and you do have other examples like linear with dotted lines cutted lines and again this is also very easy to see
38:05
and designing in grayscale actually if you want to use achromatopsia 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
38:24
pre-attentive processing we can also think about colors and shape there's this very good example from gary kawadi 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
38:44
in the application so for instance usually you would have only dots telling you either via 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
39:02
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
39:27
examples around color and icons and this is extremely easy to understand as well through checkbox cross loading icons so keep doing that it is extremely helpful for people with color
39:43
blindness and we can see it here for instance let's say with achromatopsia there is always a good way to understand what is shared and you might also think as well what if i create color blind friendly swatch and they are a different piece of information that could
40:06
help you with that the first one i found was the color brewer 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
40:26
and here depending on the nature of your data you can use sequential divergent kelly and depending on the nature of your data you can use sequential diverging qualitative and we
40:41
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 um light blue and dark blue for those four colors selected there
41:00
we can see with maybe green color blindness okay this is also quite easy to distinguish maybe trytonopia 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 achromatopsia this
41:24
might not be as accessible so in this situation we're only looking at 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
41:45
for achromatopsia 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
42:07
solve problems in less time and with better outcomes it also enables you to have people who actually forecast potential issues that might happen that you're not aware of and in addition
42:20
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 poor point it could be a google slide it could be you know a paper research you do this still needs to be extremely accessible for others so remember that when you're trying to make
42:47
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
43:06
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
43:24
thing here with this presentation is that i'm here to explain you the whys 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
43:43
more inclusive way i would like as a last light 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
44:02
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
44:20
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 on linkedin or github i'll be very happy to chat with you