kleur speelt een integrale rol in UI ontwerp. Als het goed wordt gedaan, verbetert het de gebruikerservaring, beïnvloedt het de aankoopbeslissingen en weerspiegelt het de stem van de merken.

dus, hoe ontwerp je effectieve, toegankelijke en esthetisch aantrekkelijke interfaces voor kleurenblinde gebruikers?

hoewel de wetenschap achter kleurenblindheid vrij complex is, is de kern ervan dat kleurenblinde mensen moeite hebben om kleur duidelijk te zien of onderscheid te maken tussen sommige kleuren., Met dit in gedachten delen we in dit artikel enkele tips over hoe u de toegankelijkheid van uw site en de ervaring die het biedt voor kleurenblinde mensen kunt verbeteren.

kleurenblindheid in een digitale wereld

volgens studies is ongeveer 1 op de 12 mannen (en 1 op de 200 vrouwen) kleurenblind. Hoewel kleurenblinde mensen dingen net zo duidelijk kunnen zien als iedereen, zijn ze niet in staat om volledig rood, groen of blauw licht te onderscheiden. Er zijn verschillende soorten kleurenblindheid; deuteranopia en protanopia kleurenblindheid zijn de meest voorkomende.,

mensen met rood-groene kleurenblindheid (deuteranopia) hebben moeite om een onderscheid te maken tussen rood en groen. Evenzo, voor mensen met rode kleurenblindheid (protanopia), alle rode kleuren kijken saai.

wat dit betekent vanuit een ontwerp standpunt is dat het vertrouwen op kleur alleen voor leesbaarheid en affordance uw website moeilijk te gebruiken zou maken voor iemand die kleurenblind is.

u kunt de Coblis Kleurenblindingssimulator gebruiken om te zien hoe uw site eruit ziet voor kleurenblinde gebruikers.,

7 manieren waarop u de Kleurentoegankelijkheid voor kleurenblinde gebruikers kunt verbeteren

ontwerpelementen en technieken die de kleurentoegankelijkheid voor kleurenblinde gebruikers verbeteren, worden over het algemeen beschouwd als goede ontwerppraktijken. Terwijl je zou kunnen denken dat de esthetische aantrekkingskracht van uw website zou kunnen lijden als u ontwerp voor toegankelijkheid, dat is zeker niet het geval.

Hier zullen we een kijkje nemen op enkele manieren waarop u een meer toegankelijke gebruikersinterface kunt ontwerpen met kleurenblinde gebruikers in het achterhoofd.

# 1: Gebruik patronen en texturen

kleurverschillen zijn ongelooflijk belangrijk bij datavisualisatie, bijv., grafieken en cirkeldiagrammen. Het kiezen van kleuren met een lage contrastverhouding kan uw grafiek moeilijk te interpreteren voor kleurenblinde gebruikers.

Dit is wat u in plaats daarvan moet doen:

  • gebruik patronen en texturen om het voor gebruikers gemakkelijk te maken om verschillende segmenten te onderscheiden.
  • voeg tekstlabels toe aan segmenten om ze nog beter te begrijpen.

laten we eens kijken hoe een kleurenblinde persoon met tritanopia een blauw-groene staafgrafiek zou kunnen zien versus hoe ze dezelfde grafiek zouden zien met patronen en texturen.,

Dit is hoe het eruit zou zien als je elk segment zou labelen in plaats van patronen te gebruiken:

#2: Gebruik kleuren en symbolen

je moet niet alleen vertrouwen op kleur om fouten te communiceren of informatie over te brengen via je gebruikersinterface.

laten we eens een kijkje nemen op Facebook ‘ s aanmeldformulier bijvoorbeeld., Als het formulier alleen op kleur vertrouwde om gebruikers te laten weten dat ze een fout hadden gemaakt op een bepaald veld, zou het er ongeveer zo uit kunnen zien voor een Red-blind (protanopia) gebruiker:

Hier is een blik op Facebook ‘ s aanmeldformulier met symbolen en foutmeldingen bijgevoegd:

met behulp van pictogrammen en symbolen in formulieren om de gebruiker te laten weten dat ze hebben gemaakt een fout verbetert de toegankelijkheid en helpt hen hun fout sneller te corrigeren.

#3: Gebruik tekstlabels

