Mooie, toegankelijke verkeerslichtkleuren

author
3 minutes, 22 seconds Read

Iedereen gebruikt ze: Groen, geel (of oranje), en rood. We gebruiken ze in datavisualisatie, we gebruiken ze in knoppen, we kleuren er tekst en iconen mee en stoppen ze in waarschuwingen. Ze worden vaak gebruikt op cruciale momenten, wanneer we succes aankondigen, of slecht nieuws brengen. We misbruiken ze ook, we gebruiken ze om aandacht te trekken waar dat niet relevant is. Wat we veel te vaak niet doen, is ze toegankelijk maken.

Een significante minderheid van de mensen is kleurenblind, en de meesten van hen hebben rood-groen kleurenblindheid. Sinds 2011 heb ik een oplossing moeten vinden voor kleurentoegankelijkheid in belangrijke interacties, zoals waarschuwingen voor vitale functies van patiënten, de kwaliteit van de patiëntenzorg, de status van de cloudserver of uitvoerende verkoopanalyses. Hier zijn enkele toegankelijkheidstips die ik onderweg heb opgepikt, evenals mijn persoonlijke sjabloon voor een bruikbaar, toegankelijk kleurenpalet voor verkeer.

Je kunt een prachtig, kleurenblind-vriendelijk palet ontwerpen, maar het kan nooit kwaad om de boodschap te versterken. In plaats van tekst te veranderen in rood of groen, zet je een anders gevormd rood of groen pictogram naast de tekst. Op die manier, zelfs als u geen controle hebt over uw kleurenpalet, of de grafiek in zwart-wit is afgedrukt, of uw gebruiker alleen in grijstinten ziet, hebt u uw punt gemaakt.

Casus in punt: Excel. Excel biedt pictogrammen in verkeerslichtkleuren om uw gegevensverhaal te helpen vertellen. Zorg ervoor dat u verschillend gevormde pictogrammen gebruikt, evenals verschillende kleuren! Dit is waarom:

Desktop Excel, Office 2013. Let op de rode en groene cirkels – kun je ze gemakkelijk uit elkaar houden? Microsoft heeft dit probleem in latere versies opgelost.

Deuteranopie en protanopie zijn twee veel voorkomende vormen van rood-groen kleurenblindheid. Het testen van uw kleuren aan de hand daarvan zal voor de meeste gebruikers een optimalisatie opleveren, maar pictogrammen helpen de deal te sluiten.

Vertrouw niet op vooraf ingestelde kleurenpaletten

Er zijn veel uiterst nuttige frameworks en boilerplates online. Ze voorzien in veel behoeften, maar niet allemaal hebben ze de tijd gehad om hun kleuren te optimaliseren voor kleurenblindheid.

Voorbeelden van populaire vooraf ingestelde kleurenthema’s die niet hebben gecontroleerd op toegankelijkheid in kleurgebruik. (Of: “Waarom geen oranje gebruiken?”)

De belangrijkste vraag bij het bekijken van uw rode, groene, oranje en gele kleuren is: “Zullen mijn gebruikers deze kleur herkennen als ze hem alleen zien?” Vertrouw er niet op dat de mensen die uw framework hebben gemaakt hier aan hebben gedacht. Ga het zelf maar na.

Hoe doe je dat, vraag je? Jarenlang was de enige oplossing die ik vond om te testen Adobe’s Photoshop, die protanopia en deuteranopia weergaven bood van wat ik ook aan het maken was. De opties staan onder Beeld → Proefopstelling (zie afbeelding hieronder).

Schermopname: het vinden van de kleurenblindheidsvoorbeelden in Adobe Photoshop.

Nu is de Corblindor Coblis (Kleurenblindheidssimulator) mijn favoriete hulpmiddel geworden. Maak snel een screenshot van je werk, en zie hoe het eruitziet voor veel verschillende soorten kleurenblindheid.

Plan vooruit met een kleurensjabloon

Ik heb in de loop der jaren veel kleurwerk voor datavisualisatie gedaan, en er is een patroon ontstaan dat ik nuttig vind. Ik bied het hier aan, in het belang van het bruikbaarder maken van gegevens. Ik raad u sterk aan deze benadering te overwegen wanneer u een kleurenpalet voor uw merk ontwikkelt.

Merk op hoe licht versus donker en warm versus koel het rood en groen van elkaar onderscheiden. Het geel moet beduidend lichter zijn dan het rood of het groen!

Hier zijn de belangrijkste richtlijnen:

  • Gebruik een lichte, een gemiddelde en een donkere kleur. Het geel moet een lichte kleur zijn.
  • Gebruik een warm groen en een koel rood, of een koel groen en een warm rood. Gewoon niet beide koel of beide warm.
  • Geen oranje. Omdat het zo veel lichter, het gebruik van geel in plaats van oranje maakt het veel minder waarschijnlijk dat uw “waarschuwing” kleur zal conflicteren met uw “succes” groen voor kleurenblinde gebruikers, of te veel lijken op uw “ernstig probleem” (fouten, bijvoorbeeld) rood.

That’s it! Bedankt voor het lezen. Veel plezier met het vertellen van goede verhalen met uw gegevens.

Similar Posts

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.