Offerte audit
Typ iets om te zoeken...

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?

Zelf verder met dit onderwerp

Related Posts

Doorgestreepte prijzen

Doorgestreepte prijzen

49,99 doorgestreept, 29,99 ernaast. Je ziet direct: korting. Maar een schermlezer leest: “49 euro 99. 29 euro 99.” Geen “oude prijs”, geen “nieuwe prijs”, geen context.

Actieve pagina in het menu: alleen een andere kleur

Actieve pagina in het menu: alleen een andere kleur

Home. Over ons. Diensten. Contact. Je bent op “Diensten.” Hoe weet je dat? De tekst is blauw in plaats van zwart.

Groene rij = goedgekeurd, rode rij = afgewezen

Groene rij = goedgekeurd, rode rij = afgewezen

Een tabel met aanvragen. Groen: goedgekeurd. Rood: afgewezen. Oranje: in behandeling.