Webally logo

Kleur contrast checker

Met deze tool kun je controleren of het contrast tussen twee kleuren goed is volgens de toegankelijkheidsregels van WCAG 2.1. Dit geldt voor gewone tekst en grotere tekst. Je voert de kleurcodes (in hex) in voor de achtergrond en de tekst. De tool berekent dan het contrast en laat zien of het voldoende is. Als het contrast niet goed genoeg is, stelt de tool andere kleuren voor die wel voldoen aan de regels. Ook zie je voorbeelden van hoe de kleuren samen eruitzien.

Met deze tool kun je het contrast tussen twee kleuren controleren. Vul de hexadecimale kleurcodes in en klik op de knop om het contrast te controleren.

ContrastNormale tekstGrote tekst
Ratio00
WCAG 2.1AANiet gecontroleerdNiet gecontroleerd

Huidig

Kleine tekst

Grote tekst

Dit is een voorbeeld van een tekst met een achtergrondkleur

Dit is een voorbeeld van een tekst met een achtergrondkleur

Aan te raden kleuren

Contrast waarde minimaal 7 voor grote tekst en normale tekst.

TypeTekstAchtergrond
Normale tekst#ffffff#000000
Grote tekst#ffffff#000000

Voorbeeld achtergrond met tekst

Dit is een voorbeeld van een tekst met een achtergrondkleur

Dit is een voorbeeld van een tekst met een achtergrondkleur

Minimaal volgens WCAG 2.1 AA

Contrast waarde minimaal 3 voor grote tekst en 4.5 voor normale tekst.

TekstAchtergrond
#ffffff#000000
#ffffff#000000

Voorbeeld achtergrond met tekst

Dit is een voorbeeld van een tekst met een achtergrondkleur

Dit is een voorbeeld van een tekst met een achtergrondkleur