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. Verken alle kleuren
   • Bepaal welke niet-tekstuele bedieningselementen er allemaal zijn
     • Functionele afbeeldingen
     • Formulierelementen (invoervelden, keuzelijsten, selectievakjes, keuzerondjes, schuifregelaars, schuifbalken, enz.)
   • Bepaal ook de kleurcombinaties van niet-tekstuele bedieningselementen in verschillende toestanden:
     • Hover
     • Active
   • Bepaal welke kleurcombinaties in niet-tekstuele bedieningselementen er allemaal zijn
2. Meet het contrast
   • Voor iedere kleurcombinatie:
     • Open Contrast Analyzer
     • Haal de voorgrondkleur uit de CSS
     • Haal de achtergrondgrondkleur uit de CSS
     • Controleer de contrastverhouding

Contrast van de focusindicator

1. Verken alle kleuren
   • Bepaal van ieder 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, toegevoegde iconen: Meet het contrast met de achtergrond
   • Bepaal van ieder bedieningselement de kleurcombinaties van de focusindicator
2. Meet het contrast
   • Voor iedere kleurcombinatie:
     • Open Contrast Analyzer
     • Haal de voorgrondkleur uit de CSS
     • Haal de achtergrondgrondkleur of aangrenzende kleur uit de CSS
     • Controleer de contrastverhouding

Contrast van interactieve toestand

1. Verken alle kleuren
   • Bepaal van ieder 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 van ieder bedieningselement de kleurcombinaties van de interactieve toestanden
2. Meet het contrast
   • Voor iedere kleurcombinatie:
     • Open Contrast Analyzer
     • Haal de voorgrondkleur uit de CSS
     • Haal de achtergrondgrondkleur uit de CSS
     • Controleer de contrastverhouding

Test 2: Contrast van grafische objecten

1. Verken alle kleuren
   • Bepaal welke niet-tekstuele grafische objecten er allemaal zijn
     • Informatieve iconen
     • Diagrammen en grafieken
     • Voortgangsbalken
   • Bepaal welke kleurcombinaties in grafische objecten er allemaal zijn
2. Meet het contrast
   • Voor iedere kleurcombinatie:
     • Open Contrast Analyzer
     • Haal de voorgrondkleur uit de CSS
     • Haal de achtergrondgrondkleur uit de CSS
     • Controleer de contrastverhouding

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

1. Zoek naar bedieningselementen
   • Controleer of de webpagina eigen bedieningselementen heeft voor het vergroten van de contrastverhouding
2. Meet het contrast
   • Voor iedere kleurcombinatie:
     • Open Contrast Analyzer
     • Haal de voorgrondkleur uit de CSS
     • Haal de achtergrondgrondkleur uit de CSS
     • Controleer de contrastverhouding

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
• Toestanden van bedieningselementen moeten een contrastverhouding hebben van minimaal 3:1 hebben
• De focusindicator moet 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