Bereken de contrastverhouding tussen de kleur van de tekst en de achtergrondkleur met een contrast-tool. De contrastverhouding moet ten minste 4,5:1 zijn voor normale tekst en 3:1 voor grote tekst. De eisen gelden voor echte tekst, maar ook voor afbeeldingen van tekst.
Hoe pas je dit toe?
Als je voldoet aan de volgende eisen dan is de tekst op je website wat betreft kleurcontrast toegankelijk:
- Bij alle teksten (behalve de uitzonderingen die hieronder zijn beschreven) voldoet het contrast tussen voorgrondkleur en achtergrondkleur aan de volgende eisen:
- ‘Normale’ tekst heeft een contrastverhouding van 4,5:1 of hoger
- ‘Grote’ tekst heeft een contrastverhouding van 3:1 of hoger
- Alternatief voor punt 1: Er is een link of knop (met voldoende contrast) waarmee bezoekers kunnen switchen naar een versie van de webpagina die aan de contrasteisen voldoet. Vaak wordt dit een ‘hoog contrast’-versie genoemd.
- Zowel de kleur van de tekst als die van de achtergrond is gedefinieerd in het CSS-bestand.
Tip: test de contrastverhouding met een contrast-tool
Test de contrastverhouding tussen voorgrond- en achtergrondkleur met een contrast-tool.
Uitzonderingen
De eisen gelden niet voor:
- Tekst op knoppen en andere elementen die inactief zijn (bijvoorbeeld een knop die je niet aan kunt klikken).
- Tekst die puur decoratief is, zoals een achtergrondpatroon met letters die verder geen betekenis hebben.
- Tekst die toevallig op een foto staat, maar niet de reden is dat de foto wordt getoond (de tekst zelf heeft geen informatieve waarde).
- Tekst die onderdeel is van een logo of een merknaam.
‘Normale’ en ‘grote’ tekst
De mate van contrast die vereist is, hangt samen met de grootte van de tekst. Verschillende apparaten en schermgroottes geven letters op een andere grootte weer, door verschillen in berekening en resolutie. Ook de aard van het lettertype zelf heeft invloed op de leesbaarheid. Een ‘dun’ en smal lettertype zal minder goed te lezen zijn dan een zwaar en breed lettertype.
In de toegankelijkheidseisen zijn de tekstgroottes die overeenkomen met ‘normaal’ en ‘groot’ aangegeven in de meeteenheid ‘punt’ (pt). Dit is een absolute eenheid, die niet geschikt is voor gebruik op het web, maar alleen voor print.
- Met ‘normale tekstgrootte’ wordt een grootte van 14 punt of minder bedoeld. Dit komt ruwweg overeen met 1,2 em of 120%. De standaardtekst moet dan op 100% zijn ingesteld.
- Met ‘grote tekst’ wordt een grootte van ten minste 18 punt of 14 punt vetgedrukt bedoeld. Dit komt ongeveer overeen met 1,5 em of 150%.
Wil je op safe spelen?
Wanneer je op safe wil spelen, dan volg je de contrasteisen voor normale tekst gewoon voor alle tekst, ook als deze groter is weergegeven.
Voorbeelden
Afbeelding als achtergrond
Ook als je een afbeelding gebruikt als achtergrond onder een tekst, moet het contrast tussen de afbeelding en de tekst voldoende zijn. Je kunt dit controleren door de kleuren uit de achtergrondafbeelding die het dichtst in de buurt van de kleur van de tekst komen te vergelijken met de tekstkleur.
- Is de tekst wit, dan kies je dus de lichtste kleuren uit de achtergrondafbeelding.
- Is de tekst zwart, dan kies je juist de donkerste kleuren.
Daarnaast kun je ook specifiek kijken welke delen van de afbeelding werkelijk achter de tekst zitten en die kleuren vergelijken. Let er wel op dat de positie van de achtergrondafbeelding kan afwijken op verschillende apparaten en schermgroottes.
Schaduw en rand rond de tekst
Een manier om het contrast tussen tekst en achtergrond te verbeteren is om een rand om elke letter te plaatsen of een schaduw achter de tekst.
- Bij een rand gebruik je de kleur van de rand als voorgrondkleur in plaats van de kleur van de letter zelf.
- Bij een schaduw gebruik je de kleur van de schaduw als achtergrondkleur in plaats van de oorspronkelijke achtergrondkleur.
Hoe draagt dit bij aan een betere website?
Door voldoende contrast tussen tekst en achtergrond toe te passen zorg je ervoor dat de kleur geen bepalende factor meer is voor het wel of niet kunnen waarnemen van een tekst.
In onderzoeken is aangetoond dat de genoemde contrastverhoudingen voldoende zijn voor mensen met diverse visuele beperkingen, zoals verschillende vormen van kleurenblindheid. Ook mensen die door ouderdom minder contrast kunnen waarnemen zijn gebaat bij teksten die voldoende contrast hebben.
Voor designers
De ontwerper moet ervoor zorgen dat het kleurcontrast overal voldoende is. Hij moet daarbij ook denken aan kleuren voor bijvoorbeeld een bezochte link.
Voor ontwikkelaars
De bouwer moet ervoor zorgen dat de exacte kleuren behouden blijven bij omzetting van het ontwerp naar code. De bouwer kan in het CMS beperkingen inbouwen zodat redacteuren geen lage kleurcontrasten kunnen gebruiken bij het aanmaken en bewerken van de inhoud van de website.