Kleur als enige manier

Een verkeerd ingevuld veld krijgt een rode rand. De knop om te bevestigen is groen, de knop om te annuleren rood. Voor jou ziet dat er duidelijk uit. Maar wie kleuren niet goed kan onderscheiden, mist de boodschap als de kleur wegvalt.

In dit artikel leg ik uit wanneer kleurgebruik een toegankelijkheidsprobleem wordt en hoe je dat oplost. Dit valt onder succescriterium 1.4.1 Gebruik van kleur van WCAG 2.2 op niveau A.

Wat het criterium zegt

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.

Je mag dus altijd kleur gebruiken, op één voorwaarde: dat kleur niet de enige manier is. Het criterium dekt vier situaties:

• kleur die informatie overbrengt
• kleur die een actie aangeeft
• kleur die je tot iets aanzet
• kleur die het ene element van het andere onderscheidt

Als je iets aangeeft met een kleur, dan hoort er een tweede manier bij. Denk aan tekst, een icoon, een onderstreping of een patroon. Zo begrijpt ook iemand die rood en groen niet goed onderscheidt de boodschap.

Het criterium geldt alleen als kleur gebruikt wordt om iets over te brengen. Een link die er precies hetzelfde uitziet als de omringende tekst valt hier niet onder.

Kleur versus helderheid

Kleur is niet alleen tint (hue), maar ook helderheid (luminantie). Verschillen twee kleuren duidelijk in helderheid, dan telt dat verschil mee als tweede manier. De eis is dan dat het contrast tussen de twee kleuren minstens 3:1 is.

Lichtgroen en donkerrood verschillen in tint én in helderheid. Bij 3:1 contrast of meer voldoe je dus aan het criterium, ook zonder icoon of tekstlabel.

Als bezoekers een specifieke kleur moeten herkennen, dan is een tweede manier altijd verplicht. Bijvoorbeeld bij een rand die groen is bij geldige invoer en rood is bij een foute invoer.

Voor wie geldt dit criterium?

Ongeveer 1 op de 12 mannen en 1 op de 200 vrouwen heeft een vorm van kleurenblindheid. Mensen met slechtziendheid zien kleuren mogelijk ook minder goed. En ouderen zijn ook gevoeliger voor contrastproblemen.

Dit criterium gaat over een zichtbaar alternatief naast kleur. Het richt zich op ziende mensen die kleuren niet of niet goed onderscheiden. Een tekstalternatief dat alleen wordt aangekondigd door een schermlezer, is dus niet genoeg om aan 1.4.1 te voldoen.

Links in lopende tekst

Een link in een tekst herken je normaal gesproken door een afwijkende kleur én onderstreping. Sommige vormgevers halen de onderstreping weg, maar dan wordt kleur ineens het enige visuele verschil tussen een link en de tekst.

De simpelste oplossing is links onderstreept laten. Dat herkennen de meeste bezoekers meteen en is ook het meest robuust.

Links zonder onderstreping zijn wel toegestaan, maar ook dan moet de linkkleur minstens 3:1 contrast hebben met de omringende tekst. Daarbij moet dan bij hover en focus wél een tweede manier verschijnen, zoals een onderstreping. Dit geldt bovenop de normale contrasteisen voor tekst van 1.4.3 Contrast (minimum).

Bij links in een menu of navigatiebalk maakt de locatie al duidelijk dat het om links gaat. Een tweede manier is daar niet verplicht, als de link zelf maar voldoende contrast heeft. Deze nuance geldt alleen voor locaties waar de bezoeker links verwacht.

Er is één officiële uitzondering: bezochte links. Het kleurverschil tussen bezochte en niet-bezochte links mag wel kleiner zijn dan 3:1, als beide varianten maar genoeg contrast hebben tegen de achtergrond.

Foutmeldingen en verplichte velden markeren

Veel formulieren leunen op kleur. Een veld kleurt rood als je iets verkeerd invult, of een verplicht veld is alleen te herkennen aan zijn kleur. Wie die kleur niet goed ziet, weet dan niet waar de fout zit of welk veld verplicht is.

Foutmeldingen

Een veelgemaakte fout is een veld dat alleen rood kleurt bij een fout. Iemand met een rood-groen kleurafwijking ziet dat niet. Een foutmelding in tekst is de oplossing. Het liefst zo dicht mogelijk bij het veld met de fout.

Verplichte velden

Een veld dat alleen met een kleur als verplicht wordt aangegeven, valt weg voor iemand die de kleur niet ziet. Voeg daarom een tweede manier toe. Zet bijvoorbeeld een sterretje (*) of het woord “verplicht” bij het label. Leg ook uit wat het teken betekent, bijvoorbeeld met “Velden met een sterretje (*) zijn verplicht”.

