◐

Kleurcontrast-checker

Controleer de WCAG-contrastverhouding tussen een tekst- en achtergrondkleur met AA/AAA-resultaten.

Je bestanden blijven op dit apparaat

Bestanden worden in je browser verwerkt, nooit geüpload. De site downloadt de benodigde code en bestanden. Geen accounts of trackers.

Gebruik Downloaden om deze tool als één HTML-bestand op te slaan voor offline gebruik.

Privacy →

Tekstkleur

Achtergrond

Pa's wijze lynx bezag vroom het fikse aquaduct.

Grote voorbeeldtekst

Probeer een uitgewerkt voorbeeld

Voorbeeld

Zet de tekstkleur op #767676 en de achtergrond op #ffffff. De verhouding is 4.54:1 en haalt AA voor normale tekst. Eén tint lichter geeft #777777 maar 4.48:1 en zakt, want AA vraagt minstens 4,5:1 voor normale tekst.

Goed om te weten

Grote tekst (ongeveer 24px, of 18,7px vet) heeft voor AA maar 3:1 nodig. De verhouding houdt geen rekening met dunne letters, tekst op afbeeldingen of transparantie, dus controleer ook het echte ontwerp en geef betekenis nooit alleen met kleur weer.

Over deze tool

Vergelijk een voorgrond- en achtergrondkleur om de WCAG-contrastverhouding te zien en of deze AA en AAA haalt, allemaal lokaal berekend in je browser.

Veelgestelde vragen

Wat geldt als grote tekst?

WCAG beschouwt tekst van 18pt (24px) of 14pt (18,66px) vetgedrukt als groot, waarvoor een lagere verhouding van 3:1 voor AA volstaat.

Welke verhoudingen slagen?

Normale tekst heeft 4,5:1 nodig voor AA en 7:1 voor AAA; grote tekst heeft 3:1 nodig voor AA en 4,5:1 voor AAA.