KWEETET / PRAKTISCHE KENNIS
Kleur en contrast goed toepassen
Kleur kan helpen om informatie te ordenen. Zorg tegelijk dat tekst leesbaar blijft en dat de betekenis niet alleen van kleur afhangt.
Meet tekstcontrast
Voor WCAG AA geldt voor gewone tekst doorgaans minimaal 4,5:1. Voor grote tekst is dat 3:1: vanaf 18 pt, of 14 pt bij vetgedrukte tekst.
Om mee te nemen
Meet de echte voor- en achtergrondkleur; schat het contrast niet op het oog.
Kijk verder dan tekst
Voor visuele informatie die nodig is om bediening of betekenisvolle grafische onderdelen te herkennen, geldt onder WCAG 1.4.11 doorgaans 3:1 ten opzichte van aangrenzende kleuren.
Om mee te nemen
Niet iedere decoratieve rand hoeft contrast te hebben; de functie van het onderdeel is bepalend.
Voeg een tweede aanwijzing toe
Combineer kleur met een label, symbool, patroon of lijnstijl. Maak links en toestanden herkenbaar zonder alleen kleur te gebruiken.
Om mee te nemen
Een foutmelding moet ook in woorden vertellen wat er misgaat.
Controleer alle toestanden
Bekijk standaardweergave, hover, focus, selectie en foutmeldingen. Test tekst op afbeeldingen ook op lichte en donkere delen.
Om mee te nemen
Een palet is niet als geheel toegankelijk: iedere gebruikte combinatie telt.
IN DE PRAKTIJK
Oranje in de Kweetet-huisstijl
Donkerblauw (#002855) op oranje (#F59E0B) heeft een contrast van ongeveer 6,82:1. Wit op datzelfde oranje komt uit op ongeveer 2,15:1 en is daarmee niet geschikt voor gewone tekst. De toepassing maakt het verschil.
Donkerblauw op oranje · 6,82:1
Wit op violet · 5,54:1
Wit op turquoise · 5,16:1
ZELF NALOPEN
Neem dit mee in je controle.
- Meet de gebruikte kleurparen.
- Controleer ook knoppen, focus en grafieken.
- Geef kleurcoderingen tekstuele betekenis.
- Controleer opnieuw na ontwerpwijzigingen.
Deze aandachtspunten helpen je op weg. Ze vervangen geen volledige beoordeling van je website of document.
Verder lezen
VAN KENNIS NAAR TOEPASSING
Hulp bij
jouw vraag?
Wil je deze aandachtspunten toepassen op je eigen website, document of werkwijze? Ik denk met je mee.