Kleurenblind vriendelijke paletten en hoe je ontwerpen test

Een kleurenblind vriendelijk palet is een set kleuren die onderscheidbaar blijft voor mensen die bepaalde tinten verwarren, meestal rood en groen. De truc is kleuren te scheiden op helderheid én tint, en kleur nooit het enige signaal te laten zijn. Een donkerblauw en een lichtoranje blijven voor bijna iedereen verschillend. Een middenrood en een middengroen met dezelfde helderheid kunnen op hetzelfde modderbruin lijken. Hieronder vind je paletten om te kopiëren, de paren die je beter vermijdt en drie gratis manieren om je werk te testen.

Soorten kleurenblindheid in het kort

Kleurenzien berust op drie soorten kegeltjes in het oog, grofweg afgestemd op lange, middellange en korte golflengten. Als één soort ontbreekt of verschoven is, gaan sommige kleuren die voor de meeste mensen verschillen op elkaar lijken. Het artikel van WebAIM over kleurenblindheid behandelt de biologie. Voor ontwerp is deze tabel wat telt.

De rode draad: tint wordt onbetrouwbaar, maar helderheid blijft behouden. Iemand met deuteranopie ziet nog steeds duidelijk dat de ene kleur donkerder is dan de andere. Dat ene feit stuurt elke regel hieronder.

Een kleurenblind vriendelijk palet om te kopiëren

De bekendste veilige set is het palet dat Masataka Okabe en Kei Ito voorstelden voor wetenschappelijke figuren. De acht kleuren zijn gekozen om onderscheidbaar te blijven bij de gangbare vormen van kleurenblindheid, en het werkt even goed voor grafieken, kaarten, labels en statuskleuren in een product.

Voor merkwerk zijn acht kleuren meestal te veel. Het veiligste enkele paar is blauw en oranje: ze liggen aan weerszijden van de rood-groenverwarringslijn en verschillen in helderheid, dus ze lezen voor bijna iedereen als verschillend. Blauw met geel en donkerpaars met lichtgroen houden het ook goed vol.

Verlopen en schalen voor data

Gebruik voor heatmaps en grafieken die een bereik tonen een schaal waarvan de helderheid gestaag verandert van het ene uiteinde naar het andere. Een schaal van rood naar groen faalt dubbel: de uiteinden verwarren kleurenblinde lezers en beide uiteinden zijn vergelijkbaar in helderheid. Blauw naar oranje of één tint van donker naar licht werkt voor vrijwel iedereen.

Paren om te vermijden en wat je ervoor gebruikt

Sommige combinaties veroorzaken steeds problemen. Het rood #d7263d en groen #2e9e44 hierboven lijken voor de meeste mensen duidelijk verschillend, maar hun waargenomen helderheid is bijna gelijk (rond 57% en 62% in OKLCH), dus voor iemand met deuteranopie blijft er weinig over om ze uit elkaar te houden.

Als je merkkleuren rood en groen zijn, hoef je ze niet te veranderen. Maak er gewoon één duidelijk donkerder dan de ander en gebruik ze nooit als enig verschil tussen bijvoorbeeld winst en verlies. Een pijl of een plus- en minteken lost het voor iedereen op. Hoe je de kleuren in de eerste plaats kiest, lees je in merkkleuren kiezen.

Vertrouw nooit op kleur alleen

Dit is de regel die het meest telt, en hij maakt ook deel uit van de Web Content Accessibility Guidelines. Als een grafiekenlegenda, een formulierfout, een badge voor op voorraad of een kaart alleen in kleur verschilt, missen sommige lezers de betekenis. Voeg een tweede signaal toe:

• Labels direct op grafieklijnen en staven in plaats van een kleurenlegenda.
• Iconen voor statussen: een vinkje voor succes, een kruis of waarschuwingsteken voor fouten.
• Patronen of lijnstijlen, zoals gestreepte en doorlopende lijnen, in grafieken.
• Positie en volgorde, zodat het eerste item altijd hetzelfde betekent.
• Tekstcontrast dat op zichzelf slaagt, gecontroleerd met een contrastcontrole.

Socialgraphics vragen om dezelfde zorg. Een post die zegt “groen betekent beschikbaar” boven een rood-groene agenda verliest een deel van de lezers. Woorden dragen het beter, en de woorden zelf moeten leesbaar zijn tegen de achtergrond, vooral op verlopen, waar het contrast over het beeld verandert. Tekst op verlopen behandelt dat uitgebreid.

Die rechterversie is wat een Gradiently Mark vanzelf doet: hij verplaatst zijn rustigste, best contrasterende gebied achter de tekst en auto-ink kiest lichte of donkere letters per regel, zodat de scheiding uit helderheid komt in plaats van uit tint.

Hoe test je een ontwerp op kleurenblindheid

1. 1

   Doe de grijswaardencheck

   Exporteer of maak een screenshot van het ontwerp en zet het om naar grijswaarden. Als twee kleuren met een verschillende betekenis hetzelfde grijs worden, wijzig dan de helderheid van één ervan.

2. 2

   Simuleer in de browser

   Open in Chrome of Edge de devtools, open het commandomenu, typ Rendering en gebruik Emulate vision deficiencies om de live pagina te zien als protanopie, deuteranopie, tritanopie of achromatopsie.

3. 3

   Bekijk je hele scherm in grijs

   Mac en Windows hebben allebei een grijswaardenfilter in de toegankelijkheidsinstellingen. Zet het aan om apps, ontwerpbestanden en exports te beoordelen, niet alleen webpagina’s.

4. 4

   Haal de kleur weg en lees het opnieuw

   Vraag je af of elke grafiek, badge en status ook zonder kleur, met alleen labels en iconen, nog klopt. Zo ja, dan is kleur decoratie, en daar hoort ze thuis.

Simulaties zijn benaderingen en kleurenzien verschilt van persoon tot persoon. Als toegankelijkheid voor je product belangrijk is, vraag dan kleurenblinde mensen uit je omgeving naar het echte resultaat te kijken. Voor grafieken specifiek bevat infographic ontwerpen meer over labels en opmaak, en kleurharmonie helpt als je een veilig palet nodig hebt dat er toch doordacht uitziet.