Kleurcontrast controleren
Controleer of tekst echt leesbaar zal zijn, volgens de toegankelijkheidsnorm.
- Draait in je browser — je tekst wordt nergens naartoe gestuurd
- Geen aanmelding, geen quota, gratis te gebruiken zo vaak je wilt
Hoe het werkt
Lichtgrijze tekst op wit is de meest voorkomende toegankelijkheidsfout op het web, en die is volledig te voorkomen. De toegankelijkheidsrichtlijnen definiëren contrast als een nauwkeurige verhouding, dus of een combinatie slaagt is een kwestie van rekenen en niet van mening.
Hoe de verhouding wordt berekend
De relatieve luminantie van elke kleur wordt berekend zoals de richtlijnen voorschrijven — met gammacorrectie per kanaal — en de verhouding wordt genomen tussen de lichtere en de donkerdere. Het resultaat komt overeen met wat een toegankelijkheidsaudit zal melden, omdat het dezelfde formule is.
De drempels
Normale tekst heeft 4,5:1 nodig voor AA en 7:1 voor AAA. Grote tekst — ongeveer 24px, of 18,7px als die vet is — heeft slechts 3:1 nodig voor AA en 4,5:1 voor AAA. Interfacecomponenten en betekenisvolle afbeeldingen hebben 3:1 nodig. AA is wat de meeste organisaties en de meeste wetgeving vereisen.
Waarom grote tekst minder nodig heeft
Grotere lettervormen hebben meer pixels per streek, dus ze blijven leesbaar bij lager contrast. Daarom kan een kop een lichter grijs gebruiken dan lopende tekst.
Wat de verhouding niet vastlegt
Het zegt niets over kleurenblindheid, wat een aparte controle is, en niets over of de tekst groot genoeg of het lettertype leesbaar is. Een voldoende verhouding is de ondergrens, geen bewijs van een leesbaar ontwerp.
Kleurcontrast controleren — vragen
Welke contrastverhouding heb ik nodig?
4,5:1 voor normale tekst bij AA, 3:1 voor grote tekst. AAA verhoogt die naar 7:1 en 4,5:1.
Wat telt als grote tekst?
Ongeveer 24px en groter, of 18,7px en groter als de tekst vet is.
Betekent slagen dat mijn ontwerp toegankelijk is?
Nee. Contrast is één eis uit vele; het zegt niets over kleurenblindheid, tekstgrootte of leesbaarheid.