Contrastverhouding
Zie ook: color contrast
De luminantieverhouding tussen voorgrondtekst en achtergrond, op een schaal van 1:1 tot 21:1. WCAG 2.x vereist 4,5:1 voor normale tekst en 3:1 voor grote tekst (≥18pt of 14pt vet) op niveau AA.
De contrastverhouding meet het waargenomen luminantieverschil tussen twee kleuren — doorgaans tekst en de bijbehorende achtergrond. De schaal loopt van 1:1 (geen contrast — wit op wit) tot 21:1 (puur zwart op puur wit). WCAG definieert minimumverhoudingen voor de leesbaarheid van tekst.
De WCAG-drempelwaarden
WCAG 2.x succescriteria 1.4.3 (Contrast (minimum), niveau AA) en 1.4.6 (Contrast (versterkt), niveau AAA) stellen de volgende minimumwaarden vast:
| Teksttype | AA | AAA |
|---|---|---|
| Normale tekst (< 18pt of < 14pt vet) | 4,5:1 | 7:1 |
| Grote tekst (≥ 18pt, of ≥ 14pt vet) | 3:1 | 4,5:1 |
| Grafische objecten + UI-componenten (1.4.11) | 3:1 | — |
WCAG 2.x meet contrast aan de hand van de WCAG-formule (een op luminantie gebaseerde verhouding). WCAG 3 onderzoekt een perceptueel uniforme vervanging (“APCA” — Accessible Perceptual Contrast Algorithm) die zich anders gedraagt bij zeer donkere of zeer lichte achtergronden; APCA is nog niet normatief.
Wat er nog misgaat
Kleurcontrast is een van de weinige WCAG-regels die een tool betrouwbaar kan detecteren; geautomatiseerde scanners onderscheppen de meeste gevallen van tekst-op-achtergrond-fouten. Wat er toch doorheen glipt:
- Tijdelijke tekst in invoervelden. Vaak #999 of lichter op wit — voldoet niet aan AA. Ontwerpers kiezen bewust voor laag contrast om tijdelijke tekst te onderscheiden van een ingevulde waarde, maar de aanbevolen aanpak is een apart
<label>boven het veld met hoog-contrast tijdelijke tekst (of helemaal geen tijdelijke tekst). - Hover- en focusstatussen. Een knop met voldoende standaardcontrast kan op hover falen (bijv. een lichtgrijze hoverkleur op wit). Auditeer interactieve elementen in elke visuele toestand.
- Uitgeschakelde bedieningselementen. Uitgeschakelde bedieningselementen zijn formeel vrijgesteld van het AA-contrastvereiste, maar ze enkel via laag contrast grijs weergeven biedt gebruikers met een kleurvisiestoornis geen manier om te weten dat het element uitgeschakeld is. Combineer kleur met een ander signaal — een pictogram, een labelwijziging, of
aria-disabledzodat schermlezer dit aankondigt. - Tekst over afbeeldingen en verlopen. Hero-overlays waarbij dezelfde tekst zowel over een licht als over een donker gedeelte van de achtergrondafbeelding loopt, falen vaak in het lichtere gebied.
- Pictogrammen als enig label. Een pictogram van 24 pixels zonder tekst heeft 3:1 nodig ten opzichte van de achtergrond (1.4.11); de betekenisvolle pixels — de omtrekstreken — zijn wat gemeten wordt.
Operationeel testen
Drie werkwijzen verminderen contrastfouten in een vroeg stadium:
- Linting tijdens het ontwerp. Stark, Able en de toegankelijkheidschecker van Adobe XD beoordelen contrast binnen de ontwerptool. Los het op voordat de code wordt geschreven.
- Tokenized kleurpaletten. Definieer elke tekst-/achtergronscombinatie als een token waarvan het contrast eenmalig wordt gecontroleerd. Verbied ad-hockleurwaarden op tekstdragende componenten.
- Geautomatiseerde CI-controles. axe-core, Pa11y of Lighthouse laten builds falen bij contrastschendingen. Goedkoop om toe te voegen, duur om over te slaan.
Verder dan de minimumgrens
4,5:1 is een minimum, geen esthetisch doel. Gebruikers met een milde kleurvisiestoornis, leeftijdsgerelateerd visueel verlies of schermen van lage kwaliteit geven de voorkeur aan 7:1 of hoger voor de hoofdtekst. Een site die op elk element net voldoet aan AA voelt over het algemeen laag-contrast aan, zelfs voor gebruikers zonder formele functiebeperking.