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

Dit criterium gaat over mensen die kleuren zien, maar niet allemaal hetzelfde. Mensen die kleuren anders of niet zien (kleurenblindheid), mensen die slechtziend zijn en veel oudere gebruikers onderscheiden kleuren minder goed. Ook op een beeldscherm dat weinig kleuren of alleen grijstinten toont, valt kleurinformatie weg. Zorg daarom dat je belangrijke informatie op meerdere manieren communiceert. Voeg bijvoorbeeld een icoon, patroon, vorm of tekst toe.

Hoe pas je dit toe?

Gebruik niet alleen kleur om informatie over te dragen of elementen visueel te onderscheiden.
Geef links in een lopende tekst een extra kenmerk naast kleur, bijvoorbeeld een onderstreping. Kan dat niet? Zorg dan dat het contrast tussen de linkkleur en de tekst eromheen minstens 3:1 is.
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.
Geef de toestand van een bedieningselement ook met iets anders aan dan kleur.

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

Inventariseer de pagina
- Bepaal of kleur ergens informatie overdraagt, een actie aangeeft, tot een reactie oproept of een visueel element onderscheidt:
  - Links in een lopende tekst
  - Verplichte velden in een formulier
  - Velden met een fout en foutmeldingen
  - Gemarkeerde teksten
  - Kleurcodes in tabellen en overzichten
  - Statusaanduidingen, zoals gekleurde bolletjes of balken
  - Onderdelen in grafieken en diagrammen
  - Onderdelen op kaarten
  - Afbeeldingen
- Bepaal voor elk onderdeel welke kleuren er tegenover elkaar staan
Verken de pagina met muis en toetsenbord
- Bekijk elk bedieningselement eerst zonder focus
- Navigeer met de Tab-toets om focus-toestanden te activeren
- Bepaal waar kleur een toestand aangeeft:
  - Focusindicatoren
  - De actieve of huidige pagina in een menu
  - Geselecteerde tabs, filters of knoppen
  - Aan- en uitgezette bedieningselementen
Controleer voor elk element dat kleur gebruikt:
- Of de informatie ook wordt overgebracht met een kenmerk naast kleur:
  - Tekst (zoals “Verplicht”, “Fout”, “Geselecteerd”)
  - Een icoon of symbool (zoals *, ✓, !)
  - Een onderstreping, vet of cursief
  - Een patroon
  - Een vorm, rand of positie
  - Een label direct bij de data
- Of dat kenmerk zichtbaar is zonder hover en zonder focus
Meet het kleurcontrast van elk onderdeel dat de informatie alleen met kleur overbrengt:
- Open Colour Contrast Analyzer
- Bepaal de kleuren met een 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 je uit elkaar moet houden
  - Bij een kleurcode in een tabel of overzicht: twee kleurcodes met een andere betekenis
Controleer voor elk onderdeel dat de informatie alleen met kleur overbrengt:
- Of de contrastverhouding tussen de twee gemeten kleuren minstens 3:1 is
- Of je de betekenis kan vaststellen 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 door meer dan alleen kleur
- De contrastverhouding tussen de kleuren die de onderdelen van elkaar onderscheiden is minstens 3:1

Formulieren

Bij een verplicht veld moet uit tekst of een icoon blijken dat het veld verplicht is
Bij een veld met een fout moet uit tekst of een icoon blijken dat het veld een fout bevat

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 alle kleuren die van elkaar onderscheiden moeten worden 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 alle kleuren die van elkaar onderscheiden moeten worden is minstens 3:1

Bronnen

Andere richtlijnen

Richtlijnen voor toegankelijkheid van webcontent