Zo gebruik je deze tool
- Voer de tekstkleur (voorgrondkleur) en achtergrondkleur in als HEX, rgb(), hsl() of een ander CSS-formaat, of gebruik de kleurkiezers.
- Bekijk de contrastverhouding en of aan elke WCAG-eis wordt voldaan.
- Kies bij een niet-gehaalde eis een doelwaarde en pas de voorgestelde kleur toe. De tint blijft behouden; alleen de lichtheid verandert.
- Gebruik ‘Wisselen’ om de omgekeerde combinatie te controleren, bijvoorbeeld lichte tekst op een donkere knop.
Hoe het werkt
De verhouding volgt de definitie uit WCAG 2.2: de relatieve luminantie van elke kleur wordt berekend op basis van de sRGB-kanalen. De verhouding is (lichter + 0.05) ÷ (donkerder + 0.05). Deze loopt van 1:1 (identieke kleuren) tot 21:1 (zwart op wit).
Gecontroleerde vereisten: succescriterium 1.4.3 (AA) vereist 4.5:1 voor gewone tekst en 3:1 voor grote tekst; 1.4.6 (AAA) vereist respectievelijk 7:1 en 4.5:1; 1.4.11 vereist 3:1 voor interface-elementen en betekenisvolle afbeeldingen, zoals randen van invoervelden en pictogrammen. Grote tekst is minstens 24px normaal of ongeveer 18.66px vet. WCAG staat afronden naar boven niet toe, dus 4.49:1 voldoet niet aan AA, ook al zit het er dichtbij. De hier getoonde verhouding is afgekapt, niet afgerond.
De suggestie behoudt de tint en chroma van de tekstkleur in OKLCH en zoekt de lichtsterkte die het dichtstbij ligt en aan de vereiste voldoet; die kan donkerder of lichter zijn. Contrast is slechts één onderdeel van leesbaarheid: ook de letterdikte, tekengrootte en verschillen in kleurwaarneming spelen een rol. WCAG 2.2 is de huidige aanbeveling van het W3C waarnaar de meeste toegankelijkheidswetten verwijzen.
Voorbeelden
Grijze tekst die net niet voldoet
#777777 op wit geeft een verhouding van 4.48:1. Dat voldoet voor grote tekst en interface-elementen, maar niet aan AA voor gewone tekst. De dichtstbijzijnde grijstint die wel voldoet is ongeveer #767676, met een verhouding van 4.54:1.
Witte tekst op een merkkleurige knop
Wit op #ff8800 geeft een verhouding van ongeveer 2.4:1 en voldoet zelfs niet aan het niveau van 3:1 voor grote tekst. De gebruikelijke oplossingen zijn de oranje kleur donkerder maken of donkere tekst gebruiken. De suggestie laat zien hoe donker de tekstkleur moet zijn.
De rand van een invoerveld controleren
Een lichtgrijze rand #cccccc op wit heeft een verhouding van ongeveer 1.6:1. Volgens criterium 1.4.11 moet een rand die een invoerveld herkenbaar maakt een verhouding van 3:1 hebben. Daarvoor is ongeveer #949494 of een donkerdere tint nodig.
Veelgestelde vragen
Welke contrastverhouding heb ik nodig voor WCAG AA?
4.5:1 voor gewone tekst, 3:1 voor grote tekst (24px of 18.66px vet) en 3:1 voor interface-elementen en betekenisvolle afbeeldingen. Voor AAA geldt 7:1 voor tekst en 4.5:1 voor grote tekst.
Moet tekst in logo's of op uitgeschakelde knoppen aan de eisen voldoen?
Nee. WCAG stelt tekst in logo's en merknamen, puur decoratieve tekst en tekst in inactieve (uitgeschakelde) interface-elementen vrij van deze eis.
Waarom wijkt mijn resultaat een beetje af van dat van een andere checker?
Sommige tools ronden de verhouding af op één decimaal of naar boven. WCAG vergelijkt de exacte waarde, daarom kapt deze tool de verhouding af op twee decimalen. Kleine verschillen kunnen ook ontstaan door kleuren met een alfakanaal.
Hoe zit het met de nieuwe APCA-contrastmethode?
APCA is een andere methode die is voorgesteld voor een toekomstige versie van WCAG. De methode maakt geen deel uit van WCAG 2.2, waarop deze tool is gebaseerd en waarnaar de huidige toegankelijkheidsrichtlijnen verwijzen.
Privacy
De kleuren worden in je browser gecontroleerd. Er wordt niets geüpload of opgeslagen.