Contrast & Kleuren
Zorg voor optimale leesbaarheid voor alle gebruikers
WCAG EN 301 549 criteria
Tekstcontrast
Slecht voorbeeld
Lichtgrijze tekst op wit (2.2:1) - Mislukt
Ratio: 2.2:1Middelgrijze tekst op wit (3.8:1) - Mislukt
Ratio: 3.8:1Gele tekst op wit (1.9:1) - Mislukt
Ratio: 1.9:1Oranje op rood (1.2:1) - Mislukt
Ratio: 1.2:1Donkergrijs op zwarte achtergrond (2.5:1) - Mislukt
Ratio: 2.5:1Blauw op donkere achtergrond (1.8:1) - Mislukt
Ratio: 1.8:1Goed voorbeeld
Donkergrijze tekst op wit (7.0:1) - AAA Geslaagd
Ratio: 7.0:1Zwarte tekst op wit (21:1) - AAA Geslaagd
Ratio: 21:1Donkerblauwe tekst op wit (5.9:1) - AA Geslaagd
Ratio: 5.9:1Wit op donkerblauw (8.6:1) - AAA Geslaagd
Ratio: 8.6:1Wit op zwarte achtergrond (21:1) - AAA Geslaagd
Ratio: 21:1Geel op donkere achtergrond (12.3:1) - AAA Geslaagd
Ratio: 12.3:1Uitleg: WCAG AA-contrastverhouding vereist minimaal 4.5:1 voor normale tekst en 3:1 voor grote tekst (18pt+ of 14pt+ vet). AAA-niveau is strenger met 7:1 en 4.5:1.
Informatie via kleur
Slecht voorbeeld
Registratieformulier
🔴 Rood = Fout, Groen = Geldig
Bestellingsstatus
Goed voorbeeld
Registratieformulier
Bestellingsstatus
Uitleg: Informatie mag nooit uitsluitend afhangen van kleur. Voeg altijd extra visuele indicatoren toe (iconen, patronen, tekst).
Kleurenblindheid en toegankelijkheid
Slecht voorbeeld
Prestatiegrafiek
Goed voorbeeld
Prestatiegrafiek
Uitleg: Ongeveer 8% van de mannen en 0,5% van de vrouwen is kleurenblind. Rood-groene combinaties zijn bijzonder problematisch.
Toegankelijke themawisselaar
Slecht voorbeeld
Pagina-inhoud
Deze tekst verandert van kleur volgens het thema.
Informatiekaart
Belangrijke informatie om te lezen.
Goed voorbeeld
Pagina-inhoud
Deze tekst behoudt goed contrast in alle thema's.
Informatiekaart
Belangrijke informatie altijd leesbaar.
Uitleg: Een themawisselaar moet contrastverhoudingen behouden, leesbaarheid behouden en de systeemvoorkeuren van de gebruiker respecteren.
Links - Onderstreping en identificatie
Slecht voorbeeld
Links alleen gebaseerd op kleur
Webtoegankelijkheid is essentieel voor het creëren van inclusieve sites. Meer informatie over toegankelijkheid kan je helpen best practices te begrijpen. De WCAG-richtlijnen bieden een uitgebreid kader voor het verbeteren van toegankelijkheid.
Bezoek onze bronpagina om tools en tutorials te vinden.
Goed voorbeeld
Links alleen gebaseerd op kleur
Webtoegankelijkheid is essentieel voor het creëren van inclusieve sites. Meer informatie over toegankelijkheid kan je helpen best practices te begrijpen. De WCAG-richtlijnen bieden een uitgebreid kader voor het verbeteren van toegankelijkheid.
Bezoek onze bronpagina om tools en tutorials te vinden.
Uitleg: Links moeten identificeerbaar zijn zonder uitsluitend te vertrouwen op kleur. Onderstreping, patroonverschillen of andere visuele indicatoren zijn essentieel.