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)

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.

• Een contrast analyser, zoals Colour Contrast Analyser (CCA)

Test 1: Contrast van bedieningselementen

Contrast van niet-tekstuele bedieningselementen

1. Inventariseer de pagina
   • Bepaal welke niet-tekstuele bedieningselementen er zijn:
     • Functionele afbeeldingen
     • Formulierelementen (invoervelden, keuzelijsten, selectievakjes, keuzerondjes, schuifregelaars, schuifbalken, enz.)
   • Bepaal voor elk bedieningselement de kleurcombinaties in verschillende toestanden:
     • Hover
     • Focus
2. Meet het contrast voor elke kleurcombinatie:
   • Open Contrast Analyzer
     • Haal de voorgrondkleur uit de CSS
     • Haal de achtergrondkleur uit de CSS
   • Controleer:
     • Of de contrastverhouding 3:1 is

Contrast van de focusindicator

1. Inventariseer de pagina
   • 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
     • Let op: Voor kleurverandering of focusindicator met een caret gelden geen contrasteisen.
   • Bepaal voor elk bedieningselement de kleurcombinaties van de focusindicator
2. Meet het contrast voor elke kleurcombinatie:
   • Open Contrast Analyzer
     • Haal de voorgrondkleur uit de CSS
     • Haal de achtergrondkleur of aangrenzende kleur uit de CSS
   • Controleer:
     • Of de contrastverhouding 3:1 is

Contrast van interactieve toestand

1. Inventariseer de pagina:
   • 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
2. Meet het contrast voor elke kleurcombinatie:
   • Open Contrast Analyzer
     • Haal de voorgrondkleur uit de CSS
     • Haal de achtergrondkleur uit de CSS
   • Controleer:
     • Of de contrastverhouding 3:1 is

Test 2: Contrast van grafische objecten

1. Inventariseer de pagina
   • Bepaal welke niet-tekstuele grafische objecten er zijn:
     • Informatieve iconen
     • Diagrammen en grafieken
     • Voortgangsbalken
   • Bepaal voor elk grafisch object de kleurcombinaties
2. Meet het contrast voor elke kleurcombinatie:
   • Open Contrast Analyzer
     • Haal de voorgrondkleur uit de CSS
     • Haal de achtergrondkleur uit de CSS
   • Controleer:
     • Of de contrastverhouding 3:1 is

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

Let op: Alleen indien van toepassing.

1. Inventariseer de pagina
   • Bepaal of de webpagina eigen bedieningselementen heeft voor het vergroten van de contrastverhouding
2. Meet het contrast bij gebruik van deze bedieningselementen:
   • Open Contrast Analyzer
     • Haal de voorgrondkleur uit de CSS
     • Haal de achtergrondkleur uit de CSS
   • Controleer:
     • Of de contrastverhouding 3:1 is

Belangrijk om te weten

• Als de kleuren niet beschikbaar zijn in CSS, maak dan een schermafbeelding van het element en bepaal daar de kleuren
• Test bij grafische objecten alleen de onderdelen nodig zijn voor begrip

• Bedieningselementen moeten een contrastverhouding van minimaal 3:1 hebben
• De focusindicator moet een contrastverhouding hebben van minimaal 3:1 hebben
• Toestanden van bedieningselementen moeten een contrastverhouding hebben van minimaal 3:1 hebben
• Grafische objecten moeten een contrastverhouding van minimaal 3:1 hebben

• Principe 1: Waarneembaar
  • Richtlijn 1.1 Tekstalternatieven
  • Richtlijn 1.2 Op tijd gebaseerde media
  • Richtlijn 1.3 Aanpasbaar
  • Richtlijn 1.4 Onderscheidbaar
• Principe 2: Bedienbaar
  • Richtlijn 2.1 Toetsenbordtoegankelijk
  • Richtlijn 2.2 Genoeg tijd
  • Richtlijn 2.3 Toevallen en fysieke reacties
  • Richtlijn 2.4 Navigeerbaar
  • Richtlijn 2.5 Input modaliteiten
• Principe 3: Begrijpelijk
  • Richtlijn 3.1 Leesbaar
  • Richtlijn 3.2 Voorspelbaar
  • Richtlijn 3.3 Assistentie bij invoer
• Principe 4: Robuust
  • Richtlijn 4.1 Compatibel