Kleurcontrast
Tekst moet een contrastverhouding van minimaal 4,5:1 hebben ten opzichte van de achtergrond (3:1 voor grote tekst ≥18pt/14pt vet). De meest voorkomende WCAG-fout — gevonden op 84% van de homepagina's in de WebAIM Million 2026.
If text is too faint against its background, people with low vision — and anyone reading in bright sunlight — can't make it out. The colors need enough difference to stand apart.
WCAG 1.4.3 vereist een contrastverhouding van minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst (18pt / 14pt vet). WCAG 1.4.6 (Niveau AAA) verhoogt dit naar 7:1 en 4,5:1.
Veelvoorkomende foutpatronen zijn: grijze placeholder-tekst, lichtgekleurde footerlinks, tekst over foto's zonder overlay, uitgeschakelde knopstaten met onvoldoende contrast, en merkkleuren gekozen op esthetiek in plaats van leesbaarheid.
Tools: Chrome DevTools kleurkiezer (toont verhouding), Contrast Checker browserextensies, Figma-plugins (Stark, A11y - Color Contrast Checker).
Waarom dit belangrijk is
Dit faalt op 84% van de homepagina's — de meest gedetecteerde WCAG-fout, al 7 jaar op rij. Het treft direct 253 miljoen+ mensen met visuele beperkingen, 300 miljoen met kleurenblindheid, en iedereen die schermen afleest in felle omgevingen of met verouderende ogen.
Hoe te detecteren
Voer axe DevTools of WAVE uit op je pagina voor geautomatiseerde controles. Controleer vervolgens handmatig: placeholder-tekst, uitgeschakelde knoppen, footerlinks, tekst over afbeeldingen, en tekst met opacity of rgba-kleuren. Controleer zowel lichte als donkere modus.
Hoe op te lossen
:root {
--text-primary: #09090b; /* 18:1 on white */
--text-secondary: #52525b; /* 7.4:1 */
--text-muted: #71717a; /* 4.7:1 — minimum for normal text */
}
/* Text over images needs a reliable overlay */
.hero-overlay {
background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55));
}
/* Never rely on opacity for text */
.bad { color: rgba(0,0,0,0.4); } /* ✗ unpredictable ratio */
.good { color: #71717a; } /* ✓ testable, reliable */