Kleurcontrast controleren (WCAG)
Voer beide kleuren in als hex (#1f2937) of rgb(31, 41, 55).
Resultaat
4,54:1Contrastverhouding
- AA, normale tekst (4,5:1)
- ✓
- AA, grote tekst (3:1)
- ✓
- AAA, normale tekst (7:1)
- ✕
- AAA, grote tekst (4,5:1)
- ✓
- Gelezen kleuren
- #767676 / #ffffff
Invoer
- Tekstkleur
- #767676
- Achtergrondkleur
- #ffffff
Zo wordt het berekend
De relatieve luminantie van elke kleur wordt berekend uit de gelineariseerde sRGB-kanalen.
Resultaat
Contrastverhouding
- AA, normale tekst (4,5:1)
- ✓
- AA, grote tekst (3:1)
- ✓
- AAA, normale tekst (7:1)
- ✕
Zo wordt het berekend
- De relatieve luminantie van elke kleur wordt berekend uit de gelineariseerde sRGB-kanalen.
- Verhouding = (lichtere L + 0,05) ÷ (donkerdere L + 0,05), van 1:1 tot 21:1.
- De verhouding wordt zonder afronding vergeleken met de WCAG 2-drempels.
Voorbeeld
#767676 op wit geeft 4,54:1: voldoet aan AA voor normale tekst, niet aan AAA.
Goed om te weten
- Grote tekst is minstens 24 px of 18,66 px vetgedrukt.
- Transparantie en kleurverlopen worden niet meegenomen.
Wanneer gebruik je dit?
- Controleer of tekstkleur en achtergrondkleur op een webpagina goed leesbaar zijn.
- Bekijk of een kleurenpaar het WCAG AA- of AAA-doel haalt.
Veelgestelde vragen
Welke WCAG AA-verhouding is nodig voor normale tekst?
WCAG 2 vereist voor normale tekst een contrastverhouding van minimaal 4,5:1.
Wat geldt volgens WCAG als grote tekst?
Minstens 24 CSS-pixels, of ongeveer 18,66 CSS-pixels als de tekst vet is.
Worden transparantie en verlopen meegenomen?
Nee. De checker vergelijkt de ingevoerde effen kleuren en berekent geen transparantie of verlopen.