Contrast
Witte tekst op een foto
“Welkom bij ons” In wit. Op een foto van een zonnig landschap. Links voldoende contrast. Rechts? Waar de lucht wit is? Onleesbaar.
Invoerveld zonder zichtbare rand
Een wit invoerveld op een witte achtergrond. Met een lichtgrijze rand. Heel lichtgrijs. #D9D9D9.
Placeholdertekst die niemand kan lezen
“Voer hier je e-mailadres in” Dat staat er. In het invoerveld. In #C0C0C0 op wit. Contrast: 1,6:1.
Ziet AI dat je tekst te licht is?
Ziet AI dat je tekst te licht is? Groen op wit. Oranje op wit. Lichtgrijs op wit. Het ziet er fris uit. Kleurrijk. Modern. Maar voor iemand met verminderd gezichtsvermogen verdwijnt die tekst in de achtergrond. En nee, dat zijn niet alleen ouderen. Ook bij een scherm in de zon of een drukke dag is die lichte tekst het verschil tussen lezen en opgeven. Dit is het meest voorkomende contrastprobleem dat ik tegenkom bij audits (WCAG 1.4.3). Bijna elke website heeft het ergens. Vaak precies in de elementen die het design “fris” en “modern” maken. In de vorige test gaf ik AI een stuk code. Nu doe ik iets anders: ik geef AI een screenshot van een echte website. Geen code, geen HTML, geen CSS. Alleen een plaatje. Kan AI vision zien wat er mis is?
Informatief icoon dat onzichtbaar is
Drie streepjes. Een hamburgericoon. Dat is je menu. Tenminste, als je het kunt zien.
Lichtgrijze tekst op een witte achtergrond
Contrastverhouding: 2,85:1. Vereist: 4,5:1. Laag contrast is een van de meest voorkomende toegankelijkheidsproblemen op het web. In de WebAIM Million 2025 werd laag-contrasttekst gevonden op 79,1% van de onderzochte homepages. En ik snap waarom lichtgrijze tekst populair is. Het ziet er strak uit. Rustig. Modern.
Focusindicator die opgaat in de achtergrond
Er is een focusindicator. Technisch gezien. Een lichtgrijze outline (#E0E0E0) op een witte achtergrond. 1 pixel dik.