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 minstens één van de volgende waar is:
- 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
- Of de informatie ook in tekst elders op de pagina staat (bijvoorbeeld in een kruimelpad of in een kop met de naam van de huidige pagina)
- Of de informatie ook wordt overgebracht met een zichtbaar kenmerk naast kleur:
- Controleer voor elk onderdeel dat slaagt op stap 2:
- Of het kenmerk of de tekst tegelijk met de kleur zichtbaar is
- Bij een link in een lopende tekst:
- Of het kenmerk zichtbaar is zonder hover en zonder focus
- Meet het contrast van elk onderdeel dat niet slaagt op stap 2 of 3
- 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 gemeten onderdeel:
- Of de contrastverhouding tussen elk paar 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 of tekst die pas verschijnt bij hover, bij focus of in een tooltip, telt niet mee. (Dat geldt niet voor een focusindicator: die hoort bij de focustoestand zelf.)
- Een legenda telt niet als tekst bij een onderdeel. Wie de legenda gebruikt, moet de kleuren nog steeds herkennen.
- Een link die er exact hetzelfde uitziet als de omringende tekst valt buiten dit succescriterium.
Beoordeling
- 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, dat tegelijk met de kleur zichtbaar is
- De informatie die de kleur overbrengt, staat ook in tekst die tegelijk met de kleur zichtbaar is
- 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
- 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
- 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 niet-gefocuste toestand is minstens 3:1