Lees meer over toegankelijke formulieren

Toestandsveranderingen

Kleur duidt vaak een toestand van een bedieningselement aan: een schuifschakelaar wordt blauw als hij aanstaat. Een tabblad krijgt een andere kleur als het actief is. Een badge wordt groen bij “goedgekeurd”. Deze patronen zie je op veel websites terugkomen.

Het principe geldt voor elke toestand die je alleen met kleur aanduidt. Denk aan hover, focus, uitgeschakeld, aangevinkt, ingedrukt, geselecteerd, actief of uitgevouwen. Als de kleurverandering het enige verschil is, valt de informatie weg voor bezoekers die kleuren niet goed onderscheiden.

De oplossing is steeds hetzelfde: voeg een tweede zichtbare manier toe naast de kleur. Een paar voorbeelden:

• Een bevestigknop heeft naast de groene kleur ook de tekst “Bevestigen”, en een annuleerknop de tekst “Annuleren”.
• Een actief tabblad in een tabpaneel is ook vetgedrukt of krijgt een streepje eronder.
• Een aangevinkt selectievakje toont een vinkje.
• Een uitgevouwen accordeon draait een pijltje.
• Een ingedrukte knop krijgt een schaduw of een rand.
• Een status staat letterlijk uitgeschreven: “✓ Betaald”, “⚠ In behandeling”, “✗ Afgekeurd”.

Grafieken en diagrammen

Een grafiek met gekleurde lijnen en een legenda ziet er overzichtelijk uit, maar werkt niet in grijstinten. Als je de lijnen niet uit elkaar kunt houden, mis je de hele boodschap.

Een paar oplossingen:

• Geef lijnen ook verschillende stijlen, zoals gestippeld of gestreept.
• Geef datapunten ook verschillende vormen, zoals een rondje, driehoek of vierkantje.
• Geef vlakken (staaf, taartpunt, segment, enz.) ook verschillende patronen, zoals gestippeld of gestreept.
• Plaats ook de volledige datatabel onder de grafiek.

Voor kaarten geldt hetzelfde: draagt de kleur de betekenis over, zet dan die betekenis er zichtbaar bij. Geef gebieden een patroon of een label, of zet de uitleg in tekst ernaast. Bijvoorbeeld: “Hoofdstraat en Marktplein afgesloten, Kerkstraat langzaam verkeer, overige straten zijn open.”

Dit is ook relevant voor infographics, foto’s en andere niet-tekstuele content waar kleur betekenis overdraagt.

Kleur benoemen in tekst

Instructies mogen niet alleen naar een kleur verwijzen. De instructie “Klik op de groene knop om verder te gaan” werkt niet als iemand groen niet goed kan zien. Maak daarom het label van het element leidend: “Klik op de knop Verder”. Kleur mag erbij staan als extra houvast, maar nooit als enige aanwijzing.

Dit raakt ook succescriterium 1.3.3 Zintuiglijke eigenschappen, dat verwijzingen op kleur, vorm, grootte en positie verbiedt.

Vereisten en aanbevelingen voor toegankelijk kleurgebruik

Dit zijn de vereisten en aanbevelingen voor het gebruik van kleur op je website.

WCAG-vereisten

• Gebruik kleur niet als enige manier om informatie over te brengen, een actie aan te geven of een element te onderscheiden.
  • Links in een lopende tekst zijn herkenbaar door meer dan alleen kleur. Als ze toch alleen op kleur verschillen, dan hebben ze minstens 3:1 contrast met de omliggende tekst én een tweede manier bij hover en focus.
  • Focusindicator gebruikt meer dan alleen kleurverschil.
  • Toestandsveranderingen zijn herkenbaar door meer dan alleen kleur.
  • Verplichte velden en foutmeldingen zijn herkenbaar door meer dan alleen kleur.

Aanbevolen

• Combineer kleur met tekst, een icoon, een patroon of een duidelijk lichtverschil (minstens 3:1 contrast).
• Kies universele iconen naast kleur: vinkje, kruisje, uitroepteken.
• Schrijf statussen voluit als de ruimte dat toelaat.

Om te onthouden

Kleur als enige manier is een van de meest voorkomende toegankelijkheidsfouten. Het treft mensen met kleurenblindheid en slechtziendheid. En het is makkelijk te voorkomen: voeg altijd een tweede manier toe naast de kleur.

Gerelateerde succescriteria

Dit artikel behandelt het volgende WCAG-succescriterium: 1.4.1 Gebruik van kleur (niveau A).

Het raakt ook aan:

• 1.3.3 Zintuiglijke eigenschappen (niveau A)
• 1.4.3 Contrast (minimum) (niveau AA)
• 1.4.11 Contrast van niet-tekstuele content (niveau AA)