Contrastchecker
Controleer of uw tekst- en achtergrondkleuren voldoen aan de AA- en AAA-standaarden voor optimale leesbaarheid.
Voorbeeld hoofdtitel
Deze alinea laat zien hoe lopende tekst wordt weergegeven met de geselecteerde kleurcombinatie. Een goed contrast voorkomt oogvermoeidheid en zorgt ervoor dat alle gebruikers op elk scherm moeiteloos kunnen lezen.
Hoe kleurcontrast te controleren conform de officiële WCAG 2.1-standaard
Slecht contrast tussen tekst en achtergrond is een van de meest voorkomende fouten op websites. Het maakt teksten onleesbaar voor slechtzienden, senioren en iedereen die zijn smartphone in fel zonlicht gebruikt, en kan leiden tot juridische aansprakelijkheid volgens de Europese toegankelijkheidswet (EAA).
Met deze WCAG-contrastchecker meet u direct de wiskundige luminantieverhouding tussen voorgrond- en achtergrondkleuren. U ziet meteen of uw combinatie slaagt voor WCAG AA (minimaal 4.5:1) en AAA (7:1) voor zowel normale als grote tekst.
Vergelijking voor en na
Bekijk het verschil in bestandsgrootte, beeldscherpte en snelheid.
Contrast 2.4:1 (Mislukt)
Lichtgrijze tekst op witte achtergrond
- •Vrijwel onleesbaar voor mensen met verminderd gezichtsvermogen of kleurenblindheid.
- •Niet leesbaar op smartphones buitenshuis bij daglicht.
- •Voldoet niet aan de verplichte toegankelijkheidswetgeving voor bedrijven en overheid.
Contrast 7.2:1 (Geslaagd AAA)
Optimale leesbaarheid onder alle omstandigheden
- ✓Moeiteloos leesbaar voor 100% van uw bezoekers op elk scherm.
- ✓Voldoet aan alle internationale normen voor digitale toegankelijkheid.
- ✓Verhoogt de gebruiksvriendelijkheid en conversie van formulieren en knoppen.
Wanneer kleurcontrast controleren?
Knoppen en call-to-actions
Zorg ervoor dat de tekst op knoppen voldoende afsteekt tegen de knopkleur zodat bezoekers direct zien waar ze moeten klikken.
Broodtekst en artikelen
Controleer of lange leesteksten ontspannen en zonder vermoeidheid van de ogen gelezen kunnen worden.
Audits voor digitale toegankelijkheid
Voer snelle contrastcontroles uit tijdens het ontwerpen van design systems en componentenbibliotheken.
Veelgestelde vragen over contrastcontrole
Niveau AA vereist een minimale contrastverhouding van 4.5:1 voor normale tekst en is de wettelijke standaard voor de meeste websites. Niveau AAA vereist 7:1 en biedt het allerhoogste niveau van leescomfort.
Onze tool biedt een slimme suggestieknop die de tekstkleur automatisch een paar procent donkerder of lichter maakt totdat de AA- of AAA-norm precies wordt behaald.