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. Essentieel voordat je knoppen, koppelingen en formulierlabels verzendt. Veel merkpaletten werken pas als je tekst donkerder maakt of oppervlakken lichter maakt.
Tekstkleur
Achtergrondkleur
Aa Bb Cc — 123
Resultaat
16.12 : 1
AA — Geslaagd
AA (grote tekst) — Geslaagd
AAA — Geslaagd
AAA (grote tekst) — Geslaagd
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.
Wanneer kies je iets anders
• Als je een volledige pagina-audit nodig heeft, gebruik dan geautomatiseerde scanners op gerenderde DOM.
• Bij het testen van niet-effen achtergronden (afbeeldingen, verlopen) — proef pixels in het slechtste geval.
• Gebruik bij het simuleren van kleurenblindheid gespecialiseerde zichtsimulators.
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.
Fouten oplossen zonder rebranding
Als paars niet werkt op wit, verander dan niet van tint. Maak de voorgrond donkerder in stappen van 5-10% of gebruik paars alleen voor grote koppen. Tijdelijke tekst moet aan contrast voldoen (4,5:1), en niet alleen aan invoerwaarden. Gehandicapte staten kunnen worden vrijgesteld van strikt tekstcontrast, maar mogen kritische informatie niet alleen via kleur overbrengen. Koppel deze checker met de kleurenconverter voor snelle HSL-iteratie.
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.
Worden mijn gegevens naar een server verzonden?
Nee.
Is deze tool gratis?
Ja.