Kleurcontrastcontrole
Voer de voor- en achtergrondkleuren in en de checker retourneert de WCAG-contrastverhouding (1:1 tot 21:1) plus goed/niet-goed-beoordelingen tegen WCAG 2.1 AA- en AAA-drempels voor normale tekst, grote tekst en niet-tekstelementen. Onder de motorkap wordt de WCAG-luminantieformule gebruikt: eenvoudige wiskunde, maar cruciaal voor toegankelijkheid. Los fouten op door de lichtheid aan te passen totdat de verhouding de drempel overschrijdt die u nodig heeft.
Hoe de contrastverhouding wordt berekend
-
1
Voer twee kleuren in
Hex, 3 of 6 cijfers, voor beide kleuren. Voor elk is een kleurkiezer beschikbaar.
-
2
Voor elk wordt de relatieve luminantie berekend
L = 0,2126·R + 0,7152·G + 0,0722·B waarbij elk kanaal gelineariseerd is ten opzichte van sRGB.
-
3
Contrastverhouding
(L_lichter + 0,05) / (L_donkerder + 0,05). Verhoudingen tussen 1:1 en 21:1.
-
4
Geslaagd/mislukt-badges
AA (4,5:1 voor normaal, 3:1 voor groot/UI), AAA (7:1 voor normaal, 4,5:1 voor groot). Grote tekst = ≥18pt normaal of ≥14pt vet.
WCAG-contrastdrempels
| Inhoudstype | AA-drempel | AAA-drempel |
|---|---|---|
| Normale tekst | 4,5:1 | 7:1 |
| Grote tekst (≥18pt normaal of ≥14pt vet) | 3:1 | 4,5:1 |
| Niet-tekst (UI-componenten, focusringen) | 3:1 | - |
| Incidentele tekst (decoratief, uitgeschakeld, logo’s) | vrijgesteld | vrijgesteld |
‘Grote tekst’ betekent 18pt+ normaal gewicht (~24px in CSS) of 14pt+ vet (~19px vet).
Voorbeeldcontrasten
| Paar | Verhouding | AA normaal | AA groot | AAA normaal |
|---|---|---|---|---|
| Zwart op wit | 21:1 | Geslaagd | Geslaagd | Geslaagd |
| #333 op wit | 12,6:1 | Geslaagd | Geslaagd | Geslaagd |
| #666 op wit | 5,7:1 | Geslaagd | Geslaagd | Mislukt |
| #888 op wit | 3,5:1 | Mislukt | Geslaagd | Mislukt |
| #AAA op wit | 2,3:1 | Mislukt | Mislukt | Mislukt |
| Wit op #1976D2 (Materiaal blauw 700) | 4,6:1 | Mislukt | Geslaagd | Mislukt |
| Wit op #2196F3 (Materiaal blauw 500) | 3,1:1 | Mislukt (normaal) | Geslaagd | Mislukt |
Veelvoorkomende valkuilen bij toegankelijkheid
- Grijs-op-witte hoofdtekst op #999 of lichter: AA mislukt. Gebruik #767676 of donkerder voor hoofdtekst op wit.
- Blauwe link op grijs: mislukt vaak omdat beide kleuren een gemiddelde helderheid hebben.
- Witte tekst op merkkleur: donkere tinten doorgeven (≥ 4,5:1), niet toepassen op middentoon merkkleuren. Gebruik grotere tekst of een donkerder merk.
- Tekst voor tijdelijke aanduiding heeft vaak weinig contrast voor ‘hinting’ - WCAG is nog steeds van toepassing als gebruikers de tijdelijke aanduiding moeten lezen.
- Uitgeschakelde status: WCAG 2.2 vereist 3:1 voor uitgeschakelde tekst tegen de achtergrond van het besturingselement, tenzij de status zelf op een andere manier wordt gecommuniceerd.
Wat WCAG je niet vertelt
- WCAG 2.x gebruikt een formule uit 1988. Moderne APCA (geavanceerd perceptueel contrastalgoritme) weerspiegelt de waargenomen leesbaarheid beter, maar is nog niet de wettelijke basis. Stoot de cijfers iets voorbij de WCAG-minima om APCA- en randgevallen af te handelen.
- Contrast is niet de enige toegankelijkheidsdimensie. Een verhouding van 21:1 betekent niets als het lettertype 9px is, de lijnhoogte krap is of de betekeniskleur rood-groen is.
Een falend paar verbeteren
- Lichtere voorgrond op een donkere achtergrond, of een donkerdere voorgrond op een lichte achtergrond.
- Vergroot de lettergrootte of het gewicht, de drempel voor grote tekst is lager.
- Voeg een achtergrond toe achter tekst over afbeeldingen (overlay, verloop).
- Verbeter nooit het contrast door te vervagen naar een grijs dat nog steeds niet werkt, druk totdat je AA raakt.
Controleer na elke aanpassing opnieuw, de tool berekent de verhouding live en een kleine lichtheidsverandering kan een oordeel snel laten omslaan.
Veelgestelde vragen
AA is de wettelijke basislijn in de meeste rechtsgebieden (Section 508 US, EN 301 549 EU) en wat de meeste auditinstrumenten markeren. AAA is ambitieus: alleen vereist voor specifieke toegankelijkheidscontexten (educatieve inhoud voor slechtziende gebruikers). Streef naar AA en behandel AAA als een bonus.
Nee, hij accepteert alleen dekkende hex-kleuren van 3 of 6 cijfers. Zet RGB of HSL eerst om naar hex, of gebruik de kleurkiezer, die altijd hex oplevert.
WCAG 2.1 SC 1.4.11 vereist een contrast van 3:1 voor niet-tekstuele UI-componenten en grafische objecten. Dit is van toepassing op focusindicatoren, invoerranden, knoppen met alleen pictogrammen en statussen (zweven, actief). Controleer zowel de standaard- als de focusstatus.
Test elke modus afzonderlijk: de contrastverhoudingen in lichte en donkere thema’s zijn onafhankelijk. Veel light-mode-pass-paletten falen in de donkere modus bij dezelfde relatieve lichtheid.
Gerelateerde tools
ASCII-tabelreferentie
Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.
HTML-tekenreferentie
Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.
Sneltoetsenoverzicht
Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.
HAR-bestandsviewer
Open HAR-netwerkopnamen lokaal, filter verzoeken, bekijk gemaskeerde headers en timing en exporteer opgeschoonde samenvattingen zonder upload.
ASCII naar binair-converter
Converteer elke ASCII-string naar zijn binaire representatie. Elk teken wordt acht bits, gescheiden door spaties, klaar voor protocoltrace of huiswerk.
Binair naar hex-converter
Converteer binaire invoer naar een gewone hexwaarde in hoofdletters. Niet-binaire tekens worden genegeerd en voorloopnullen blijven niet behouden.