9. Contrast en kleur
9.1 Contrastratio: een eenduidige maat voor contrast
Het contrast tussen 2 kleuren heeft een waarde van 1 tot 21. Deze waarde heet de contrastratio. Wanneer er geen contrast is, is de waarde 1 (officieel is dat 1:1). Bij een maximaal contrast (zwart op wit of wit op zwart) is dat 21 (officieel 21:1).
9.2 WCAG-eisen voor contrast
| Contrast-eis | Type tekst |
|---|---|
| 4,5 | Gewone tekst |
| 3,0 | Grote tekst, minimaal 18 punts |
| 3,0 | Vette tekst, minimaal 14 punts |
| 3,0 | Hyperlinktekst met omringende tekst |
| 3,0 | Afbeeldingen |
Alhoewel dus 4,5 voldoende is, adviseren wij om minimaal 5,0 te gebruiken, omdat 4,5 nog steeds weinig contrast geeft. Voor gewone tekst is het advies zelfs 7,0.
9.3 Hexadecimale codes voor kleur
Elke kleur op het web kan uitgedrukt worden in een code: een rgb-waarde of een hexadecimale code. We gebruiken hier voor de uitleg de hexadecimale code.
Hexa betekent 16 en hexadecimaal staat voor een cijfer of letter tussen 0 t/m 9 en a t/m f. Dit zijn 16 tekens, vandaar hexa.
De code FFFFFF is bijvoorbeeld wit en 000000 is zwart.
Bij het vaststellen van het contrastverschil tussen 2 kleuren vergelijken we met een tool beide hexadecimale codes.
9.4 Contrast testen met de Colour Contrast Analyser
Met de Colour Contrast Analyser van de Paciello Group kun je het contrast in een document meten. Het is een klein programma dat je downloadt op je computer.
Helaas werken veel mensen in een afgesloten werkomgeving waar ze geen programma's mogen installeren. Alternatief is dat je met Acrobat Pro het contrast meet in de pdf.
9.5 Contrast van tekst
Gewone tekst moet een contrastratio hebben van minimaal 4,5 met de achtergrond. Is de tekst vet of groter, dan geldt een lagere eis, namelijk minimaal 3,0. Bij welke grootte dit geldt, leggen wij uit in ons e-book WCAG in de praktijk.
In het voorbeeld hieronder is de tekst donkergrijs en de achtergrond lichtgrijs. We gaan kijken of het contrast tussen de tekst en de achtergrond voldoende is.
Met Color Contrast Analyzer zien we de volgende hexadecimale waardes:
- Tekstkleur: #8B8A8C
- Achtergrondkleur: #EDEDED
Het contrastratio is 2,9. Dat is lager dan de minimale waarde 4,5 en is dit kleurcontrast onvoldoende.
Het contrast van een hyperlink met de omringende tekst moet ook minimaal 3,0 zijn als de hyperlink verder geen ander visueel verschil met gewone tekst heeft, dus bijvoorbeeld als de link niet onderstreept is. In het voorbeeld hieronder is de link blauw en de omringende tekst zwart. De contrastratio is 5,5. Dat is ruim meer dan 3,0 en is dus goed.
[image|contrast-link-9f98.gif|center|]9.6 Contrast van afbeeldingen
Bij afbeeldingen kan het contrast best wel ingewikkeld zijn. Dat komt omdat op verschillende plekken in de afbeelding het contrast goed moet zijn:
- Voor tekst in de afbeelding: contrastratio minimaal 3,0 met de achtergrond
- Tussen de afbeelding en de achtergrond: contrastratio minimaal 3,0
- Tussen de vlakken in een grafiek: contrastratio minimaal 3,0
Vooral het contrast tussen de vlakken kan een uitdaging zijn. Een mogelijkheid is om te kiezen voor een lijntje om elk vlak. Want dan geldt het contrast tussen het vlak en het lijntje.
9.7 Gebruik van kleur voor betekenis
Als je alleen kleur gebruikt om informatie over te brengen, dan kan het zijn dat iemand die kleuren niet goed waarneemt dit niet begrijpt. Denk bijvoorbeeld aan mensen met kleurenblindheid.
Een voorbeeld is de afbeelding hieronder van de pistes voor het skiën. Of de piste open of dicht is, is aangeven met een groen rondje of een rood rondje. Als je kleurenblind bent weet je dus niet of de piste open of dicht is.
De oplossingen zijn vaak makkelijk, zoals in het voorbeeld hieronder van een kaart (Bron: Geonovum). Linksboven het origineel (1), linksonder de versie bij kleurenblindheid (2). Het onderscheid dat met rood-groen was aangebracht is verdwenen. Rechtsboven (3) en rechtsonder (4) de aangepaste afbeelding. Hierbij is de betekenis ook met een icoontje van een huis en een boom overgebracht. En zo blijft de afbeelding ook begrijpelijk als je minder goed kleuren ziet.
Nog een voorbeeld hieronder. Op deze pagina van teletekst is de kleur voor de koersen die gedaald zijn. Maar bij die gedaalde koersen staat ook een minteken. En gestegen is groen en een plusje
Zo is de betekenis met kleur én met tekst overgebracht. En zo is het dus voor iedereen toegankelijk.
