Wcag uitgelegd

Grafiek met lijnen die alleen door kleur te onderscheiden zijn

Grafiek met lijnen die alleen door kleur te onderscheiden zijn — WCAG 1.4.1 Gebruik van kleur (post 7/8)

Drie lijnen in een grafiek. Rood, blauw, groen. Browsergebruik over de afgelopen vijf jaar.

In grijstinten: drie grijze lijnen die door elkaar lopen. Welke is Chrome? Welke is Firefox? Onmogelijk te zien.

De legenda helpt niet — die is ook op kleur gebaseerd. Rood vierkantje = Chrome. Blauw vierkantje = Firefox. In grijstinten: grijs vierkantje = ???.

Oplossingen:

  1. Lijnpatronen: doorgetrokken, gestreept, gestippeld
  2. Symbolen op de lijn: rondjes, vierkantjes, driehoeken bij elk datapunt
  3. Directe labels: de naam bij elke lijn, niet alleen in een legenda
  4. Tabel als alternatief: dezelfde data in een tabel eronder

De combinatie van kleur + patroon + directe labels is het meest robuust. Dan werkt het voor iedereen, in elke weergave.

Goed om te weten: dit geldt ook voor staafdiagrammen (naast elkaar staande balken), taartdiagrammen (aangrenzende segmenten) en kaarten (gekleurde gebieden).

De test: screenshot maken, omzetten naar grijstinten. Kun je elk datapunt nog onderscheiden?

Related Posts

Tabs zonder tablist

Tabs zonder tablist

Twee elementen met role="tab". Een element met role="tabpanel". Maar geen role="tablist".

Uitklapbare content op de verkeerde plek

Uitklapbare content op de verkeerde plek

Je klikt op “Veelgestelde vragen”. Een accordion opent. Het antwoord verschijnt.

Formulierveld kleurt rood bij een fout. Dat is alles.

Formulierveld kleurt rood bij een fout. Dat is alles.

Je vult je e-mailadres verkeerd in. De rand van het veld wordt rood.