De kleurcontrastcontrole gebruiken
Gebruik deze pagina als je de effen tekst- en achtergrondkleuren van een ontwerp kent. Zij controleert alleen tekstcontrast, niet de hele pagina.
- Voer de tekstkleur in als HEX-waarde met 3 of 6 cijfers.
- Voer de effen achtergrondkleur achter die tekst in.
- Kies Contrast controleren om het paar te bevestigen.
- Lees de verhouding en elk geschreven resultaat Voldoet of Voldoet niet.
- Bekijk het bevestigde voorbeeld en test daarna elk ander kleurenpaar in de echte interface.
Hoe de WCAG-contrastverhouding wordt berekend
Elk 8-bits sRGB-kanaal wordt door 255 gedeeld. Waarden tot en met 0.04045 worden door 12.92 gedeeld; hogere gebruiken ((kanaal + 0.055) / 1.055)²·⁴. Relatieve luminantie is 0.2126R + 0.7152G + 0.0722B. De eindverhouding is (L1 + 0.05) / (L2 + 0.05), met L1 de lichte en L2 de donkere luminantie. Het bereik is 1:1 tot 21:1.
AA- en AAA-grenzen voor tekst
WCAG 2.2 niveau AA vereist minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst. AAA vereist 7:1 voor normale en 4,5:1 voor grote tekst. Groot betekent minstens 18pt normaal of 14pt vet, met equivalente grootte voor CJK-tekst. In CSS is 18pt ongeveer 24px en 14pt ongeveer 18,5px. Zeer dunne of ongebruikelijke lettertypen kunnen toch moeilijk leesbaar zijn.
Waarom getoond getal en oordeel kunnen verschillen
Grenzen gelden voor de volledige interne verhouding, niet de afgeronde weergave. Een werkelijke 4,499:1 haalt de eis 4,5:1 niet, ook als het label 4,50:1 zou tonen. Daarom gebruikt elke beoordeling volledige precisie en worden alleen scherm- en klembordverhoudingen afgerond.
Wat deze controle omvat
- Alleen ondoorzichtige sRGB-HEX-kleuren met 3 of 6 cijfers.
- Eén voorgrondkleur tegenover één effen achtergrond.
- Geen alfamenging, verloop- of afbeeldingsbemonstering, vervangingskleuren of websitescan.
- Eén geslaagd paar maakt een pagina of product niet WCAG-conform. Andere tekstgroottes, toestanden, afbeeldingen, bediening, focusindicatie, zoom, semantiek en interacties moeten ook worden beoordeeld.
Praktische controletips
Gebruik de werkelijk opgegeven kleuren waar tekst en achtergrond samenkomen. Controleer links, hover/focus, uitgeschakelde bediening, validatiemeldingen, tekst op afbeeldingen en thema's apart. Als anti-aliasing dunne letters lichter maakt, vertrouw dan niet alleen op het voorbeeld: de formule beoordeelt opgegeven kleuren, maar leesbaarheid hangt ook van lettertype en rendering af.
Uitgewerkte voorbeelden
Zwart #000000 op wit #FFFFFF heeft de maximale verhouding 21,00:1 en voldoet aan alle vier tekstgrenzen.
Grijs #767676 op wit heeft intern ongeveer 4,5422:1 en voldoet aan normale AA. #777777 heeft ongeveer 4,4781:1 en voldoet niet, hoewel beide bijna 4,5 tonen.
Veelgestelde vragen
Mag ik HEX zonder # invoeren?
Ja. Drie of zes hexadecimale cijfers mogen met of zonder # en worden voor het resultaat genormaliseerd.
Waarom worden transparantie en verlopen geweigerd?
Hun effectieve achtergrond hangt af van menging of positie. Deze gerichte controle accepteert alleen één ondoorzichtige voorgrond en achtergrond.
Betekent Voldoet dat mijn hele website aan WCAG voldoet?
Nee. Alleen het gekozen tekstkleurenpaar wordt tegen de vermelde getalsgrenzen bevestigd.
Welk resultaat gebruik ik voor hoofdtekst van 16px?
Gewone 16px-hoofdtekst geldt als normale tekst: minimaal 4,5:1 voor AA of 7:1 voor AAA.
Mag grote vette tekst 3:1 gebruiken?
Voor AA wel, als ze aan de definitie voldoet: minstens 14pt vet of 18pt niet-vet.