Kleurcontrast-checker

Alle tools
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.
Tekstkleur
Tint
Achtergrondkleur
Tint
Contrastratio
--:1
Normale tekst
Lopende tekst onder 18px (of onder 14px vet)
AA AAA
Grote tekst
18px+ normaal, of 14px+ vet
AA AAA
UI-componenten
Iconen, randen, formulierelementen & graphics
AA AAA
Live voorvertoning

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.
Voorbeeldknop Voorbeeldknop
Suggestie

Alles wordt live in je browser berekend met de WCAG 2.x relatieve-luminantieformule — geen uploads, geen aanmelding, volledig gratis.

Delen
Gerelateerde tools
Kleurenblindheid-simulator

Zie je afbeelding of palet zoals mensen met protanopie, deuteranopie, tritanopie of achromatopsie dat zien — volledig in je browser, niets wordt geüpload.
Kleurcode-converter

Converteer kleuren tussen HEX, RGB, RGBA, HSL, HSLA en HSV — kies een kleur, pas de alpha aan en kopieer elk formaat direct.
Palet-exporteur

Plak of importeer een set kleuren en exporteer ze direct naar CSS-variabelen, SCSS, Tailwind-config, JSON of SVG-stalen — de afrondingsstap voor elk palet.
Populaire zoekopdrachten
kleurcontrast controle wcag contrast ratio toegankelijkheid contrast tekstcontrast controle aa aaa contrast test kleurcontrast online controleren

Voeg deze gratis tool toe aan je eigen website — kopieer en plak de onderstaande code.