Design dat iedereen kan lezen
Duidelijk contrast maakt content makkelijker om te zien en te begrijpen.
Voorbeeld van de kleurencombinatieContrastverhouding
17.74:1
WCAG-resultaten
Controleer kleurcontrast voor toegankelijk webdesign
Kleurcontrast bepaalt hoe makkelijk mensen tekst van de achtergrond kunnen onderscheiden. Vul hierboven twee HEX-kleuren in om de contrastverhouding te berekenen en direct te zien of de combinatie voldoet aan de WCAG 2.1-richtlijnen voor normale en grote tekst.
Wat is een goede contrastverhouding?
WCAG AA vereist minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst. Voor AAA gelden verhoudingen van 7:1 en 4,5:1. Grote tekst is minimaal 24px, of 18,66px wanneer de tekst vetgedrukt is.
Zo gebruik je de kleurcontrast-checker
- Vul de HEX-waarde van je tekstkleur in.
- Vul de HEX-waarde van de achtergrondkleur in.
- Bekijk het voorbeeld, de contrastverhouding en de WCAG-resultaten.
- Pas een van de kleuren aan totdat de combinatie het gewenste niveau haalt.
Waarom toegankelijk kleurcontrast belangrijk is
Goed contrast helpt mensen met verminderd zicht, kleurenblindheid en gebruikers die een scherm bij lastig licht bekijken. Het maakt de visuele hiërarchie voor iedereen duidelijker. Controleer vooral bodytekst, knoppen, links, formulierlabels en tekst die over afbeeldingen staat.