Gebruik voldoende contrast tussen voor- en achtergrondkleur

Bereken de contrastverhouding tussen de kleur van 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 ik dit toe?

Als je voldoet aan de volgende eisen dan is de tekst op je website wat betreft kleurcontrast toegankelijk:

  1. Bij alle teksten (behalve de uitzonderingen die hieronder zijn beschreven) voldoet het contrast tussen voorgrondkleur en achtergrondkleur aan de volgende eisen:
    1. ‘Normale’ tekst heeft een contrastverhouding van 4,5:1 of hoger.
    2. ‘Grote’ tekst heeft een contrastverhouding van 3:1 of hoger.
  2. Alternatief voor punt 1: Of 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.
  3. Zowel de kleur van de tekst als die van de achtergrond is gedefinieerd in het CSS-bestand.

Tip: test de contrastverhouding tussen voorgrond- en achtergrondkleur met een contrast-tool. Enkele tools:

Uitzonderingen

De eisen gelden niet voor:

  1. Tekst op knoppen en andere elementen die inactief zijn (bijvoorbeeld een knop die je niet aan kunt klikken).
  2. Tekst die puur decoratief is, zoals een achtergrondpatroon met letters die verder geen betekenis hebben.
  3. Tekst die toevallig op een foto staat maar niet de reden is dat de foto wordt getoond (de tekst heeft zelf geen informatieve waarde).
  4. Tekst die onderdeel is van een logo of 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 ruwweg overeen met 1,5 em of 150%.

Tip: Wil je op safe 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 juist de donkerste kleuren. Daarnaast kun je ook specifiek kijken welke delen van de afbeelding daadwerkelijk 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 om 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 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.

Bouwer of redacteur?

De ontwerper moet ervoor zorgen dat het kleurcontrast overal voldoende is. Hij moet daarbij ook denken aan de kleuren voor bijvoorbeeld een bezochte link. De bouwer moet 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.

Technische details

  • Hoort bij toegankelijkheidseis 1.4.3
  • Niveau AA

Hoort bij