1.4.11 Contrast van niet-tekstuele content – Richtlijnen voor toegankelijkheid van webcontent

Nieuw in WCAG 2.1

Succescriterium 1.4.11 Contrast van niet-tekstuele content

De visuele weergave van het volgende heeft een contrastverhouding van ten minste 3:1 ten opzichte van aangrenzende kleuren:

Componenten van de gebruikersinterface: Visuele informatie die vereist is om componenten van de gebruikersinterface en statussen te identificeren, met uitzondering van inactieve componenten of componenten waarvan de weergave van de component wordt bepaald door de user agent en niet wordt aangepast door de auteur;

Grafische objecten: Delen van afbeeldingen die vereist zijn om de content te begrijpen, behalve wanneer een specifieke weergave van afbeeldingen essentieel is voor de informatie die wordt overgebracht.

Contrast van niet-tekstuele content begrijpen (Engelstalig)

Niet-tekstuele onderdelen met te weinig contrast zijn een probleem voor iedereen, maar vooral mensen die slechtziend of kleurenblind zijn kunnen deze onderdelen niet (of niet goed) zien. Gebruik daarom voor niet-tekstuele bedieningselementen en grafische objecten die belangrijk zijn voor het begrijpen van de content een contrastverhouding die hoog genoeg is.

Succescriterium 1.4.11 stelt een minimale eis van 3:1 aan de contrastverhouding.

Onder niet-tekstuele bedieningselementen vallen formulierelementen, maar ook iconen die worden gebruikt als link of knop. De contrasteis geldt ook voor de toestanden (states) van deze bedieningselementen (zoals hover of focus).

Onder grafische objecten vallen afbeeldingen zoals diagrammen, grafieken en informatieve iconen.

Uitzonderingen zijn:

bedieningselementen die inactief zijn
elementen die puur decoratief zijn
elementen waarvan de weergave wordt bepaald door de browser en niet wordt aangepast door de auteur
elementen waarvan een specifieke weergave essentieel is, zoals onderdelen van een logo of merknaam

Hoe pas je dit toe?

Gebruik een contrastverhouding van minimaal 3:1 voor niet-tekstuele bedieningselementen.
Gebruik een contrastverhouding van minimaal 3:1 voor toestanden van niet-tekstuele bedieningselementen.
Gebruik een contrastverhouding van minimaal 3:1 voor grafische objecten.

Componenten van de gebruikersinterface

Visuele grenzen en vormen

Dit zijn de visuele kenmerken waarmee je een bedieningselement herkent.

Element	Wat moet 3:1 contrast hebben	Toelichting
Invoerveld	De rand of achtergrondkleur die het veld zichtbaar maakt	Heeft het veld alleen een onderrand? Dan moet die onderrand 3:1 contrast hebben. Heeft het een volledige rand? Dan geldt de eis voor de volledige rand. Geen rand maar wel een afwijkende achtergrondkleur? Dan meet je het contrast met de kleur eromheen.
Knop	De rand of achtergrondkleur die de knop herkenbaar maakt	Bevat de knop tekst met voldoende contrast? Dan hoeft de knoprand níet apart aan 3:1 te voldoen.
Selectievakje (checkbox)	De rand van het vakje	De rand moet 3:1 contrast hebben met de achtergrond.
Keuzerondje (radio button)	De rand van de cirkel	Zelfde principe als het selectievakje.
Keuzelijst (dropdown)	De rand of achtergrondkleur, en het pijlicoon	Het pijlicoon is nodig om te begrijpen dat er een uitklapmenu achter zit. Dat icoon moet ook 3:1 contrast hebben.
Schakelknop	De buitenrand en de interne indicator (het schuifje)	Zowel de buitenvorm als het schuifje moeten voldoende contrast hebben.
Schuifregelaar (slider)	De balk (track) en het handvat (thumb)	Het handvat moet contrast hebben met de balk. De balk moet herkenbaar zijn tegen de achtergrond.

Toestanden

De visuele informatie die een toestand (state) aangeeft, moet ook een contrastverhouding van 3:1 hebben met de aangrenzende kleur.

