Lichtgrijze tekst op een witte achtergrond kan er in één oogopslag elegant en minimalistisch uitzien - en volledig onleesbaar zijn voor gebruikers met een visuele beperking, fel zonlicht op het scherm of gewoon vermoeide ogen aan het eind van een werkdag. Kleurcontrast is een van de meest ‘technische’ criteria op het gebied van toegankelijkheid – er zijn exacte cijfers waaraan moet worden voldaan – maar het is ook een van de gemakkelijkste om vooraf te testen en op te lossen.

In het kort: wat deze gids behandelt

  1. Welke verhoudingen WCAG vereist
  2. Waarom grote tekst minder contrast mag
  3. Hoe u een contrastverhouding in de praktijk kunt controleren
  4. Hoe je vooraf een toegankelijk kleurenpalet kiest

Welke verhoudingen WCAG vereist

WCAG definieert een contrastverhouding als een getal tussen 1:1 (helemaal geen contrast – identieke kleur) en 21:1 (het maximaal mogelijke contrast – puur zwart op puur wit). Op niveau AA (het verplichte niveau in de meeste landen, inclusief Israël) is de vereiste een verhouding van minimaal 4,5:1 tussen gewone tekst en de achtergrond erachter. Op het strengere AAA-niveau stijgt de eis naar 7:1.

Waarom grote tekst is toegestaan, minder contrast

Grote tekst blijft leesbaar, zelfs met een lager contrast, dus WCAG stelt een eenvoudiger drempelwaarde in: 3:1 op niveau AA (in plaats van 4,5:1) en 4,5:1 op niveau AAA (in plaats van 7:1). 'Grote tekst' wordt gedefinieerd als tekst van 18 punten of groter (ongeveer 24 pixels), of 14 punten of groter (ongeveer 18,7 pixels) als deze vetgedrukt is. Grote koppen kunnen bijvoorbeeld een iets lager contrast "veroorloven" dan een gewone hoofdparagraaf en toch aan de vereiste voldoen.

Illustratief diagram Contrastverhoudingen vergelijken Drie tekst-op-achtergrondvoorbeelden met verschillende contrastverhoudingen Contrastverhouding tussen tekst en achtergrond Voorbeeldtekst 1.8:1 — ✕ mislukt Voorbeeldtekst 7.1:1 — ✓ voldoet ook aan AAA Voorbeeldtekst 5.4:1 — ✓ voldoet aan niveau AA Gewone tekst: minimaal 4,5:1 · Grote tekst (24px+, of 18,7px vet): minimaal 3:1 Tools zoals de WebAIM Contrast Checker geven u de exacte verhouding voordat u een kleurenpalet voltooit
Drie voorbeelden van tekst op de achtergrond: een te lage verhouding (1,8:1) voldoet zelfs niet aan het basisniveau; de andere twee ratio's voldoen respectievelijk aan de AA- en AAA-vereisten.

Hoe u een contrastverhouding in de praktijk kunt controleren

Het is niet nodig om het handmatig te berekenen: met gratis tools zoals de WebAIM Contrast Checker kunt u de tekst- en achtergrondkleurcodes invoeren en onmiddellijk de exacte verhouding en een voldoende/niet-geslaagde score voor elk niveau krijgen. Het is de moeite waard om niet alleen tekst op een effen achtergrond te controleren, maar ook tekst over achtergrondafbeeldingen of kleurovergangen heen, waar het contrast kan variëren tussen verschillende delen van dezelfde afbeelding. Het is dus het beste om de meest "problematische" plek te testen.

💡 Praktische tip

Niet alleen tekst: dezelfde contrastvereiste (op een eenvoudiger drempel, 3:1) geldt ook voor grafische UI-componenten zoals formulierveldcontouren, functionele pictogrammen en knopranden – en niet alleen voor letters.

Hoe u vooraf een toegankelijk kleurenpalet kiest

De meest efficiënte aanpak is om het contrast te controleren in de sjabloonontwerpfase, en niet in elk document afzonderlijk. Bij het kiezen van merkkleuren voor kopteksten, hoofdtekst en links is het de moeite waard om vooraf te bevestigen dat elke tekst-achtergrondcombinatie die u daadwerkelijk gebruikt, aan minimaal 4,5:1 voldoet. Op deze manier "erft" elk nieuw document dat op basis van de sjabloon wordt gemaakt automatisch het juiste contrast, in plaats van elk document afzonderlijk te controleren nadat het al is geschreven.

Wilt u weten of uw documenten aan de contrastvereisten voldoen?

Onze tool controleert het kleurcontrast als onderdeel van de automatische scan van elk PDF-bestand op uw site.

Scan uw site gratis ←