Kleurcontrast-checker
Controleer de WCAG-contrastratio tussen tekst- en achtergrondkleur — zie AA/AAA slaag-zakresultaten voor normale tekst, grote tekst en UI-componenten, met een live voorvertoning en suggesties voor toegankelijke kleuren.
The quick brown fox
Grote tekst leest comfortabel wanneer het contrast voldoende is.
Dit is een voorbeeldparagraaf met normale lopende tekst. Goed kleurcontrast maakt je inhoud leesbaar voor iedereen, ook voor mensen met een laag zichtvermogen of kleurenblindheid. een voorbeeldlink.
Kleine tekst en bijschriften zijn het moeilijkst te lezen — zij hebben het meeste contrast nodig.Alles wordt live in je browser berekend met de WCAG 2.x relatieve-luminantieformule — geen uploads, geen aanmelding, volledig gratis.
Over Kleurcontrast-checker
De Kleurcontrastcontrole meet de WCAG-contrastverhouding tussen een tekstkleur en een achtergrondkleur, en beoordeelt het paar vervolgens tegen de AA- en AAA-toegankelijkheidsniveaus voor normale tekst, grote tekst en UI-componenten. De verhouding en elk geslaagd/gezakt-oordeel worden live bijgewerkt terwijl je een van beide kleuren aanpast.
Een realistisch previewpaneel toont koppen, hoofdtekst, kleine letters, een knop en een link in je gekozen combinatie, zodat je leesbaarheid kunt beoordelen met echte inhoud in plaats van abstracte stalen. Als een paar niet slaagt, stelt de tool de dichtstbijzijnde toegankelijke tekstkleur voor die de AA-drempel van 4,5:1 haalt, klaar om met één klik toe te passen.
De wiskunde volgt de WCAG 2.x-formule voor relatieve helderheid en draait volledig in je browser: er wordt niets geüpload en de controles zijn gratis. Je kunt ook een compact tekstrapport van de verhouding en beoordelingen kopiëren om te plakken in een toegankelijkheidsreview of een pull request.
Hoe gebruik je Kleurcontrast-checker
- Stel je tekstkleur en achtergrondkleur in met de kiezers of door waarden te typen.
- Lees de contrastverhouding en de AA/AAA-resultaten voor normale tekst, grote tekst en UI-componenten.
- Bekijk de live preview om echte koppen, alinea's, knoppen en links in je kleuren te zien.
- Als het paar niet slaagt, pas dan de voorgestelde toegankelijke tekstkleur toe of wissel de twee kleuren om.
- Klik op "Rapport kopiëren" om de verhouding en compliance-resultaten te delen.