Ga naar hoofdinhoud

WCAG

WCAG-succescriterium 1.4.3 Contrast (minimum)

Niveau AA

W3C referenties

Uitleg

Het contrast van de tekstkleur ten opzichte van de achtergrondkleur moet hoog genoeg zijn, zodat de tekst in het algemeen goed leesbaar wordt gevonden.

De criteria voor kleurcontrast zijn:

  • 4,5:1 contrast voor normale tekst.
  • 3:1 contrast voor grotere letters (vanaf 24 pixels).
  • 3:1 contrast voor vette letters (vet en groter of gelijk aan 19 pixels).

Tekst die over een afbeelding staat, moet ook voldoende contrast hebben met de kleuren in de afbeelding er omheen.

Deze eis geldt niet voor tekst op een logo of van een merknaam, of tekst op een afbeelding die alleen ter decoratie dient en geen deel uitmaakt van de inhoud.

Let er ook op dat bij inzoomen tot 400% en bij verschillende schermgroottes of schermoriëntaties, de tekst over andere delen van een afbeelding of stijlelement kan vallen dan je oorspronkelijk in gedachten had.

Bij vergroten van de tekst tot 200% kan de tekst uit het kader lopen. Het kan zijn dat de tekst dan onleesbaar wordt omdat de achtergrondkleur anders is dan die van het kader.

Overleg met de bouwer over goede en flexibele oplossingen voor het gebruik van teksten.

Gerelateerde NL Design System-richtlijnen

Bronnen en tools

Hoe te testen

Bepaal het kleurcontrast van tekst ten opzichte van de achtergrond. Hoe je test is afhankelijk van het moment van testen.

Neem ook afbeeldingen waar tekst in staat mee, als deze tekst onderdeel is van de content. Hier is de Colour Contrast Analyser (CCA) handig, omdat je daarmee een pipetje kan gebruiken als je de kleurcodes niet weet.

Let op: Deze eis geldt niet voor tekst op een afbeelding van een logo of van een merknaam, of tekst op een afbeelding die alleen ter decoratie dient en geen deel uitmaakt van de inhoud.

Het NL Design System biedt een makkelijke tool voor het bepalen van kleurcontrast aan. Door het invoeren van de hexadecimale code van de tekstkleur en achtergrondkleur kun je controleren of de tekst voldoet aan WCAG op: Contrast van kleuren.

Voor ontwerpers is er voor Figma een aantal goede tools: Figma contrast accessibility plugin tools.

Voor developers: axe DevTools berekent het kleurcontrast ten opzichte van de tekst in de browser: axe DevTools browser add-on.

Let op: Controleer het kleurcontrast altijd in de gegenereerde webpagina in een browser en niet alleen in de code zelf. Linters kunnen helpen om laaghangend fruit te ondervangen, maar de eindtest voor kleurcontrast moet gebeuren op de webpagina zelf als alle componenten worden samengevoegd tot één geheel.

Ben je geen designer of developer en test je het kleurcontrast in de browser, dan is WAVE handig: WAVE Web Accessibility Evaluation Tools.

Verder staan er tools bij de bronnen op Richtlijnen NL Design System voor kleuren en als je zoekt op "Contrast Checker" in de zoekmachines vind je vele andere, kies degene die het beste bij jouw manier van werken past.

Controleer in de volgende situaties of het kleurcontrast van de tekst voldoende blijft:

  • Verschillende gebruikelijke schermgroottes inclusief mobiele weergave.
  • Verschillend oriëntaties: portrait en landscape.
  • Vergroot de tekst alleen tot 200%.
  • Zoom in tot 400%.
  • Is er een dark mode aanwezig? Test ook hier het kleurcontrast van de tekst.
  • Controleer het kleurcontrast van placeholders.
  • Controleer de verschillende weergave van buttons en de links zoals: met toetsenbordfocus, als je er overheen hovert met de muis, ingedrukt, al eerder bezocht.
  • Vergeet ook de skiplinks niet.

Gebruikersonderzoek

Heb je gebruikersonderzoek gedaan dat betrekking heeft op dit succescriterium en wil je dit delen? Kijk eens bij Gebruikersonderzoeken delen op gebruikersonderzoeken.nl.

Aanvullingen of opmerkingen?

Deze pagina's over WCAG worden onderhouden door het NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.