De checker gebruikt de officiële WCAG-formule voor relatieve luminantie, zodat de uitkomsten overeenkomen met de WebAIM-checker en de meeste toegankelijkheidsaudits. Alles wordt in je browser berekend - je kleuren worden nooit geüpload en er zijn geen limieten.
Kleurcontrast checker
Draait volledig in je browser - niets uploaden, geen account.
Contrastverhouding
Geslaagdvereist 4.5:1
Geslaagdvereist 3:1
Gefaaldvereist 7:1
Geslaagdvereist 4.5:1
Groot = 18pt (24px), of 14pt (18,66px) vetgedrukt.
Wat is een kleurcontrast checker?
Een kleurcontrast checker meet de contrastverhouding tussen een tekstkleur en de achtergrond, en geeft aan of die voldoet aan de WCAG-toegankelijkheidsnormen. Het resultaat is een verhouding van 1:1 tot 21:1, met een geslaagd of gefaald oordeel voor AA en AAA bij zowel normale als grote tekst.
Zo werkt het
- 1Voer je kleuren in. Typ een hexcode, rgb()-waarde of CSS-kleurnaam voor de tekst en achtergrond, of kies ze met de kleurpicker.
- 2Lees de verhouding af. De contrastverhouding wordt live bijgewerkt, met een voorvertoning van je tekst op de achtergrond.
- 3Bekijk de badges. Elke badge toont geslaagd of gefaald voor WCAG AA en AAA bij normale en grote tekst.
Voor wie
- Ontwerpers die merkfleuren testen voordat ze naar de ontwikkeling gaan.
- Front-end developers die knop-, link- en labelkleuren toetsen aan WCAG AA.
- Toegankelijkheidsauditors die contrastfouten vastleggen met exacte verhoudingen.
- Content- en e-mailteams die controleren of tekst leesbaar blijft op gekleurde achtergronden.
Veelgestelde vragen
Is de kleurcontrast checker gratis?
Ja - 100% gratis, zonder aanmelden en zonder limieten. Alles draait in je browser.
Welke contrastverhouding heb ik nodig voor WCAG AA?
WCAG 2.1 niveau AA vereist een contrastverhouding van minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst. Niveau AAA verhoogt dat naar 7:1 voor normale tekst en 4,5:1 voor grote tekst.
Wat telt als grote tekst?
Grote tekst is minimaal 18pt (circa 24px) bij een normaal gewicht, of 14pt (circa 18,66px) bij vetgedrukt. Voor grote tekst geldt een lagere contrasteis, omdat grotere letters makkelijker te lezen zijn.
Hoe wordt de contrastverhouding berekend?
De formule is (L1 + 0,05) / (L2 + 0,05), waarbij L1 en L2 de relatieve luminantie zijn van de lichtste en donkerste kleur. Luminantie wordt bepaald op basis van de sRGB-rood-, groen- en blauwkanalen volgens de WCAG 2.x-definitie.
Worden hex, RGB en kleurnamen ondersteund?
Ja. Je kunt 3-, 4-, 6- of 8-cijferige hex, rgb()- en rgba()-waarden invoeren, of een CSS-kleurnaam zoals 'teal'. Je kunt ook kleuren kiezen met de ingebouwde kleurpicker.
Waarom slaagt dezelfde verhouding soms wel en soms niet?
De vereiste verhouding hangt af van de tekstgrootte en het niveau dat je nastreeft. Een verhouding van 3,5:1 haalt AA niet voor normale tekst, maar haalt AA wel voor grote tekst - controleer dus altijd aan de hand van de grootte en het niveau dat je daadwerkelijk gebruikt.