Niet iedereen neemt kleuren op dezelfde manier waar. Kleurenblindheid, slechtziendheid, een fout afgesteld beeldscherm, zonreflectie op een smartphone, een verouderd beeldscherm,... Dit zijn slechts enkele voorbeelden van zaken die het uitzicht van uw website kunnen veranderen. Daarom is het belangrijk om niet enkel op kleur te rekenen om informatie weer te geven.
Belang van kleur
WCAG 2.0 stelt dat kleur niet de enige manier mag zijn om visueel informatie over te brengen, een actie aan te duiden, een antwoord uit te lokken, of om een element weer te geven. Dit betekent het volgende:
- Kleur mag niet de enige manier zijn om informatie weer te geven. Indien je een webpagina in grijswaarden bekijkt, mag er geen informatie verloren gaan.
- Acties aanduiden mag niet enkel met kleur. Denk bijvoorbeeld aan het corrigeren van fout ingevulde formuliervelden, waarbij het foute veld in rood wordt aangeduid. Voeg verklarende tekst toe.
- Indien je input verwacht van een bezoeker, vraag hier dan expliciet om. Ga niet uit van kleur alleen. Een voorbeeld is een formulier waarin de niet noodzakelijke velden in het lichtgrijs gekleurd zijn.
- Elementen moeten voor elke gebruiker duidelijk zijn. Denk bijvoorbeeld aan knoppen die visueel enkel onderscheiden zijn van hun achtergrond via kleur.
Kleurenblindheid
Ongeveer 8-10% van alle mannen lijdt aan een vorm van kleurenblindheid. Daarom is het beter om deze kleurencombinaties te vermijden:
- Groen/rood
- Groen/bruin
- Blauw/paars
- Groen/blauw
- Lichtgroen/geel
- Blauw/grijs
- Groen/grijs
- Groen/zwart
Veel voorkomende fouten
Bespaar tijd door rekening te houden met dit WCAG criterium wanneer je jouw huisstijl ontwerpt.
- Onderlijn links. Kleur alleen is niet voldoende om een link aan te duiden. Indien onderlijning niet in je huisstijl past, gebruik dan een kleur die minstens een contrastratio van 3:1 heeft tegenover de tekst rondom de link. Voeg een effect toe bij rollover
(a:hover)en tabfocus(a:focus). - Gebruik meer dan een rode kleur om een foutmelding in een formulier weer te geven. Voeg bijvoorbeeld een dikke rand of extra tekst toe.
- Voeg iconen, tekst of patronen toe aan grafieken en diagrammen. Een grafiek die enkel van kleur uitgaat, is niet bruikbaar voor een kleurenblind persoon.
- Beschrijf elementen op een website met meer dan kleur. Een slecht voorbeeld: "Klik op de groene knop om het formulier te verzenden, of op de rode knop om te herbeginnen."
- Gebruik tekstuele instructies wanneer je een actie verwacht van je bezoeker. Duid bijvoorbeeld verplichte formuliervelden aan met een asterisk of het woord "verplicht" toe.
- Wanneer je een negatieve of positieve associatie wil meegeven aan tekst, gebruik dan niet enkel rood en groen. Duid het onderscheid aan via een woordje uitleg.
- Indien je een webwinkel runt, is een productfoto niet voldoende om aan je klanten duidelijk te maken in welke kleuren producten beschikbaar zijn. Verwoord deze ook in de productomschrijving.
- Gebruik meer dan enkel kleur om vrije dagen aan te duiden in een online agenda. Voeg icoontjes of tekstuele uitleg toe.
- Plaats geen tekst over drukke afbeeldingen. Indien noodzakelijk, gebruik dan witte tekst met een zwarte rand, of voeg een (semi-)opaak vlak toe onder de tekst.
Nuttige links
- Colour Contrast Analyser: een gratis tool om kleurcontrast te meten.
- Lijst met linkkleuren: lijst met linkkleuren die kleurenblinden gemakkelijk kunnen onderscheiden tegenover wit en zwart op W3.org.
- Praktische voorbeelden: praktijkvoorbeelden op W3.org.
- Photoshop kleurenblindfilters: hoe kan je de toegankelijkheid van je gekozen kleuren nagaan via ingebouwde functies van Photoshop?
- Colour Scheme Designer: ga na hoe je kleurpaletten er uitzien voor mensen met kleurenblindheid.
Conclusie
Reken niet enkel op kleur om informatie over te brengen. Gebruik voldoende kleurcontrast. Hou hier reeds rekening mee tijdens het opstellen van uw huisstijl om tijd te besparen.
Reacties
Reageer als eerste