1.4.1 Gebruik van kleur

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 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
foutmeldingen in een formulier

Mensen met een visuele beperking kunnen informatie die alleen met kleur wordt 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 of elementen visueel te onderscheiden.
Onderscheid links niet alleen met kleur, tenzij het contrast met de omliggende tekst minimaal 3:1 is én er bij hover en focus een extra signaal is, zoals een onderstreping.
Geef foutmeldingen in formulieren ook een icoon of tekstlabel, niet alleen een rode kleur of rand.
Geef informatie in grafieken en tabellen ook een label of patroon, niet alleen een kleurcode.

Voor wie is dit belangrijk?

Mensen die een schermlezer gebruiken.
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
- 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, een actie aangeeft, tot een reactie oproept of een visueel element onderscheidt:
  - Onderdelen in een grafiek of diagram
  - Status van knoppen of bedieningselementen
  - Foutmeldingen in een formulier
  - Verplichte velden in een formulier
  - Links in een lopende tekst
  - Gemarkeerde teksten
  - Focusindicatoren
  - Afbeeldingen
  - Kaarten
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)
Meet het contrast voor elk element dat alleen kleur gebruikt:
- Open Colour Contrast Analyzer
  - Bepaal de voorgrondkleur met een pipet
  - Bepaal de aangrenzende kleur met een pipet
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
  - Of de link bij hover een extra visuele aanduiding krijgt, zoals onderstreping
  - Of de link bij focus een extra visuele aanduiding krijgt, zoals onderstreping
- 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 foutmeldingen en verplichte velden in een formulier:
  - Of de fout of de verplichting ook zonder kleur herkenbaar is (tekst, icoon of symbool)
- Bij grafieken en diagrammen:
  - Of het kleurcontrast tussen aangrenzende onderdelen minimaal 3:1 is
- Bij kaarten:
  - Of het kleurcontrast tussen aangrenzende onderdelen minimaal 3:1 is

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

Focusindicatoren

Voor alle focusindicatoren moet minstens één van de volgende zaken gelden:
- De focusindicator is herkenbaar door meer dan alleen kleur
- De kleurverandering tussen de gefocuste en ongefocuste toestand is minstens 3:1

Toestandsveranderingen

Voor alle toestandsveranderingen van bedieningselementen moet minstens één van de volgende zaken gelden:
- De toestandsverandering is herkenbaar door meer dan alleen kleur
- De kleurverandering tussen de verschillende toestanden is minstens 3:1

Grafieken en diagrammen

Voor alle onderdelen in een grafiek of diagram moet minstens één van de volgende zaken gelden:
- Het onderdeel is herkenbaar door meer dan alleen kleur
- Het kleurcontrast tussen aangrenzende onderdelen is minstens 3:1

Kaarten

Voor alle onderdelen in kaarten moet minstens één van de volgende zaken gelden:
- Het onderdeel is herkenbaar door meer dan alleen kleur
- Het kleurcontrast tussen aangrenzende onderdelen is minstens 3:1

Bronnen

Andere richtlijnen

Richtlijnen voor toegankelijkheid van webcontent