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.
| Contrast | Normale tekst | Grote tekst |
|---|---|---|
| Ratio | 0 | 0 |
| WCAG 2.1AA | Niet gecontroleerd | Niet 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.
| Type | Tekst | Achtergrond |
|---|---|---|
| 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.
| Tekst | Achtergrond |
|---|---|
| #ffffff | #000000 |
| #ffffff | #000000 |
Voorbeeld achtergrond met tekst
Dit is een voorbeeld van een tekst met een achtergrondkleur