Lichtgrijze tekst op een witte achtergrond. Het oogt misschien strak, maar als het contrast te laag is wordt lezen voor veel mensen lastig of zelfs onmogelijk. Denk aan iemand met verminderd zicht, kleurenblindheid of gewoon felle zon op het scherm.
In dit artikel leg ik uit wat kleurcontrast is, welke eisen de WCAG stelt en hoe je contrast goed toepast op tekst, grafische objecten en bedieningselementen.
Wat is het eigenlijk?
Kleurcontrast is het verschil in relatieve helderheid tussen twee kleuren die naast elkaar staan. Denk aan de kleur van je tekst tegenover de achtergrondkleur. Hoe groter dat verschil, hoe beter de leesbaarheid.
Je drukt dat verschil uit als een contrastverhouding. De schaal loopt van 1:1 (geen verschil) tot 21:1 (maximaal verschil, zoals zwart op wit).
Hier zijn drie voorbeelden:
Lichtgrijs op wit. Tekst met te weinig contrast.
Lichtgrijze tekst (#CCCCCC) op wit heeft 1,6:1 contrast. Te laag om goed te lezen.
Middelgrijs op wit. Tekst met net genoeg contrast.
Middelgrijze tekst (#767676) op wit heeft 4,5:1 contrast. Net voldoende voor normale tekst.
Zwart op wit. Tekst met maximaal contrast.
Zwarte tekst (#000000) op wit heeft 21:1 contrast. Maximaal contrast.
Kleurcontrast gaat niet alleen over tekst. Het geldt ook voor iconen, knoppen, invoervelden en grafische elementen zoals diagrammen. Alles wat je moet kunnen zien om de pagina te begrijpen of te bedienen.
Waarom is kleurcontrast belangrijk?
Ongeveer 1 op de 12 mannen heeft een vorm van kleurenblindheid. Bij vrouwen is dat 1 op de 200. Ook mensen die slechtziend zijn hebben genoeg contrast nodig om tekst te kunnen lezen.
Alledaagse situaties spelen ook een rol: zonlicht op je beeldscherm, een ouder beeldscherm of vermoeidheid maken lezen moeilijker. Goed contrast helpt dus iedereen.
De regels: wat zegt de WCAG?
De WCAG heeft twee succescriteria over kleurcontrast.
Contrast van tekst
Succescriterium 1.4.3 stelt eisen aan het contrast tussen tekst en de achtergrond. De eisen hangen af van de lettergrootte:
| Kleiner dan 18.5px | 18.5px tot 24px | Groter dan 24px | |
|---|---|---|---|
| Tekst | 4,5:1 | 4,5:1 | 3:1 |
| Vetgedrukte tekst | 4,5:1 | 3:1 | 3:1 |
Waarom dat verschil? Grotere letters zijn makkelijker te lezen.
De eis geldt voor alle zichtbare tekst. Denk ook aan tekst op afbeeldingen, bijschriften, foutmeldingen en placeholderteksten.
Uitzonderingen zijn er ook:
- tekst op een element dat inactief is
- tekst die puur decoratief is
- tekst op een afbeelding die geen informatie overdraagt
- tekst die onderdeel is van een logo of merknaam
- tekst waarvan de weergave wordt bepaald door de browser en niet wordt aangepast door de auteur
Links zonder onderstreping
Sommige vormgevers kiezen ervoor om de onderstreping weg te halen bij links in lopende tekst. Dat ziet er misschien strak uit, maar het maakt links moeilijker te vinden. Als je toch kiest voor links zonder onderstreping, geldt er extra eisen:
- 4,5:1 contrast tussen de linktekst en de achtergrond
- 3:1 contrast tussen de linktekst en de broodtekst (succescriterium 1.4.1)
Contrast van niet-tekstuele content
Er is ook een succescriterium dat gaat over alles wat geen tekst is, maar wel nodig is om de pagina te begrijpen of te bedienen. Dat is succescriterium 1.4.11 Contrast van niet-tekstuele content. Dit omvat contrasten zoals de rand van een invoerveld, de kleur van een icoon of de segmenten in een taartdiagram.
De eis is minimaal 3:1 contrast. Er zijn twee categorieën:
- Componenten van de gebruikersinterface: Niet-tekstuele bedieningselementen zoals invoervelden, keuzelijsten en iconen die ook worden gebruikt als link of knop.
- Grafische objecten: Niet-tekstuele onderdelen die nodig zijn om de inhoud te begrijpen zoals informatieve iconen, onderdelen in een grafiek of diagram.
Een belangrijk detail: het gaat om het contrast met de direct aangrenzende kleur. Dat is niet altijd de achtergrondkleur van de pagina. Bij een invoerveld meet je bijvoorbeeld het contrast van de rand tegen de kleur die er direct omheen staat.
Componenten van de gebruikersinterface
Visuele grenzen en vormen
Dit zijn de visuele kenmerken waarmee je een bedieningselement herkent.
| Element | Wat moet 3:1 contrast hebben | Toelichting |
|---|---|---|
| Invoerveld | De rand of achtergrondkleur die het veld zichtbaar maakt | Heeft het veld alleen een onderrand? Dan moet die onderrand 3:1 contrast hebben. Heeft het een volledige rand? Dan geldt de eis voor de volledige rand. Geen rand maar wel een afwijkende achtergrondkleur? Dan meet je het contrast met de kleur eromheen. |
| Knop | De rand of achtergrondkleur die de knop herkenbaar maakt | Bevat de knop tekst met voldoende contrast? Dan hoeft de knoprand níet apart aan 3:1 te voldoen. |
| Selectievakje (checkbox) | De rand van het vakje | De rand moet 3:1 contrast hebben met de achtergrond. |
| Keuzerondje (radio button) | De rand van de cirkel | Zelfde principe als het selectievakje. |
| Keuzelijst (dropdown) | De rand of achtergrondkleur, en het pijlicoon | Het pijlicoon is nodig om te begrijpen dat er een uitklapmenu achter zit. Dat icoon moet ook 3:1 contrast hebben. |
| Schakelknop | De buitenrand en de interne indicator (het schuifje) | Zowel de buitenvorm als het schuifje moeten voldoende contrast hebben. |
| Schuifregelaar (slider) | De balk (track) en het handvat (thumb) | Het handvat moet contrast hebben met de balk. De balk moet herkenbaar zijn tegen de achtergrond. |
Toestanden (states)
De visuele informatie die een staat aangeeft, moet 3:1 contrast hebben met de aangrenzende kleur.
| Staat | Voorbeelden | Toelichting |
|---|---|---|
| Focus | Focusrand, focusomlijning, kleurverandering van de rand | De focusindicator moet 3:1 contrast hebben met de kleur die er direct naast ligt. Bij een externe focusrand is dat de achtergrondkleur van de pagina. Bij een interne focusrand is dat de achtergrondkleur van het element zelf. |
| Aangevinkt / niet aangevinkt | Het vinkje in een selectievakje, de vulling van een keuzerondje | Het vinkje moet 3:1 contrast hebben met de achtergrond van het vakje. De vulling van een keuzerondje moet contrast hebben met de binnenkant van de cirkel óf met de kleur ernaast. |
| Aan / uit | De positie of kleur van een schuifje in een schakelaar | De indicator die aangeeft of de schakelaar aan of uit staat, moet 3:1 contrast hebben. |
| Uitgeklapt / ingeklapt | De draairichting van een pijl, een plus/min-icoon | Het visuele verschil dat aangeeft of iets open of dicht is, moet herkenbaar zijn met voldoende contrast. |
| Geselecteerd | Markering van een actief tabblad, geselecteerd menu-item | De visuele markering die aangeeft dat iets geselecteerd is, moet 3:1 contrast hebben. |
| Hover | Eventuele visuele verandering bij muisaanwijzer | De hover-staat hoeft zelf geen 3:1 contrast te hebben met de standaardstaat. De muisaanwijzer geeft al aan welk element je aanwijst. Maar: het element mag tijdens hover niet onder de 3:1 contrastgrens zakken ten opzichte van de omgeving. |
Belangrijke nuance: hover
De muisaanwijzer zelf is al de indicator van de hover-staat. Daarom hoeft een extra visueel hover-effect (zoals een kleurverandering of schaduw) niet zelfstandig aan de contrasteis te voldoen.
Het element zelf moet wel voldoende contrast behouden tijdens hover.
Grafische objecten
Informatieve iconen
| Type | Voorbeeld | Toelichting |
|---|---|---|
| Informatieve iconen | Telefoonicoon, printericoon, waarschuwingsicoon, zoekicoon | Het icoon moet 3:1 contrast hebben met de achtergrond of het vlak waarop het staat. |
| Symbolen als tekens | Een “X” voor sluiten, een “>” als pijl | Tekstkarakters die gebruikt worden als symbool (voor hun visuele verschijning, niet voor menselijke taal) vallen onder niet-tekstuele content. Ze moeten 3:1 contrast hebben met de achtergrond. |
| Iconen in een gekleurd vlak | Een wit icoon op een gekleurd cirkelvlak | Het icoon moet 3:1 contrast hebben met het gekleurde vlak. De vorm van het vlak zelf moet 3:1 contrast hebben met de pagina-achtergrond als de vorm informatie overbrengt. |
Grafieken en diagrammen
Lijnen of segmenten in een grafiek of diagram hoeven niet onderling te contrasteren als je ze kunt volgen door andere middelen (bijv. labels, legenda’s, datapunten).
| Type | Wat moet 3:1 contrast hebben | Toelichting |
|---|---|---|
| Lijngrafiek | Elke lijn die data vertegenwoordigt, en de achtergrondlijnen die de waarden aangeven | De lijnen moeten 3:1 contrast hebben met de achtergrond van de grafiek. Kruispunten tussen lijnen hoeven geen 3:1 te zijn als je beide lijnen kunt blijven volgen. |
| Staafdiagram | Elke staaf | De staven moeten 3:1 contrast hebben met de achtergrond. Aangrenzende staven moeten onderling onderscheidbaar zijn (3:1) als je het verschil moet begrijpen. |
| Taartdiagram (cirkeldiagram) | De randen tussen aangrenzende segmenten, óf het kleurverschil tussen de segmenten | Aangrenzende segmenten moeten van elkaar onderscheidbaar zijn (3:1). Dit kan met contrasterende randen of met kleurverschillen tussen de segmenten zelf. |
| Spreidingsdiagram (scatterplot) | De datapunten | Elk datapunt moet 3:1 contrast hebben met de achtergrond. Bij meerdere datareeksen moeten overlappende of dicht bij elkaar liggende punten onderling 3:1 contrast hebben. |
| Infographic | Elk onderdeel dat informatie overbrengt | Elk informatief element (iconen, vormen, cirkels, grafieken) moet 3:1 contrast hebben met zijn directe achtergrond. Beoordeel elk element apart. |
| Kaarten, geografische visualisaties | Grenslijnen tussen gebieden, markers en iconen die informatie overbrengen | Markers (zoals locatie-pins) moeten 3:1 contrast hebben met de kaartachtergrond. Grenslijnen tussen kaartgebieden moeten 3:1 hebben met beide aangrenzende gebieden. Belangrijke routes of lijnen moeten 3:1 hebben met de achtergrond. |
Uitzonderingen zijn:
- bedieningselementen die inactief zijn
- elementen die puur decoratief zijn
- elementen waarvan de weergave wordt bepaald door de browser en niet wordt aangepast door de auteur
- elementen waarvan een specifieke weergave essentieel is, zoals onderdelen van een logo, merknaam of vlag
De contrastverhouding uitgelegd
Je berekent de contrastverhouding op basis van de helderheid van twee kleuren. Het resultaat is een verhouding zoals 4,5:1. Hoe hoger het eerste getal, hoe groter het verschil.
Je hoeft deze formule niet zelf te berekenen. Er zijn veel hulpmiddelen die dit automatisch doen.
Gebruik een contrastchecker
Hulpmiddelen zoals de Colour Contrast Analyser (CCA) en de WebAIM Contrast Checker berekenen snel de contrastverhouding. Vul twee kleurcodes in en je ziet direct of het contrast voldoende is.
Of gebruik direct mijn contrast checker.
Vul je kleuren in
De contrastverhouding is: 21:1
Resultaten
Normale tekst
1.4.3 Contrast (minimum) (AA): Voldoende
1.4.6 Contrast (versterkt) (AAA): Voldoende
Grote tekst
1.4.3 Contrast (minimum) (AA): Voldoende
1.4.6 Contrast (versterkt) (AAA): Voldoende
Niet-tekstuele bedieningselementen en grafische objecten
1.4.11 Contrast van niet-tekstuele content (AA): Voldoende
Contrast meten met een bijzondere achtergrond
WCAG stelt geen specifieke eisen aan hoe je het contrast over een kleurverloop of achtergrondafbeelding meet. De normale regels blijven bestaan, maar hoe meet je dat als de achtergrond meerdere kleuren heeft?
Kleurverloop
Meet het contrast op het punt waar het verschil het kleinst is. Meestal is dat het lichtste deel van het verloop.
Voorbeeld: je hebt witte tekst over een kleurverloop van donkerblauw naar lichtblauw. Meet het contrast tussen de witte tekst en het lichtste blauw in het verloop.
Achtergrondafbeeldingen
Meet het contrast tegen het gedeelte van de afbeelding waar het element op staat.
Tip voor vormgevers: Is de afbeelding druk of heeft deze veel verschillende kleuren? Voeg dan een halftransparant vlak toe tussen de tekst en de afbeelding. Zo maak je het contrast beter en de tekst beter leesbaar.
Transparantie
Transparantie verlaagt het contrast. Als je een halfdoorzichtige kleur gebruikt, meet je het uiteindelijke contrast. Dat is de mix van de transparante kleur en de kleur eronder.
Voorbeeld: je hebt grijze tekst met 50% transparantie op een witte achtergrond. De kleur die je ziet is lichter grijs. Meet het contrast van die lichtere grijstint tegen wit.
Om te onthouden
Kleurcontrast is een van de meest meetbare onderdelen van digitale toegankelijkheid. Je kunt het controleren met een simpele tool en het resultaat is een helder getal: voldoende of niet.
Test regelmatig en neem contrast mee in elke fase: ontwerp, ontwikkeling en contentbeheer. Stap voor stap maak je je website beter leesbaar voor iedereen.
Gerelateerde succescriteria
Dit artikel behandelt twee WCAG-succescriteria:
- 1.4.3 Contrast (minimum) (niveau AA)
- 1.4.11 Contrast van niet-tekstuele content (niveau AA)