Kleurcontrast
Kleurcontrast volgens WCAG: eisen, uitzonderingen en contrastchecker
Voldoende kleurcontrast maakt je teksten en knoppen leesbaar voor iedereen, ook op een telefoon in de zon. Je leest welke contrastverhoudingen WCAG 2.2 vraagt en test je eigen kleuren direct met de contrastchecker.
Test je kleuren met de contrastchecker
Vul een tekstkleur en een achtergrondkleur in. De checker berekent de contrastverhouding en laat per WCAG-eis zien of je kleuren voldoen.
Jouw kleuren
Resultaat
Dit is gewone tekst in jouw kleuren.
Grote tekst
Contrastverhouding:
- Gewone tekst, niveau AA (4,5:1)Geslaagd
- Grote tekst, niveau AA (3:1)Geslaagd
- Bedieningsonderdelen, niveau AA (3:1)Geslaagd
- Gewone tekst, niveau AAA (7:1)Afgekeurd
- Grote tekst, niveau AAA (4,5:1)Geslaagd
Waarom kleurcontrast telt
Bezoekers die slechtziend of kleurenblind zijn, of van wie de ogen ouder worden, lezen tekst met weinig contrast moeilijk of niet. Ook wie buiten op een telefoon leest of een eenvoudig scherm gebruikt, heeft baat bij goed contrast.
Goed contrast maakt je knoppen, prijzen en koppen beter zichtbaar en je teksten sneller te lezen. Zo bereik je meer klanten met dezelfde pagina's.
De contrasteisen van WCAG 2.2
Voor niveau AA, het gangbare doel, gelden 1.4.1, 1.4.3 en 1.4.11. Het versterkte contrast van 1.4.6 hoort bij niveau AAA.
| Succescriterium | Niveau | Wat het vraagt |
|---|---|---|
| Gebruik van kleur (1.4.1) | A | Kleur is nooit de enige manier om informatie over te brengen, zoals een foutmelding of een link in lopende tekst. |
| Contrast (minimum) (1.4.3) | AA | Gewone tekst heeft minimaal 4,5:1 contrast met de achtergrond, grote tekst minimaal 3:1. |
| Contrast van niet-tekstuele content (1.4.11) | AA | Onderdelen die je nodig hebt om te bedienen, zoals randen van invoervelden, focusranden en iconen, en informatieve grafische elementen hebben minimaal 3:1 contrast met hun omgeving. |
| Contrast (versterkt) (1.4.6) | AAA | Gewone tekst heeft minimaal 7:1 contrast, grote tekst minimaal 4,5:1. |
Wat telt als grote tekst?
Grote tekst is minimaal 18 punt, ongeveer 24 pixels, of minimaal 14 punt vet, ongeveer 18,5 pixels. Voor grote tekst geldt de lagere eis van 3:1, omdat grotere letters met minder contrast goed leesbaar blijven.
De weergegeven grootte telt. Wordt een kop op een telefoon kleiner getoond, dan geldt daar mogelijk de eis voor gewone tekst.
Uitzonderingen op de contrasteis
Voor deze tekst geldt geen contrasteis:
- Tekst in logo's en merknamen.
- Tekst in uitgeschakelde onderdelen, zoals een knop die nog niet te gebruiken is.
- Puur decoratieve tekst en tekst die voor niemand zichtbaar is.
- Tekst die onderdeel is van een foto met veel andere beeldinhoud, zoals een straatnaambord op een foto.
Zo wordt de contrastverhouding berekend
De contrastverhouding vergelijkt hoe licht de lichtste en de donkerste kleur zijn. De uitkomst ligt tussen 1:1, voor twee gelijke kleuren, en 21:1, voor zwart op wit. Hoe hoger de verhouding, hoe beter leesbaar.
De berekening houdt rekening met hoe het oog kleuren ziet: groen lijkt voor het oog veel lichter dan blauw. Rond de uitkomst niet af, want 4,49:1 haalt de eis van 4,5:1 niet.
Beter contrast met je eigen huisstijl
Gebruik een donkere tint voor tekst
Zet je merkkleur in voor vlakken en accenten, en een donkerdere tint van dezelfde kleur voor tekst en links.
Tip: Probeer in de contrastchecker hierboven steeds donkerdere tinten van je merkkleur, tot je 4,5:1 haalt.
Geef tekst op foto's een effen achtergrond
Tekst over een foto heeft wisselend contrast. Leg er een effen of halfdoorzichtig vlak achter, of plaats de tekst naast de afbeelding.
Controleer alle staten
Bekijk ook hoe knoppen en velden eruitzien als je er met de muis overheen gaat, als ze geselecteerd zijn of een fout tonen, en controleer de voorbeeldtekst in invoervelden.
Leg kleurparen vast
Noteer in je huisstijl welke tekst- en achtergrondkleuren samen voldoen. Dan kiest iedereen in je team voortaan een goede combinatie.
Contrast elke week bewaken
Nieuwe content, campagnebanners en thema-updates veranderen je kleuren ongemerkt. De automatische tests van AccessRadar controleren het contrast van je teksten bij elke wekelijkse scan. Zo zie je nieuwe contrastproblemen op tijd, met de pagina waar ze staan.
Automatische tests én AI-contentanalyse
AccessRadar combineert automatische tests met AI-contentanalyse. Zo zie je niet alleen technische fouten, maar ook welke teksten je bezoekers echt helpen.
De AI-analyse leest de tekst van je pagina's en geeft suggesties, bijvoorbeeld voor:
- Alternatieve teksten: zegt de tekst iets zinvols, of is het 'afbeelding', een bestandsnaam of 'klik hier'?
- Linkteksten: wordt uit de linktekst en de tekst eromheen duidelijk waar een link naartoe leidt?
- Koppen en labels: beschrijven ze het onderwerp of het veld, of zijn het lege woorden zoals 'Info' of 'Veld 1'?
- Paginatitels en formulieren: is duidelijk waar een pagina over gaat en wat een veld verwacht?
Je krijgt concrete suggesties voor betere teksten, die je direct oppakt in je wekelijkse verbeterplan. Zo groeit je website elke week verder naar WCAG 2.2 AA-geschiktheid en bereik je meer klanten.
Lees hoe tests en AI-analyse samenwerken in het verbeterplan
Lees ook
Praktische uitleg over WCAG en digitale toegankelijkheid.
WCAG 2.2 AA-checklist: wat controleer je op je website?
Praktische WCAG 2.2 AA-checklist per categorie, met uitleg en tips om direct te verbeteren. Handig voor eigenaren, redacteuren en developers.
Alt-tekst schrijven: zo maak je afbeeldingen toegankelijk
Hoe schrijf je een goede alt-tekst? Lees wanneer een afbeelding er een nodig heeft, met voorbeelden voor productfoto's, knoppen, logo's en grafieken.
Toetsenbordtoegankelijkheid: zo werkt je website zonder muis
Werkt je website zonder muis? Lees welke WCAG-eisen gelden voor toetsenbordbediening en focus, hoe je zelf test en hoe je veelvoorkomende problemen oplost.
Controleer je website gratis op WCAG
Vraag de gratis WCAG-check van AccessRadar aan en ontvang de resultaten van een automatische scan per e-mail, als startpunt voor je verbeterpunten.
Wil je daarna elke week verder? Het WCAG-verbeterplan voegt wekelijkse scans en AI-contentanalyse toe.
Een WCAG-scan ondersteunt je beoordeling. Een automatische WCAG-scan kan volledige WCAG 2.2 AA-geschiktheid niet vaststellen. Combineer regelmatige WCAG-scans met handmatig onderzoek en feedback van mensen met een beperking.
Veelgestelde vragen over kleurcontrast
Welk kleurcontrast vraagt WCAG?
Op niveau AA, het gangbare doel, heeft gewone tekst minimaal 4,5:1 contrast nodig en grote tekst minimaal 3:1. Iconen, randen van invoervelden en andere bedieningsonderdelen hebben minimaal 3:1.
Geldt de contrasteis ook voor knoppen?
Ja. De tekst op een knop haalt 4,5:1 tegen de knopkleur. Herken je de knop alleen aan zijn vorm of rand, dan heeft die rand minimaal 3:1 contrast met de achtergrond nodig.
Geldt de contrasteis voor logo's?
Nee. Tekst die onderdeel is van een logo of merknaam heeft geen contrasteis.
Telt voorbeeldtekst in een invoerveld mee?
Ja. Voorbeeldtekst in een invoerveld (een placeholder) is tekst en heeft 4,5:1 contrast nodig. Gebruik daarnaast altijd een zichtbaar label, want de voorbeeldtekst verdwijnt zodra iemand typt.
Hoe test ik het kleurcontrast van mijn hele website?
Gebruik de contrastchecker op deze pagina voor losse kleurparen. Voor je hele website controleren automatische tests het contrast van de teksten op je pagina's, zoals in de gratis WCAG-check van AccessRadar.