Kleuren
Goed kleurgebruik is essentieel om een bezoeker te ondersteunen in het gebruik van een website. Slecht kleurgebruik daarentegen maakt een website ontoegankelijk. Daarom staan op deze pagina niet alleen de kleuren, maar ook hoe deze toe te passen.
Toegankelijkheid en kleur
Geef geen betekenissen aan kleuren
Een succes criteria van de WCAG is 1.4.1 Use of Color:
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Gebruik dus nooit alleen kleur om te communiceren met een gebruiker.
Sommige kleuren hebben online een betekenis gekregen omdat vele websites een aantal kleuren voor specifieke situaties gebruikt. Rood = fout, Geel = pas op, Groen = succes. Ook al gebruiken vele websites dit patroon, kleur alleen is niet genoeg! Juist wanneer je een van deze kleuren toepast wees dan extra waakzaam. Zorg ervoor dat via de tekst en context de boodschap ook overkomt voor mensen die de kleuren niet kunnen zien.
Contrast tussen kleuren
Essentieel kleurencontrast wordt benoemd in succes criteria 1.4.3 Contrast (minimum):
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for ...
Alle kleur en tekst combinaties die je op deze pagina ziet, voldoen aan de WCAG AA contrast waarde van 4.5:1. Contrast kun je checken op een website zoals Webaim.
Er zijn uitzonderingen voor de 4.5:1 waarde. Deze zijn alleen van toepassing op grote tekst, decoratieve elementen en logo's. Voor specifieke uitleg zie het WCAG succescriteria.
Primaire kleuren
Groen is de basis kleur van de DSO-huisstijl en zorgt voor een rustige en natuurlijke uitstraling. De kleuren voor het beeldscherm moeten voldoende contrast hebben in verband met Leesbaarheid. Gebruik nooit de printwaarden voor online. Bosgroen gebruiken we voor titels, menu, etc. Grasgroen veelal voor interactieve elementen. En de steunkleur Mauve voor ondersteunende UI elementen
Bosgroen
Gebruiken voor
- Titels
- Subtitels
- Menutekst
Bosgroen komt vaak voor in titels (headings) van het DSO. Deze titels zijn meestal statisch. Wil je een interactieve titel, zet er dan een icoon voor of achter. Zoals bij card list en documentheader, zodat de gebruiker weet dat interactie mogelijk is.
Bosgroen
#275937
rgb(39, 89, 55)
Bosgroen 80%
#527a5e
rgb(82, 122, 94)
Bosgroen 60%
#7d9886
rgb(125, 155, 135)
Bosgroen 40%
#a8bcaf
rgb(168, 188, 175)
Bosgroen 10%
#e9eeeb
rgb(233, 238, 235)
Bosgroen 140%
#173521
rgb(23, 53, 33)
Grasgroen
Gebruiken voor
- Call to action
- Knoppen
- Interacties
Grasgroen is onze hoofdinteractie kleur. Is iets grasgroen? Dan is het aanklikbaar. Gebruik deze kleur dus niet ter decoratie.
Grasgroen
#39870c
rgb(57, 135, 12)
Grasgroen 80%
#609f3c
rgb(96, 159, 60)
Grasgroen 40%
#afcf9d
rgb(175, 207, 157)
Grasgroen 10%
#ebf3e6
rgb(235, 243, 230)
Mauve
Mauve is een accentkleur voor componenten in de Toolkit. Het wordt gebruikt als indicator voor het actieve menu en als achtergrond kleur voor de accordion.