Typ iets om te zoeken...

Wcag uitgelegd

Kaart met legenda die alleen op kleur werkt

Kaart met legenda die alleen op kleur werkt — WCAG 1.4.1 Gebruik van kleur (post 8/8)

Een kaart van Nederland. Gebieden in vier kleuren: rood, oranje, geel, groen. Risico hoog, gemiddeld, laag, minimaal.

In grijstinten: vier tinten grijs die nauwelijks van elkaar te onderscheiden zijn.

En de legenda? Vier gekleurde vlakjes met tekst. In grijstinten: vier grijze vlakjes die er identiek uitzien.

Oplossingen voor kaarten:

  1. Patronen of arceringen: strepen, stippen, kruisarceringen per categorie
  2. Labels op de kaart: tekst direct in de gebieden
  3. Interactieve hover/focus: bij hoveren of focussen verschijnt de waarde
  4. Tabel als alternatief: dezelfde data in een tabel naast de kaart

De praktische test: print de kaart in zwart-wit. Kun je nog steeds alle categorieën onderscheiden?

Als het antwoord nee is, werkt je kaart niet voor iedereen. En dat zijn niet alleen mensen met kleurenblindheid. Denk ook aan: uitgeprinte documenten, presentaties op een projector met slechte kleurweergave, en screenshots die in een e-mail worden doorgezet.

Dit was post 8 van 8 over WCAG 1.4.1 Gebruik van kleur. De kern: kleur is een krachtig hulpmiddel om informatie over te brengen. Maar het mag nooit het enige middel zijn. Voeg altijd een tweede visueel kenmerk toe: tekst, icoon, patroon, vorm of positie.

Related Posts

Framework met Engels label, Nederlandse interface

Framework met Engels label, Nederlandse interface

Een datepicker uit een UI-framework. Het veld toont “Kies een datum” in het Nederlands. Maar het aria-label — automatisch gegenereerd door het framework — zegt “Select date” in het Engels.

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.

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.