Richtlijnen NL Design System voor kleuren

Kleuren zijn een belangrijk onderdeel van een ontwerp. Ze zorgen voor een visuele toon en helpen bij het overbrengen van functie en betekenis.

Kleur wordt echter niet door iedereen op dezelfde manier ervaren. Daarom hebben kleuren een ondersteunende en geen essentiële rol.

Overzicht richtlijnen

Kleurcontrast voor tekst

Voldoende contrast zorgt ervoor dat teksten goed leesbaar zijn. Ook wanneer iemand slechtziend is of als de zon op je smartphone schijnt.

Kleurcontrast voor niet-tekstuele content

Zorg voor voldoende kleurcontrast tussen de achtergrondkleur en de kleur van componenten die visueel betekenis hebben.

Gebruik kleur met een doel

Als je kleuren gebruikt doe je dat met een bepaald doel, hierdoor hebben ze een betekenis. Het is belangrijk dat die kleur consistent hoort bij die betekenis.

Wanneer je alleen kleur gebruikt om informatie over te brengen kan iemand die kleurenblind is de dit soms niet goed interpreteren. Maak daarom gebruik van tekst, iconen en/of andere visuele elementen om de intentie van de boodschap te versterken.

Verschillen in waarneming van kleur

Vergeet niet dat mensen kleur op verschillende manieren kunnen waarnemen en ervaren. Soms zelfs helemaal niet.

Voorkeursinstellingen voor kleur

Vergeet niet dat gebruikers mogelijk voorkeursinstellingen voor kleuren hebben toegepast.

Bronnen

Color and Contrast - Nate Baldwin
Website met uitgebreide en interactieve documentatie over kleur.
Accessible Palette - Eugene Fedorenko
Online tool waarmee je een kleurenpalet kunt genereren en direct contrast kunt checken.
Contrast grid - Eightshapes
Online tool waarbij je meerdere kleuren kunt invullen. Vervolgens ontstaat er een tabel waardoor je het contrast kunt checken.
Color review - Anton Robsarve
Online tool waarbij je twee kleuren kunt invullen. Vervolgens kun je checken hoeveel contrast deze kleurcombinatie oplevert. Daarnaast heb je de mogelijkheid om via een colorpicker naar voldoende contrast op zoek te gaan.
Radoma11y - Components AI
Online tool die willekeurig twee kleurcombinaties samensteld die altijd voldoende contrast hebben.
Who can use - Corey Ginnivan
Online tool waarbij je twee kleuren kunt invullen. Vervolgens kun je checken hoe deze kleurcombinatie overkomt bij verschillende visuele beperkingen.
Viz palette - Elijah Meeks & Susie Lu
Online tool waarbij je meerdere kleuren kunt invullen specifiek voor data visualisatie. Vervolgens kun je checken hoe deze kleurcombinatie overkomt bij verschillende visuele beperkingen.
Chrome plugin: Colorblindly
Browser plugin waarmee je kunt checken hoe een webpagina overkomt bij verschillende vormen van kleurenblindheid.
Orange you accessible?
Artikel over een onderzoek naar contrast voor de kleur oranje.
Guide windows high contrast mode
Artikel waarin wordt beschreven hoe je een website kan inrichten zodat Windows High Contrast mode wordt ondersteund.

Deel je gebruikersonderzoek

Er is nog veel te onderzoeken over het gebruik van kleur. Doe je gebruikersonderzoek? Deel dan alsjeblieft je bevindingen op gebruikersonderzoeken.nl zodat we hiervan allemaal kunnen leren.

Over deze richtlijnen

Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.

We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Deel je mening op GitHub met je suggesties.