Ga naar hoofdinhoud

WCAG

WCAG-succescriterium 1.4.1 Gebruik van kleur

Niveau A

Uitleg

Zorg ervoor dat kleur niet het enige visuele middel is om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden. Niet iedereen kan kleuren zien of verandering in kleur of kleurcontrast opmerken.

Bijvoorbeeld: geef een foutmelding niet alleen aan met een rood randje, maar ook in tekst en eventueel met een icoontje dat een foutmelding markeert.

Gerelateerde NL Design System-richtlijnen

Hoe te testen

Bekijk de pagina en controleer of er betekenis aan kleur is gegeven.

Let bijvoorbeeld op:

  • het aangeven van foutmeldingen bij formulieren, alleen een rood randje is niet voldoende;
  • de weergave van data in grafieken;
  • de weergave van links in de tekst, deze moet liefst onderstreept zijn;
  • het aangeven van een status (succes, waarschuwing, fout) in een statusmelding, alleen een groene, gele of rode achtergons is onvoldoende, er moet ook in tekst saat wat de status is;
  • verwijzingen naar kleur in de tekst, druk op de groene knop om door te gaan is voor blinde en kleurenblinde bezoekers een probleem.

Het is voldoende als de informatie ergens anders op de pagina makkelijk vindbaar is en goed wordt uitgelegd, of als de betekenis volgt uit het gebruik of plek van een element. Een link in een menu hoeft bijvoorbeeld niet onderstreept te zijn.

Het kan helpen met testen om de pagina met een grijsfilter te bekijken, zodat alle kleur verdwijnt. Is de inhoud van nog steeds te begrijpen.

Grijsfilters:

Ook via de browser kun je de kleur uit een pagina verwijderen:

  • Voor FireFox: Open de inspector, kies de "Accessibility"-tab en selecteer bij Simulate Achromatopsia.
  • Voor Chrome: Open de inspector, selecteer het console, klik op de drie puntjes aan de linkerkant, kies Rendering en selecteer helemaal onderaan bij Emulate vision deficiencies "Achromatopsia".

Veelgemaakte fouten

Aangeven van een fout met alleen een rood randje

Een rood randje rondom een formulierveld dat verplicht is, maar niet is ingevuld, geeft onvoldoende informatie. Gebruikers die kleurenblind zijn kunnen deze informatie missen. Schrijf daarom ook altijd een duidelijke foutmelding uit in tekst bij een formulierveld.

Meer informatie over foutmeldingen aangeven in onze blogpost over Toegankelijke foutmeldingen in formulieren [Hoe geef ik aan of een vraag niet of niet goed is ingevuld?]

Weergeven van data in een grafiek door alleen een verschil in kleur te gebruiken

Een veelgemaakte fout is het weergeven van data in een grafiek door alleen een verschil in kleur te gebruiken. Iemand die slechtziend is of kleurenblind, weet dan niet welk lijntje bij welke data hoort.

In de onderstaande afbeelding staan twee grafieken over de populariteit van browsers zien. De grafiek links laat de gegevens van de verschillende browsers zien in gekleurde lijntjes. De weergave rechts is dezelfde grafiek, maar dan in alleen grijstinten, om kleurenblindheid te simuleren. In deze grijze grafiek is het onmogelijk de data goed uit te lezen.

Twee verschillende weergaven van een grafiek over de populariteit van verschillende webbrowsers, een met gekleurde lijntjes en daarnaast dezelfde grafiek in grijstinten.

Hoe moet het dan wel? Gebruik naast kleur ook een andere manier om de data te onderscheiden. Bijvoorbeeld stippeltjes of streepjes.

In onderstaande afbeelding worden de lijntjes weergegeven zodat ze in grijstinten ook goed onderscheidbaar zijn. Twee verschillende weergaven van een grafiek over de populariteit van verschillende webbrowsers, een met gekleurde maar verschillend gestreepte lijntjes en daarnaast dezelfde grafiek in grijstinten.

De data browsergebruik komt van statcounter.com.

Gebruikersonderzoek

Heb je gebruikersonderzoek gedaan dat betrekking heeft op dit succescriterium en wil je dit delen? Kijk eens bij Gebruikersonderzoeken delen op gebruikersonderzoeken.nl.

W3C referenties

Belangrijk: De richtlijnen van NL Design System zijn geen wettelijke verplichting

De richtlijnen van NL Design System zijn niet wettelijk verplicht en zijn geen vervanging voor de wettelijk geldende WCAG 2.1 specificatie.

Ons doel is om praktische uitleg en voorbeelden te geven die helpen bij het toegankelijk inzetten van de NL Design System componenten, patronen en richtlijnen. We doen dat op basis van een interpretatie van de nieuwe WCAG 2.2 specificatie.

Weten waar je volgens de wet aan moet voldoen? Ga dan naar wat is verplicht van DigiToegankelijk.

Help richtlijn verbeteren

Deze pagina's over WCAG worden onderhouden door het NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.