Omslag van 'Toegankelijke pdf's maken met Microsoft Word'

11. Contrast en kleur

Voldoende contrast bij tekst en afbeeldingen is nodig om ze te kunnen lezen en te bekijken. WCAG stelt hier eisen aan. Ook kun je beter geen betekenis overbrengen met kleur.

11.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).

Contrastratio: 21 = maximaal contrast, 1 = minimaal contrast (bijvoorbeeld wit op wit)

11.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.

11.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.

11.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.

11.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|]

11.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.

11.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.

Met groene, gele en rode rondjes is aangegeven of de pistes open zijn.
Bij rood-groen-kleurenblindheid vervalt het verschil tussen de kleuren en is niet te zien of de piste open 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.

top

Wat vind je van dit hoofdstuk?

Feedback

Contact

Vul dit in als je wil dat we contact met je opnemen.