Toestand	Voorbeelden	Toelichting
Focus	Rand, omlijning, onderstreping of toegevoegde iconen	De focusindicator moet 3:1 contrast hebben met de kleur die er direct naast ligt. Bij een externe focusrand is dat de achtergrondkleur van de pagina. Bij een interne focusrand is dat de achtergrondkleur van het element zelf.
Aangevinkt / niet aangevinkt	Het vinkje in een selectievakje, de vulling van een keuzerondje	Het vinkje moet 3:1 contrast hebben met de achtergrond van het vakje. De vulling van een keuzerondje moet contrast hebben met de binnenkant van de cirkel óf met de kleur ernaast.
Aan / uit	De positie of kleur van een schuifje in een schakelaar	De indicator die aangeeft of de schakelaar aan of uit staat, moet 3:1 contrast hebben.
Uitgeklapt / ingeklapt	De draairichting van een pijl, een plus/min-icoon	Het visuele verschil dat aangeeft of iets open of dicht is, moet herkenbaar zijn met voldoende contrast.
Geselecteerd	Markering van een actief tabblad, geselecteerd menu-item	De visuele markering die aangeeft dat iets geselecteerd is, moet 3:1 contrast hebben.
Hover	Eventuele visuele verandering bij muisaanwijzer	De hover-staat hoeft zelf geen 3:1 contrast te hebben met de standaardstaat. De muisaanwijzer geeft al aan welk element je aanwijst. Maar: het element mag tijdens hover niet onder de 3:1 contrastgrens zakken ten opzichte van de omgeving.

Belangrijke nuance: hover

De muisaanwijzer zelf is al de indicator van de hover-toestand. Daarom hoeft een extra visueel hover-effect (zoals een kleurverandering of schaduw) niet zelfstandig aan de contrasteis te voldoen.

Het element zelf moet wel voldoende contrast behouden tijdens hover.

Grafische objecten

Informatieve iconen

Dit zijn afbeeldingen die nodig zijn om de content te begrijpen.

Type	Voorbeeld	Toelichting
Informatieve iconen	Telefoonicoon, printericoon, waarschuwingsicoon, zoekicoon	Het icoon moet 3:1 contrast hebben met de achtergrond of het vlak waarop het staat.
Symbolen als tekens	Een “X” voor sluiten, een “>” als pijl	Tekstkarakters die gebruikt worden als symbool (voor hun visuele verschijning, niet voor menselijke taal) vallen onder niet-tekstuele content. Ze moeten 3:1 contrast hebben met de achtergrond.
Iconen in een gekleurd vlak	Een wit icoon op een gekleurd cirkelvlak	Het icoon moet 3:1 contrast hebben met het gekleurde vlak. De vorm van het vlak zelf moet 3:1 contrast hebben met de pagina-achtergrond als de vorm informatie overbrengt.

Grafieken en diagrammen

Lijnen of segmenten in een grafiek of diagram hoeven niet onderling te contrasteren als je ze kunt volgen door andere middelen (bijv. labels, legenda’s, datapunten).

Type	Wat moet 3:1 contrast hebben	Toelichting
Lijngrafiek	Elke lijn die data vertegenwoordigt, en de achtergrondlijnen die de waarden aangeven	De lijnen moeten 3:1 contrast hebben met de achtergrond van de grafiek. Kruispunten tussen lijnen hoeven geen 3:1 te zijn als je beide lijnen kunt blijven volgen.
Staafdiagram	Elke staaf	De staven moeten 3:1 contrast hebben met de achtergrond. Aangrenzende staven moeten onderling onderscheidbaar zijn (3:1) als je het verschil moet begrijpen.
Taartdiagram (cirkeldiagram)	De randen tussen aangrenzende segmenten, óf het kleurverschil tussen de segmenten	Aangrenzende segmenten moeten van elkaar onderscheidbaar zijn (3:1). Dit kan met contrasterende randen of met kleurverschillen tussen de segmenten zelf.
Spreidingsdiagram (scatterplot)	De datapunten	Elk datapunt moet 3:1 contrast hebben met de achtergrond. Bij meerdere datareeksen moeten overlappende of dicht bij elkaar liggende punten onderling 3:1 contrast hebben.
Infographic	Elk onderdeel dat informatie overbrengt	Elk informatief element (iconen, vormen, cirkels, grafieken) moet 3:1 contrast hebben met zijn directe achtergrond. Beoordeel elk element apart.
Kaarten, geografische visualisaties	Grenslijnen tussen gebieden, markers en iconen die informatie overbrengen	Markers (zoals locatie-pins) moeten 3:1 contrast hebben met de kaartachtergrond. Grenslijnen tussen kaartgebieden moeten 3:1 hebben met beide aangrenzende gebieden. Belangrijke routes of lijnen moeten 3:1 hebben met de achtergrond.

Contrast meten

Contrastverhouding is het verschil in helderheid tussen twee kleuren.

Test zelf de contrastverhouding van de kleuren van je website eens met de Colour Contrast Analyser (CCA). Beschikbaar voor Windows en Mac. Of gebruik de contrast checker op deze website.

Lees meer over kleurcontrast

Voor wie is dit belangrijk?

Mensen die slechtziend of kleurenblind zijn.

Wie is verantwoordelijk?

Vormgever

Hoe toets je dit?

Benodigdheden

Een contrast analyser, zoals Colour Contrast Analyser (CCA)

Testprocedure

Test 1: Contrast van bedieningselementen

Contrast van niet-tekstuele bedieningselementen

