Kleur in een ontwerp gebruiken

Ongeveer 8 procent van de mannen heeft een rood-groenkleurenzienstoornis. Alleen rode foutmarkeringen laten velen dus raden.

Laat kleur nooit alleen de boodschap dragen

WCAG 2.2-succescriterium 1.4.1, Use of Color, hoort bij niveau A, het basisniveau. Kleur mag niet het enige visuele middel zijn om informatie over te brengen, een handeling aan te geven, een reactie te vragen of een visueel element te onderscheiden. Een rode rand om een formulierveld met een fout is prima, zolang ook een pictogram of tekst uitlegt wat er mis is. Een lijndiagram met vijf kleuren heeft ook labels, verschillende lijnstijlen of markeringen nodig. Links in een alinea hebben een onderstreping of een ander signaal naast kleur nodig.

Dat komt deels door kleurenzien. Volgens OpenStax hebben sommige mensen door een genetische variatie twee kegeltjestypen in plaats van drie, of één kegeltjespigment dat anders werkt. Ze zijn niet blind voor een kleur, maar sommige kleuren die de meeste mensen uit elkaar houden, lijken voor hen hetzelfde. De rood-groenvormen komen het vaakst voor, bij ongeveer 8% van de mannen. Er zijn ook andere redenen: een telefoon in fel zonlicht, een goedkope projector, een zwart-witafdruk. Een ontwerp dat in grijswaarden werkt, werkt in al die situaties.

Lichtheid doet het meeste werk

Daarom plannen ervaren ontwerpers een palet in twee rondes. Eerst kiezen ze lichtheidsstappen: een heel lichte achtergrond, een middentoon voor randen en een donkere toon voor tekst. Daarna kiezen ze tinten. Elk tekst-achtergrondpaar controleren met de contrastverhouding uit hoofdstuk 6 is de snelste manier om te zien of de stappen ver genoeg uiteenliggen. Complementaire tinten garanderen geen contrast. Het merkoranje en de blauwe tegenkleur hebben in het model dezelfde HSL-verzadiging en lichtheid, maar onderling slechts 1.06:1 contrast. Twee kleuren kunnen in tint zo ver mogelijk uit elkaar liggen en toch moeilijk leesbaar zijn op elkaar.

Een eenvoudige werkwijze brengt de hoofdstukken van deze cursus samen. Begin met één tint die bij het onderwerp past. Kies met een harmonie uit hoofdstuk 4 één of twee ondersteunende tinten. Geef volgens de Delaware-vuistregel de hoofdkleur het meeste oppervlak, ongeveer 60%, de tweede kleur 30% en een accent 10%. Kies voor elk tekstpaar de lichtheid tot minstens 4.5:1 wordt gehaald, of 3:1 voor grote koppen en pictogrammen. Controleer ten slotte dat niets alleen van kleur afhangt: fouten hebben tekst, links zijn onderstreept en diagrammen hebben labels.

Grafieken verdienen hun eigen zorg, omdat ze vaak veel kleuren tegelijk nodig hebben. De gids van de University of Delaware wijst naar ColorBrewer, een hulpmiddel voor paletten voor kaarten en grafieken. Voor waarden die van laag naar hoog lopen blijft een sequentieel palet van één tint, van licht naar donker, ook in grijswaarden werken. Gebruik voor categorieën zo weinig mogelijk kleuren, zet bij elke lijn of balk een label in plaats van alleen in een legenda, en laat de lichtheidsstappen genoeg verschillen zodat twee buren nooit op elkaar lijken.