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

9. Contrast van tekst en afbeeldingen

Tekst moet voldoende contrast hebben met de achtergrond om goed leesbaar te zijn. WCAG stelt hiervoor als minimum 4,5 voor gewone tekst. Ook moet het contrast tussen een link en de omringende tekst voldoende zijn. Daarvoor geldt een minimum van 3,0.

9.1 Contrastratio: een eenduidige maat voor contrast

Het contrast tussen 2 kleuren heeft een waarde van 1 tot 21. Deze waarde heet het 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).

Een handige tool voor het meten van contrast in een pdf is Colour Contrast Analyser. Deze is er voor Windows en de Mac.

9.2 Contrast tekst en achtergrond

Binnen WCAG 2 level AA zijn de eisen:,

  • Tekst met tekstgrootte kleiner dan 14-punts vetgedrukt of 18-punts normaal: minimale contrastwaarde van 4,5.
  • Tekst met tekstgrootte van ten minste 14-punts vetgedrukt of 18-punts normaal: minimale contrastwaarde van 3.

In de meeste gevallen is minimaal 4,5 de goede waarde om te gebruiken.

Hieronder een voorbeeld van een nieuwsbrief. De fontgrootte is 9 punts. Het contrast van het geel met het wit is 1,7 : 1,0. Veel lager dus dan de vereiste 4,5; het contrast voldoet niet.

Wit op geel: onvoldoende contrast, namelijk contrastratio 1,7 (Gemeten met Colour Contrast Analyzer)

9.3 Contrast link met omringende tekst

De kleur van een hyperlink moet een minimaal contrast met de omringende tekst hebben van 3,0. Dat geeft niet veel ruimte aan de kleur van een hyperlink, want de link moet zelf ook een contrast met de achtergrond van minimaal 4,5 hebben.

In het voorbeeld hieronder zijn de contrastwaarden van de hyperlink goed:

  • Voorgrond-achtergrond: contrastratio donkerblauw op wit: 6,3
  • Link met omringende tekst: contrastratio donkerblauw met zwart: 3,3

9.4 Contrast van afbeeldingen

In WCAG 2.1 is er een contrasteis toegevoegd voor afbeeldingen. De eis is een contrastratio van minimaal 3,0 van de afbeelding met de achtergrond.

Denk hierbij bijvoorbeeld aan een knop, of een lichtblauwe twitter-icoon op een witte achtergrond.

Uitgezonderd van deze eis zijn logo's of inactieve elementen (bijvoorbeeld als een knop 'greyed-out' is.)

Hieronder 2 voorbeelden van een Twitter-icoon. De linker heeft een contrastratio van 2,6 met de witte achtergrond. Dat is dus onvoldoende. Het rechter icoon heeft een contrastratio van 3,5 met de achtergrond, voldoende dus.

top

Feedback

Contact

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