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.
Gebruiken voor
- Accenten
- Indicatoren
Mauve
#8b4a6a
rgb(140, 75, 107)
Mauve 40%
#d1b7c4
rgb(209, 183, 196)
Steunkleuren
Neutrale kleuren
Voor bodytekst gebruiken we hoofdzakelijk zwart. 90% zwart is minder intensief dan vol zwart en verhoogt de leesbaarheid als er lange stukken tekst op de pagina staan. De grijstinten komen voor als onderscheidende achtergrond of scheidingslijn.
Zwart 90%
#191919
rgb(25, 25, 25)
Zwart 60%
#666
rgb(102, 102, 102)
Zwart 40%
#999
rgb(153, 153, 153)
Zwart 20%
#ccc
rgb(204, 204, 204)
Zwart 10%
#e5e5e5
rgb(229, 229, 229)
Zwart 5%
#f2f2f2
rgb(242, 242, 242)
Secundaire kleurenpalet
De secundaire kleuren zijn ontwikkeld naast de communicatiekleuren en zijn ontstaan vanuit de basiselementen: Aarde Water Lucht en Vuur. Warme en koude keuren die de communicatiekleuren aanvullen. Deze kleuren kun je gebruiken als de communicatiekleuren niet toereikend zijn. Bijvoorbeeld in tabellen en grafieken waar meer kleurvariatie nodig is om duidelijk onderscheid te kunnen maken in verschillende waarden of legenda's. Dus nooit als steunkleur voor accenten in de reguliere opmaak. Dan gebruik je uitsluitend het primaire kleurenpalet.
Let op: gebruik deze kleuren alleen als het niet lukt met de primaire kleuren.
Bruin
#644f49
rgb(100, 80, 74)
Rood
#ce3f51
rgb(206, 63, 81)
Paars
#676cb0
rgb(104, 108, 176)
Donkerblauw
#2b5780
rgb(43, 87, 129)
Lichtblauw
#6ca4d9
rgb(108, 165, 218)
Lime
#79b929
rgb(121, 185, 41)
Geel
#dcd400
rgb(220, 213, 0)
Oranje
#e17000
rgb(225, 112, 0)
Opmerkingen secundaire kleuren
Ter herhaling, communiceer niet alleen met kleur je boodschap. Hieronder staan de kleuren die het vaakst een betekenis mee krijgen. Let bij deze kleuren dus extra op.
Rood
Rood wordt vaak gebruikt voor foutsituaties. Een industriestandaard. Zorg er altijd voor dat de foutmeldingen helder en duidelijk zijn voor elke gebruiker. Als de kleur wegvalt moet de tekst en context communiceren dat er iets is fout gegaan.
Rood
#ce3f51
rgb(206, 63, 81)
Rood 20%
#f5d8dc
rgb(245, 217, 220)
Rood 110%
#b62f41
rgb(182, 47, 65)
Geel
Geel is een waarschuwingskleur maar niet altijd. Hier geldt net als voor foutmeldingen: communiceer duidelijk met de tekst de aard van een waarschuwing als het een waarschuwing is.
Geel
#dcd400
rgb(220, 213, 0)
Geel 20%
#f8f6cc
rgb(228, 241, 212)
Lime
Gebruik de kleur lime voor niet-essentiële beeldmerken, zoals het toevoegen van vinkjes na een succesvolle post. Het is geen interactiekleur, in tegenstelling tot andere groenkleuren.
Lime
#79b929
rgb(121, 185, 41)
Lime 20%
#e4f1d4
rgb(228, 241, 212)
Blauw
Online wordt blauw vaak gebruik als informatie-indicator. Gebruik het niet teveel. Als een kleur of kleurvakken teveel gebruikt worden, gaan mensen deze negeren.
Lichtblauw
#6ca4d9
rgb(108, 165, 218)
Lichtblauw 20%
#e1ecf7
rgb(226, 237, 247)