Contrast
Grafiekbalken die in elkaar overlopen
Een staafgrafiek. Twee categorien. Lichtblauw (#90CAF9) en lichtgroen (#A5D6A7). Naast elkaar.
Links die alleen door kleur te herkennen zijn
Een alinea tekst. Ergens in die tekst staat een link. Geen onderstreping. Alleen een andere kleur.
Zelfgemaakte focusindicator die onzichtbaar is
Tab. Tab. Tab. Waar ben ik? Je navigeert met je toetsenbord door een website. Elke knop en link zou een zichtbare focus moeten hebben. Maar je ziet… niets. Of een vage lichtblauwe gloed.
Die mooie oranje knop met witte tekst
Oranje knop. Witte tekst. “Bestel nu!” Ziet er goed uit. Valt op. Precies wat je wilt van een call-to-action.
Actieve link in het menu met onzichtbare indicator
Je bent op de pagina “Over ons”. In het menu is die link anders dan de rest. Een subtiele onderstreping. Lichtblauw. #8AB4F8.
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.
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. Dit is de meest voorkomende contrastfout op het web. En ik snap waarom. 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.