Geen upload, 100% lokaal, geen account

Contrastchecker

Typ of kies twee kleuren en zie direct de WCAG-contrastverhouding, met AA/AAA-badges voor normale en grote tekst.

Hoe Contrastchecker werkt

Deze tool berekent de WCAG-contrastverhouding tussen twee kleuren en laat zien of het paar voldoet aan niveau AA of AAA voor normale tekst, grote tekst en niet-tekstuele UI-elementen. Alles wordt lokaal in je browser berekend; de ingevoerde kleuren worden nooit geüpload.

Geschreven door Bastien Sulyan

Hoe je Contrastchecker gebruikt, stap voor stap

  1. Voer de voorgrondkleur (tekst) in of kies hem.
  2. Voer de achtergrondkleur in of kies hem.
  3. Lees de contrastverhouding en de AA/AAA-badges af voor normale tekst, grote tekst en niet-tekstuele UI-elementen.
  4. Gebruik Kleuren omwisselen om het paar in de andere richting te controleren.

Veelvoorkomende toepassingen

  • De primaire kleur van een merk tegen wit of zwart controleren voordat je een knopcomponent oplevert.
  • Verifiëren of gedempte grijze broodtekst nog steeds aan AA voldoet op een lichte kaartachtergrond.
  • Bevestigen dat een linkkleur binnen een alinea de drempel van 4,5:1 voor normale tekst haalt.
  • Testen of een grote, lichtere kop nog steeds de soepelere drempel van 3:1 voor grote tekst haalt.

Veelgestelde vragen

Stuurt deze tool mijn kleuren naar een server?

Nee, de berekening gebeurt volledig in je browser met JavaScript; niets wat je invoert wordt geüpload.

Welke contrastverhouding heb ik nodig voor AA of AAA?

WCAG 2.x vereist 4,5:1 voor AA bij normale tekst, 7:1 voor AAA bij normale tekst, 3:1 voor AA bij grote tekst en 4,5:1 voor AAA bij grote tekst.

Wat telt als grote tekst?

Minimaal 24px (18pt) normaal gewicht, of ongeveer 18,7px (14pt) vetgedrukt; kleinere tekst gebruikt de drempels voor normale tekst.

Waarom verandert het omwisselen van voor- en achtergrond de verhouding niet?

De verhoudingsformule is symmetrisch: ze vergelijkt alleen de lichtere en donkerdere lichtsterkte, niet welke kleur voor tekst wordt gebruikt. Omwisselen blijft nuttig omdat het je vertelt of het paar ook werkt met omgekeerde rollen, bijvoorbeeld donkere tekst op een lichte chip versus lichte tekst op een donkere chip.

Garandeert het halen van AA dat mijn ontwerp toegankelijk is?

Nee. Contrast is één WCAG-succescriterium onder vele. Kleurkeuze voor mensen met kleurenblindheid, focuszichtbaarheid, tekst vergroten en toetsenbordnavigatie zijn aparte controles; de kleurenblindheidsimulator op deze site behandelt er een van.

Is dit een officiële tool van W3C of WebAIM?

Nee. De tool implementeert de openbare WCAG 2.x-contrastformule onafhankelijk en is niet verbonden met het W3C of een andere toegankelijkheidsorganisatie.

Gerelateerde tools

Houd alles lokaal, verken aanvullende tools.

Alle developertools