Contrastcontrole
De contrast checker berekent de WCAG 2.1-contrastratio tussen een tekstkleur en een achtergrondkleur en laat zien of de combinatie slaagt voor AA en AAA bij normale en grote tekst.
Over deze tool
De contrast checker berekent de WCAG 2.1-contrastratio tussen een tekstkleur en een achtergrondkleur en laat zien of de combinatie slaagt voor AA en AAA bij normale en grote tekst.
Zo gebruik je het
- Voer de tekstkleur in of kies hem.
- Voer de achtergrondkleur in of kies hem (hexwaarden werken, ook de verkorte vorm met 3 cijfers).
- Lees de contrastratio en de AA/AAA-resultaten voor normale en grote tekst.
- Pas een van beide kleuren aan tot het niveau dat je nodig hebt slaagt.
Goed om te weten
- WCAG 2.1 AA vereist een contrastratio van minimaal 4.5:1 voor normale tekst en 3:1 voor grote tekst.
- WCAG 2.1 AAA vereist minimaal 7:1 voor normale tekst en 4.5:1 voor grote tekst.
- Grote tekst betekent minimaal 18 pt (24 px) normaal of 14 pt (ongeveer 18.66 px) vet.
- Contrastratio's lopen van 1:1 (identieke kleuren) tot 21:1 (zwart op wit).
- De ratio wordt berekend uit de relatieve luminantie van elke kleur, volgens de WCAG-formule.
Werkt volledig in je browser — niets wat je invoert wordt geüpload of opgeslagen.
Veelgestelde vragen
Welke contrastratio is nodig voor toegankelijkheid?
Voor WCAG 2.1 niveau AA heeft normale tekst minimaal 4.5:1 nodig en grote tekst minimaal 3:1. Niveau AAA verhoogt dit naar 7:1 en 4.5:1.
Is witte tekst op groen toegankelijk?
Dat hangt af van de tint. Veel felle groentinten zakken voor AA met witte tekst; donkerdere groentinten slagen meestal wel. Voer je exacte hexwaarden in om het te controleren.
Wat telt als grote tekst in WCAG?
Tekst van minimaal 18 punt (24 px) in normaal gewicht, of minimaal 14 punt (ongeveer 18.66 px) in vet.
Geldt WCAG-contrast ook voor knoppen en iconen?
Succescriterium 1.4.11 van WCAG 2.1 vraagt minimaal 3:1 contrast voor interfacecomponenten en betekenisvolle graphics ten opzichte van hun omgeving.