Succescriterium 1.4.1 Gebruik van kleur
Kleur wordt niet als het enige visuele middel gebruikt om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden.
Gebruik van kleur begrijpen (Engelstalig)
Gebruik kleur niet als enige manier om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden. Denk hierbij bijvoorbeeld aan:
- Informatie in een grafiek of tabel
- Links in tekst
- Foutmeldingen in een formulier
Mensen met een visuele beperking kunnen informatie die alleen met kleur worden aangegeven niet (of niet goed) onderscheiden. Zorg daarom dat je belangrijke informatie op meerdere manieren communiceert. Voeg bijvoorbeeld ook een icoon toe of zet er een duidelijke tekst bij.
Hoe pas je dit toe?
- Gebruik niet alleen kleur om informatie over te dragen.
- Gebruik niet alleen kleur om een actie aan te geven.
- Gebruik niet alleen kleur om tot een reactie op te roepen.
- Gebruik niet alleen kleur om een visueel element te onderscheiden.
Voor wie is dit belangrijk?
- Mensen die een schermlezer gebruiken.
- Mensen die een visuele beperking hebben.
Wie is verantwoordelijk?
- Redacteur
- Vormgever
Hoe toets je dit?
Benodigdheden
- Een contrast analyser, zoals Colour Contrast Analyser (CCA)
Testprocedure
Test 1: Kleur
- Verken de pagina met muis en toetsenbord
- Beweeg met de muis over elementen om hover-toestanden te activeren
- Navigeer met de Tab-toets om focus-toestanden te activeren
- Bepaal of kleur ergens informatie overdraagt of elementen onderscheidt:
- Onderdelen in een grafiek of diagram
- Status van knoppen of bedieningselementen
- Foutmeldingen in een formulier
- Links in een lopende tekst
- Gemarkeerde teksten
- Focusindicatoren
- Controleer voor elk element dat kleur gebruikt:
- Of de informatie ook op een andere manier wordt overgebracht
- Tekst (zoals “Verplicht”, “Fout”, “Geselecteerd”)
- Symbolen of iconen (zoals *, ✓, !)
- Onderstreping, vet of cursief
- Patronen
- Positionering
- Vorm of rand
- Labels direct bij de data (in grafieken en diagrammen)
- Of de informatie ook op een andere manier wordt overgebracht
- Meet het contrast voor elk element dat alleen kleur gebruikt:
- Open Contrast Analyzer
- Bepaal de voorgrondkleur met een pipet
- Bepaal de aangrenzende kleur met een pipet
- Open Contrast Analyzer
- Controleer voor elk element dat alleen kleur gebruikt:
- Bij links in een lopende tekst:
- Of het contrast tussen de link en de omringende tekst minimaal 3:1 is
- Bij focusindicatoren:
- Of de kleurverandering tussen de gefocuste en ongefocuste toestand minimaal 3:1 is
- Bij kleurveranderingen om de toestanden van een bedieningselement aan te geven:
- Of de kleurverandering tussen de verschillende toestanden minimaal 3:1 is
- Bij grafieken en diagrammen:
- Of het contrast tussen aangrenzende onderdelen minimaal 3:1 is
- Bij links in een lopende tekst:
Belangrijk om te weten
- Als de kleuren zelf een betekenis hebben (groen = goed, rood = fout), is een contrast van 3:1 tussen die kleuren niet voldoende. Er moet dan een extra indicator zijn!
Beoordeling
Algemeen
- Kleur moet niet als enige manier worden gebruikt om:
- Informatie over te brengen
- Een actie aan te geven
- Tot een reactie op te roepen
- Een visueel element te onderscheiden
Links
- Links in een lopende tekst moeten herkenbaar zijn door meer dan alleen kleur
- Alleen als kleur toch de enige visuele indicator is:
- Het kleurcontrast tussen de link en de omringende tekst moet minimaal 3:1 zijn
- De link moet een extra visuele aanduiding krijgen bij hover en focus (zoals onderstreping)
Focusindicatoren
- Focusindicatoren moeten herkenbaar zijn door meer dan alleen kleur
- Alleen als kleur toch de enige visuele indicator is:
- De kleurverandering tussen de gefocuste en ongefocuste toestand moet minimaal 3:1 zijn
Toestandsveranderingen
- Toestandsveranderingen van bedieningselementen moeten herkenbaar zijn door meer dan alleen kleur
- Alleen als kleur toch de enige visuele indicator is:
- De kleurverandering tussen de verschillende toestanden moet minimaal 3:1 zijn