Kleur mag niet het enige signaal zijn

Een formulier wordt verstuurd en komt terug. Twee velden hebben nu een rode rand. Verder staat er niets. Voor de meeste bezoekers is duidelijk dat daar iets mis is. Voor iemand met een rood-groenkleurenzwakte zien die randen er ongeveer hetzelfde uit als de grijze randen van de andere velden. Die bezoeker drukt nog een keer op verzenden, en nog een keer. Dit is het probleem van kleur als enige informatie: de boodschap is er wel, maar niet voor iedereen.

Wat WCAG vraagt

Succescriterium 1.4.1 van WCAG, “gebruik van kleur”, is een van de criteria op het basisniveau A. De regel: kleur mag niet het enige visuele middel zijn om informatie over te brengen, een actie aan te geven, om een reactie te vragen of om onderdelen van elkaar te onderscheiden.

Belangrijk om te zien: kleur gebruiken is helemaal niet verboden. Een rode foutmelding is prima. Het moet alleen niet het enige zijn. Er moet een tweede signaal bij, zoals tekst, een icoon, een patroon, onderstreping of een vorm.

Dit criterium staat los van contrast. Een kleur kan prima contrast hebben en toch het enige signaal zijn. Andersom lost goed contrast dit probleem niet op.

Voor wie is dit een probleem?

• Mensen met een kleurenzwakte. Vooral rood en groen worden door een deel van de bevolking, en veel vaker door mannen dan door vrouwen, slecht onderscheiden.
• Slechtziende bezoekers die met hoog contrast of in grijstinten werken.
• Blinde bezoekers met een screenreader. Die hoort geen kleur.
• Iedereen in slecht licht, op een goedkoop scherm of buiten in de zon.
• Wie de pagina in zwart-wit afdrukt.

Vier plekken waar het vaak misgaat

1. Formulieren

Een rode rand of rode achtergrond als enige foutmelding. Een groen vinkje als enige bevestiging. Verplichte velden die alleen een andere kleur label hebben.

De oplossing is een tekst bij het veld die zegt wat er mis is, eventueel met een icoon. Dat helpt meteen ook screenreadergebruikers, als de tekst goed aan het veld is gekoppeld.

<label for="email">E-mailadres</label>
<input id="email" type="email" aria-invalid="true"
       aria-describedby="email-fout">
<p id="email-fout">Fout: vul een e-mailadres in, zoals naam@voorbeeld.nl</p>

Hoe u zulke meldingen schrijft en waar ze moeten staan, leest u in foutmeldingen die mensen echt helpen.

2. Links in lopende tekst

Een link die alleen een andere kleur heeft dan de tekst eromheen, zonder onderstreping, valt voor een deel van de lezers niet op. WCAG laat een uitzondering toe als het kleurcontrast tussen link en omringende tekst minstens 3:1 is én de link bij aanwijzen of focus een extra signaal krijgt. In de praktijk is dat lastig te halen samen met voldoende contrast tegen de achtergrond. De eenvoudigste oplossing: onderstreep links in lopende tekst gewoon.

.entry-content a {
  text-decoration: underline;
}

In menu’s en knoppen is dat niet nodig, omdat daar uit de plek en de vorm al blijkt dat het om een link gaat. Wat een goede linktekst is, staat in linkteksten die zeggen waar ze heen gaan.

3. Statussen en beschikbaarheid

Een groen of rood bolletje voor “op voorraad” en “uitverkocht”. Een agenda waarin vrije plekken groen zijn en volle plekken rood. Een tabel met gekleurde vakjes zonder legenda in tekst.

Zet er het woord bij: “Op voorraad”, “Uitverkocht”, “Vol”. Of gebruik naast de kleur een duidelijk verschillende vorm, zoals een vinkje en een kruis.

4. Grafieken en diagrammen

Een lijngrafiek met vier lijnen in vier kleuren, met de legenda los ernaast. Een taartdiagram met zes tinten blauw. Hier helpt een combinatie:

• Labels direct bij de lijn of het segment, in plaats van alleen een legenda.
• Verschillende lijnstijlen (doorgetrokken, gestippeld) of markeringen (rondje, vierkant).
• Patronen in vlakken.
• De cijfers ook in een tabel of tekst eronder.

5. Kleurkeuze in een webshop

Een bijzonder geval: kleurstalen bij een product. Een shirt in vijf kleuren, getoond als vijf gekleurde rondjes. Hier is de kleur zelf de informatie, dus u kunt hem niet weglaten. Wel kunt u de naam erbij geven: zichtbaar onder het rondje, of in elk geval als naam van de knop voor screenreaders, zoals “Kleur: olijfgroen”. Laat ook de gekozen kleur niet alleen zien met een dunne gekleurde rand, maar bijvoorbeeld met een vinkje of een dikkere rand plus de naam van de keuze naast de knop “In winkelwagen”. WooCommerce-thema’s en plugins voor variatiestalen verschillen hier sterk in; controleer wat er bij u op de pagina komt.

Zo controleert u uw eigen site

1. Zet uw scherm in grijstinten. In Windows kan dat via de kleurfilters in de toegankelijkheidsinstellingen, op een Mac via de weergave-instellingen bij Toegankelijkheid. Loop uw site door. Is er iets waarvan u nu niet meer weet wat het betekent?
2. Verstuur een formulier met fouten. Staat er bij elk fout veld een tekst, of alleen een kleur?
3. Kijk naar links in lopende tekst. Zijn ze onderstreept of op een andere manier dan met kleur herkenbaar?
4. Bekijk grafieken, statussen en agenda’s. Is er naast kleur een woord, vorm of patroon?
5. Gebruik de kleurenblindheidssimulatie in de ontwikkelaarstools van Chrome (via het menu Rendering, “Emulate vision deficiencies”). Daarmee ziet u ongeveer hoe de pagina eruitziet bij verschillende vormen van kleurenzwakte.

Dit kost voor een gemiddelde site niet veel tijd, en het levert meestal een kort lijstje op dat goed te verhelpen is.

Uw huisstijl hoeft niet om

Ondernemers schrikken soms van dit criterium, omdat ze denken dat hun kleuren eruit moeten. Dat is niet zo. U voegt alleen iets toe: een woord, een icoon, een streep onder een link. Uw huisstijl blijft overeind. Wel is het verstandig om tegelijk naar het contrast van uw kleuren te kijken, want dat is een aparte eis die vaak samen met deze opduikt. Op kleurcontrast verbeteren leest u hoe u dat aanpakt zonder uw huisstijl los te laten.

Kleur is een van de vele onderdelen van een toegankelijke site. Het volledige overzicht staat op uw website toegankelijk laten maken.