Contrast tussen tekst en de achtergrondkleur moet aan minimale eisen voldoen. Zo is de tekst beter leesbaar voor slechtzienden.
Grote tekst is gedefinieerd als tekst van minimaal 18pt (24px) voor normale tekst, of 14pt (19px) voor dikgedrukte tekst (font-weight 700 of hoger).
Let op: logo’s en beeldmerken vallen buiten de eisen van 1.4.3. Een logo hoeft dus niet aan minimale contrastverhoudingen te voldoen.
Hoe bepaal je het kleurcontrast van tekst en opzichte van de achtergrondkleur? De twee makkelijkste manieren zijn via DevTools en de Color Contrast Analyser (CCA).
Download en installeer de Color Contrast Analyser op je Mac of Windows computer. Vervolgens kun je met de twee pipetjes de voor- en achtergrondkleur selecteren. In het invoerveld kun je ook direct de HEX-code van de kleuren invullen.
Zo zie je direct de contrastverhouding en of deze voldoet aan de WCAG-criteria. In dit geval is de verhouding 6,5:1. Daarmee wordt voldaan aan WCAG niveau AA, maar niet aan niveau AAA. Niveau AA is opgenomen in de Nederlandse wetgeving als standaard.
Een alternatieve manier om kleurcontrast te controleren is via de browser. Bijvoorbeeld via Chrome’s DevTools. In de browser zit namelijk een ingebouwde contrastchecker. Wanneer je een element inspecteert, zie je direct de contrastverhouding. Hier staat ook een vinkje, waarmee je direct ziet of je wel of niet voldoet aan succescriterium 1.4.3.
De visuele weergave van tekst en afbeeldingen van tekst heeft een contrastverhouding van ten minste 4,5:1, behalve in de volgende gevallen:
Wij zijn een full-service partner voor digitale toegankelijkheid: bewustwording, advies en borging. Samen maken we digitale dienstverlening toegankelijk en inclusief.
