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.
NootDit succescriterium richt zich specifiek op kleurperceptie. Andere vormen van perceptie worden behandeld in Richtlijn 1.3 inclusief softwarematige toegang tot kleur en andere codering van visuele presentatie.
Gebruik van kleur begrijpen (Engelstalig)
Gebruik kleur niet als enige visuele middel 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
- verplichte velden en velden met een fout in een formulier
Dit criterium gaat over mensen die wel zien, maar kleuren niet allemaal op dezelfde manier zien. Mensen die kleurenblind zijn, mensen die slechtziend zijn en veel oudere mensen onderscheiden kleuren minder goed. Ook op een beeldscherm dat weinig kleuren of misschien alleen grijstinten toont, valt kleurinformatie weg. Zorg daarom dat belangrijke informatie ook zichtbaar is zonder kleur. Voeg bijvoorbeeld tekst, een icoon, een patroon of een vorm toe. (Informatie die alleen een schermlezer voorleest, is niet genoeg!)
Hoe pas je dit toe?
- Geef links in een lopende tekst een onderstreping. Kan dat niet? Zorg dan dat de contrastverhouding tussen de linkkleur en de tekst eromheen minstens 3:1 is.
- Markeer verplichte velden en velden met een fout ook met tekst of een icoon, niet alleen met een rode kleur of rand.
- Geef informatie in grafieken, kaarten en tabellen ook een label, patroon of icoon.
- Laat de toestand van een bedieningselement ook zien met iets anders dan kleur, zoals een rand, onderstreping of vinkje. Denk aan een geselecteerd tabblad of de huidige pagina in het menu.
Voor wie is dit belangrijk?
- Mensen die een visuele beperking hebben.
Wie is verantwoordelijk?
Hoe toets je dit?
Benodigdheden
- Een contrast analyser, zoals Colour Contrast Analyser (CCA)
Testprocedure
Test 1: Gebruik van kleuren
- Verken de pagina met muis en toetsenbord
- Bekijk elk bedieningselement eerst zonder focus
- Navigeer met Tab om focustoestanden te activeren
- Activeer met de muis tabbladen, filters, schakelknoppen en andere bedieningselementen met een toestand
- Bepaal welke onderdelen kleur gebruiken om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden:
- Links in een lopende tekst
- Verplichte velden in een formulier
- Velden met een fout
- Gemarkeerde teksten
- Kleurcodes in tabellen en overzichten
- Statusaanduidingen (bijvoorbeeld gekleurde bolletjes of balken)
- Onderdelen in grafieken en diagrammen
- Onderdelen op kaarten
- Afbeeldingen
- Focusindicatoren
- De huidige pagina in een menu
- Geselecteerde tabbladen, filters of knoppen
- Aan- en uitgezette bedieningselementen
- Controleer voor elk onderdeel:
- Of de informatie ook wordt overgebracht met een zichtbaar kenmerk naast kleur:
- Tekst (bijvoorbeeld “Verplicht”, “Fout”, “Geselecteerd”)
- Een icoon of symbool (bijvoorbeeld *, ✓, !)
- Een onderstreping, vet of cursief
- Een patroon
- Een vorm of rand
- Een label direct bij de data
- Bij een link in een lopende tekst:
- Of het kenmerk zichtbaar is zonder hover en zonder focus
- Bij een verplicht veld of een veld met een fout:
- Of het kenmerk tekst of een icoon is
- Of de informatie ook wordt overgebracht met een zichtbaar kenmerk naast kleur:
- Meet het contrast van elk onderdeel dat de informatie alleen met kleur overbrengt
- Open Colour Contrast Analyser
- Kies de kleuren met de pipet:
- Bij een link in een lopende tekst: de linktekst en de omringende tekst
- Bij een focusindicator: het element met focus en hetzelfde element zonder focus
- Bij een toestand: het element in de ene toestand en in de andere toestand
- Bij een grafiek, diagram of kaart: alle kleuren die van elkaar onderscheiden moeten worden
- Bij een afbeelding: twee onderdelen die van elkaar te onderscheiden moeten zijn
- Bij een kleurcode in een tabel of overzicht: twee kleurcodes met een andere betekenis
- Bij elk ander onderdeel: de kleur van het onderdeel en de kleur waarvan het onderscheiden moet worden
- Controleer voor elk onderdeel dat de informatie alleen met kleur overbrengt:
- Of de contrastverhouding tussen de twee gemeten kleuren minstens 3:1 is
- Of de betekenis vast te stellen is zonder een specifieke kleur te herkennen
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!
- Een kenmerk dat pas verschijnt bij focus telt niet mee. Dat geldt ook voor tekst die pas in een tooltip verschijnt.
Beoordeling
Algemeen
- Voor alle onderdelen waar kleur informatie overbrengt, een actie aangeeft, tot een reactie oproept of een visueel element onderscheidt, moet minstens één van de volgende zaken gelden:
- Het onderdeel is herkenbaar aan een zichtbaar kenmerk naast kleur
- De contrastverhouding tussen de kleuren die de onderdelen van elkaar onderscheiden is minstens 3:1 en de betekenis hangt niet af van het herkennen van een specifieke kleur
Formulieren
- Bij een verplicht veld dat met kleur is gemarkeerd, moet uit tekst of een icoon blijken dat het veld verplicht is
- Bij een veld met een fout dat met kleur is gemarkeerd, moet uit tekst of een icoon blijken dat het veld een fout bevat
Links
- Voor alle links in een lopende tekst die een andere kleur hebben dan de omringende tekst, moet minstens één van de volgende zaken gelden:
- De link is zonder hover en zonder focus herkenbaar aan een zichtbaar kenmerk naast kleur
- De contrastverhouding tussen de link en de omringende tekst is minstens 3:1
Focusindicatoren
- Voor alle focusindicatoren moet minstens één van de volgende zaken gelden:
- De focusindicator is herkenbaar aan een zichtbaar kenmerk naast kleur
- De contrastverhouding tussen de gefocuste en de ongefocuste toestand is minstens 3:1
Toestanden van bedieningselementen
- Voor alle toestanden van bedieningselementen die met kleur worden aangegeven, moet minstens één van de volgende zaken gelden:
- De toestand is herkenbaar aan een zichtbaar kenmerk naast kleur
- De contrastverhouding tussen de verschillende toestanden is minstens 3:1 en de betekenis hangt niet af van het herkennen van een specifieke kleur
Grafieken en diagrammen
- Voor alle onderdelen in een grafiek of diagram moet minstens één van de volgende zaken gelden:
- Het onderdeel is herkenbaar aan een zichtbaar kenmerk naast kleur
- De contrastverhouding tussen alle kleuren die van elkaar onderscheiden moeten worden is minstens 3:1 en de betekenis hangt niet af van het herkennen van een specifieke kleur
Kaarten
- Voor alle onderdelen op een kaart moet minstens één van de volgende zaken gelden:
- Het onderdeel is herkenbaar aan een zichtbaar kenmerk naast kleur
- De contrastverhouding tussen alle kleuren die van elkaar onderscheiden moeten worden is minstens 3:1 en de betekenis hangt niet af van het herkennen van een specifieke kleur