het toevoegen van tekstlabels aan kleurenfilters en stalen verbetert de toegankelijkheid voor kleurenblinde gebruikers., Afhankelijk van het type kleurenblindheid, kunnen gebruikers het moeilijk vinden om onderscheid te maken tussen verschillende kleuren (of tinten) zonder een soort beschrijvende tekst.

bijvoorbeeld, zonder het beschrijvende tekstlabel op Amazon, zouden kleurenblinde gebruikers een rood shirt niet kunnen onderscheiden van een oranje of groen shirt.

het toevoegen van tekstlabels aan kleurfilters verbetert ook de toegankelijkheid voor mensen met een normaal zicht. Wit, gebroken wit en lichtgrijs zijn bijvoorbeeld vaak moeilijk te onderscheiden op monitors.,

#4: koppelingen onderstrepen

vaak gebruiken we lettertypekleur of lettertypegewicht om koppelingen aan te duiden. Hoewel het mogelijk is voor iemand met deuteranomalie, protanopia of tritanopia om ankertekst te onderscheiden van gewone tekst, is het zeker niet ideaal vanwege de lage contrastverhouding.

iemand met monochrome eigenschappen zou helemaal geen onderscheid kunnen maken tussen tekst en ankertekst en zou met de muis over de tekst moeten gaan om te zien of zijn cursor verandert in een aanwijzer.

daarom is het een goed idee om een onderstreping toe te voegen aan tekstlinks., Dit maakt het gemakkelijk om reguliere tekst en ankertekst onmiddellijk uit elkaar te houden. Hier is een voorbeeld van de Engadget-website:

#5: kleurencombinaties om

te vermijden bepaalde kleurencombinaties zijn niet ideaal voor kleurenblinde gebruikers omdat ze een lage contrastverhouding hebben of omdat ze moeilijk te onderscheiden zijn.,

Hier is een lijst van kleuren combinaties die u moet vermijden het gebruik in uw interface ontwerpen waar mogelijk om:

  • groen-rood
  • groen-blauw
  • groen-bruin
  • groen-zwart
  • groen-grijs
  • blauw-grijs
  • licht groen-geel
  • blauw-paars

Hier is wat groen-een rood en een blauw-paarse kleur combinaties eruit als een gebruiker met protanopia:

#6: Zorg Primaire Knoppen Opvallende

vaak, ontwerpers rekenen op kleur te maken van primaire knoppen staan., Het probleem hiermee is dat de kleur die u gebruikt moeilijk kan zijn voor kleurenblinde gebruikers om waar te nemen.

Dit is wat u in plaats daarvan moet doen:

  • vergroot de grootte van uw primaire knop.
  • Probeer verschillende plaatsingscombinaties.
  • verhoog het contrast tussen primaire en secundaire knoppen.
  • gebruik randen, pictogrammen of lettergewicht om primaire en secundaire knoppen te onderscheiden.

bijvoorbeeld, Reformatie gebruikt grootte en kleur om de primaire knop te benadrukken.,

en Firebox presenteert hun primaire knop in de rechterbenedenhoek en de secundaire knop in de linkerbovenhoek.

#7: verplichte formuliervelden markeren

kleurenblinde gebruikers kunnen moeite hebben om onderscheid te maken tussen verplichte en optionele velden als u alleen kleur gebruikt om verplichte velden op formulieren aan te duiden.

in plaats daarvan kunt u:

  • verplichte velden markeren met een asterisk (*).
  • Label velden met het woord vereist of optioneel.
  • verwijder optionele velden uit formulieren.,

conclusie

het ontwerpen van gebruikersinterface voor kleurenblinde gebruikers zal u helpen de toegankelijkheid van uw site voor gebruikers met een normaal zicht te verbeteren. Hoewel er geen one-size-fits-all oplossing is als het gaat om webtoegankelijkheid, zijn hier een paar tips die je in gedachten moet houden:

  • gebruik patronen en texturen om contrast te tonen in grafieken en grafieken.
  • gebruik kleuren en symbolen om foutmeldingen over te brengen.
  • voeg tekstlabels toe aan kleurfilters en stalen.
  • onderstreept koppelingen om onderscheid te maken tussen reguliere tekst en ankertekst.,
  • vermijd het gebruik van slechte kleurencombinaties zoals groen-rood en blauw-paars.
  • gebruik Grootte, plaatsing of lettertypegewichten om primaire knoppen op te laten vallen.
  • Markeer vereiste formuliervelden met een symbool (zoals een sterretje) of label ze.