WCAG-contrastchecker
Test elk voorgrond- en achtergrondkleurpaar op een contrastverhouding van WCAG 2,1 (1 tot 21). Zie geslaagd/mislukt voor niveaje AA en AAA, voor normale tekst, grote tekst (18pt+ of 14pt vet) en UI-componenten.
Zo controleer je kleurcontrast
1. Voer de voorgrond- (tekst)- en achtergrondkleuren in of kies deze.
2. Lees de contrastverhouding af (bijvoorbeeld 4,52:1).
3. Controleer AA- en AAA-rijen op normale en grote tekstformaten.
4. Pas de HSL-lichtheid aan totdat het vereiste niveaje is bereikt en kopieer vervolgens de hexadecimale waarden.
Voorbeelden van contrastcontroles
Hoofdtekst #374151 op #FFFFFF
Verhouding ≈ 8,9:1 — voldoet aan AAA voor normale tekst (7:1 nodig). Comfortabel lezen in lange vorm.
Lichtgrijs #9CA3AF op wit
Verhouding ≈ 2,6:1 — mislukt AA voor normale tekst (4,5:1 nodig). Veel voorkomende placeholder-fout.
Primaire knop wit op #2563EB
Verhouding ≈ 4,6:1 — passeert normale AA-tekst; bump naar donkerder blauw voor gebruik alleen AAA of groot.
Wanneer gebruik je deze tool
• Wanneer je ontwerpsysteemtokens controleert voordat deze worden vrijgegeven.
• Wanneer je toegankelijkheidsbevindingen van Lighthouse of Axe corrigeert.
• Wanneer je linkkleuren kiest die moeten verschillen van de hoofdtekst, niet alleen qua tint.
WCAG 2.1 niveaus uitgelegd
Niveaje A is minimaal; AA is het juridische doelwit in veel rechtsgebieden (ADA, EAA publieke sector). AAA is ambitieus voor bodycopy; grote koppen passeren AAA gemakkelijker dan 14px-onderschriften. Zichtbare focusindicatoren (2.4.7) vullen het contrast aan: toetsenbordgebruikers hebben zichtbare focusringen nodig, vaak 3:1 ten opzichte van aangrenzende kleuren. Documenteer goed/niet geslaagd in je ontwerpsysteem naast elk tokenpaar.
Veelgestelde vragen
Welke contrastverhouding voor WCAG AA normale tekst?
Minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst (18pt+ of 14pt vet).
Wat voor AAA?
7:1 normale tekst, 4,5:1 grote tekst — strenger, vaak gebruikt voor overheidssites.
Hebben UI-componenten contrast nodig?
WCAG 2.1 vereist 3:1 voor grafische objecten en UI-componentgrenzen (1.4.11).
Hoe wordt de verhouding berekend?
Gebaseerd op de relatieve luminantie van sRGB-kleuren: (L1 + 0,05) / (L2 + 0,05) waarbij L1 lichter is.
Corrigeert onderstrepen links met laag contrast?
Nee — contrast is nog steeds vereist. Onderstrepingen helpen niet-gekleurde aanwijzingen, maar vervangen de verhoudingsregels niet.