Verken de pagina met muis en toetsenbord
- Beweeg met de muis over elementen om hover-toestanden te activeren
- Navigeer met de Tab-toets om focus-toestanden te activeren
- Bepaal welke niet-tekstuele bedieningselementen er zijn:
  - Functionele afbeeldingen
  - Formulierelementen (invoervelden, keuzelijsten, selectievakjes, keuzerondjes, schuifregelaars, enz.)
  - Bepaal voor elk bedieningselement de kleurcombinaties in verschillende toestanden:
    - Hover
    - Focus
Meet het contrast voor elke kleurcombinatie:
- Open Colour Contrast Analyzer
  - Haal de voorgrondkleur uit de CSS
  - Haal de aangrenzende kleur uit de CSS
Controleer voor elke kleurcombinatie:
- Of de contrastverhouding minstens 3:1 is

Contrast van de focusindicator

Verken de pagina met het toetsenbord
- Navigeer met de Tab-toets om focus-toestanden te activeren
- Bepaal van elke bedieningselement hoe de focusindicator wordt weergegeven:
  - Rand of omlijning:
    - Buiten het component: meet het contrast met de achtergrond
    - Binnen het component: meet het contrast met aangrenzende kleuren binnen het element
    - Als rand van het component: meet het contrast met beide aangrenzende kleuren
    - Gedeeltelijk binnen/buiten: meet of één deel voldoende contrast heeft
  - Onderstreping of toegevoegde iconen: meet het contrast met de achtergrond
  - Bepaal voor elk bedieningselement de kleurcombinaties van de focusindicator
Meet het contrast voor elke kleurcombinatie:
- Open Colour Contrast Analyzer
  - Haal de voorgrondkleur uit de CSS
  - Haal de aangrenzende kleur uit de CSS
Controleer voor elke kleurcombinatie:
- Of de contrastverhouding minstens 3:1 is

Contrast van interactieve toestand

Verken de pagina met muis en toetsenbord
- Bepaal voor elk bedieningselement hoe de interactieve toestand wordt weergegeven:
  - Checked/selected toestand bij selectievakjes en keuzerondjes
  - Active/pressed toestand bij toggles
  - Selected toestand bij keuzelijsten en tabs
- Bepaal voor elk bedieningselement de kleurcombinaties van de interactieve toestanden
Meet het contrast voor elke kleurcombinatie:
- Open Colour Contrast Analyzer
  - Haal de voorgrondkleur uit de CSS
  - Haal de aangrenzende kleur uit de CSS
Controleer voor elke kleurcombinatie:
- Of de contrastverhouding minstens 3:1 is

Test 2: Contrast van grafische objecten

Inventariseer de pagina
- Bepaal welke niet-tekstuele grafische objecten er zijn:
  - Informatieve iconen
  - Diagrammen en grafieken
  - Voortgangsbalken
- Bepaal voor elk grafisch object de kleurcombinaties
Meet het contrast voor elke kleurcombinatie:
- Open Colour Contrast Analyzer
  - Bepaal de voorgrondkleur met een pipet
  - Bepaal de aangrenzende kleur met een pipet
Controleer voor elke kleurcombinatie:
- Of de contrastverhouding minstens 3:1 is

Test 3: Contrast vergroten met bedieningselementen op de pagina (indien van toepassing)

Let op: Alleen als de webpagina eigen bedieningselementen heeft voor het vergroten van de contrastverhouding.

Verken de pagina
- Bepaal of de webpagina eigen bedieningselementen heeft voor het vergroten van de contrastverhouding
Test de bedieningselementen voor het vergroten van de contrastverhouding
Meet het contrast voor elke kleurcombinatie:
- Open Colour Contrast Analyzer
  - Haal de voorgrondkleur uit de CSS
  - Haal de aangrenzende kleur uit de CSS
Controleer voor elke kleurcombinatie:
- Of de contrastverhouding minstens 3:1 is

Belangrijk om te weten

Contrastverhoudingen worden niet afgerond: een contrast van 2,99:1 voldoet niet aan 3:1
Een browser-standaard focusindicator voldoet
Test bij grafische objecten alleen de onderdelen nodig zijn voor begrip

Beoordeling

Bedieningselementen

Niet-tekstuele bedieningselementen moeten een contrastverhouding van minstens 3:1 hebben ten opzichte van aangrenzende kleuren

Toestanden

Focusindicatoren moeten een contrastverhouding van minstens 3:1 hebben ten opzichte van aangrenzende kleuren
Toestanden van bedieningselementen moeten een contrastverhouding van minstens 3:1 hebben ten opzichte van aangrenzende kleuren

Grafische objecten

Delen van grafische objecten (die nodig zijn om de content te begrijpen) moeten een contrastverhouding van minstens 3:1 hebben ten opzichte van aangrenzende kleuren

Bronnen

Andere richtlijnen

Richtlijnen voor toegankelijkheid van webcontent