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)

Visuele grenzen en vormen

Dit zijn de visuele kenmerken waarmee je een bedieningselement zonder tekst herkent:

Toestanden

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

Bij focus geldt één belangrijke uitzondering. Pas je de focusindicator van de browser niet aan? Dan hoeft die standaardindicator niet aan 3:1 te voldoen. Hij moet wel zichtbaar zijn. Zodra je de focusstijl zelf aanpast, geldt de eis van 3:1 wel.

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.

Informatieve iconen

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

Grafieken en diagrammen

Lijnen en segmenten in een grafiek moeten 3:1 contrast hebben met de achtergrond. Onderling hoeven ze niet te contrasteren als ze elkaar weinig overlappen. Staan de labels én de waarden in tekst bij de grafiek? Dan geldt de eis niet. Een legenda alleen is niet genoeg.

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)

Uitzonderingen zijn:

• bedieningselementen die inactief zijn
• bedieningselementen waarvan de weergave wordt bepaald door de browser en niet wordt aangepast door de auteur
• grafische objecten waarvan een specifieke weergave essentieel is, zoals logo’s, vlaggen, foto’s en kleurverlopen die een meetwaarde tonen

Geldt alleen voor:

• visuele informatie die nodig is om bedieningselementen en hun toestanden te herkennen
• delen van afbeeldingen die nodig zijn om de content te begrijpen

Test 1: Contrast van bedieningselementen

Herkenbaarheid van bedieningselementen

1. Verken de pagina met muis
   • Beweeg met de muis over elementen om hovertoestanden te activeren
   • Bepaal welke bedieningselementen er zijn:
     • Links
     • Knoppen
     • Formulierelementen (invoervelden, tekstgebieden, keuzelijsten, selectievakjes, keuzerondjes, schuifregelaars)
     • Navigaties en subnavigaties
     • Accordeons of andere elementen die kunnen uitvouwen en samenvouwen
     • Dialoogvensters
     • Carrousels
     • Tabbladen
     • Mediaspelers
   • Bepaal voor elk bedieningselement welke visuele informatie zonder tekst nodig is om het te herkennen:
     • De rand of achtergrondkleur van een formulierelement
     • Een icoon dat als link of knop werkt
     • Een tekstteken dat als icoon werkt (bijvoorbeeld een X om te sluiten)
     • Een pijltje dat aangeeft dat er een menu opent
     • De buitenrand en het schuifje van een schakelknop
2. Meet het contrast voor elke kleurcombinatie in de standaardtoestand en de hovertoestand:
   • Open Colour Contrast Analyser
   • Haal de voorgrondkleur uit de CSS
   • Haal de aangrenzende kleur uit de CSS
3. Controleer voor elke kleurcombinatie:
   • Of de contrastverhouding minstens 3:1 is

Placeholderteksten

Let op: Alleen als de rand of achtergrondkleur van een invoerveld of tekstgebied een contrastverhouding van minder dan 3:1 heeft.

4. Controleer voor elk invoerveld of tekstgebied met onvoldoende contrast:
   • Of het veld zichtbare placeholdertekst heeft
   • Of de placeholdertekst voldoende contrast heeft (zie 1.4.3 Contrast (minimum))

Contrast van de focusindicatoren

5. Verken de pagina met toetsenbord
   • Navigeer met Tab om focustoestanden te activeren
   • Bepaal voor elk bedieningselement hoe de focusindicator wordt weergegeven:
     • Rand of omlijning buiten het bedieningselement
     • Rand of omlijning binnen het bedieningselement
     • Rand op de buitenrand van het bedieningselement
     • Rand die deels binnen en deels buiten het bedieningselement valt
     • Onderstreping of toegevoegd icoon
6. Meet het contrast voor elke focusindicator:
   • Open Colour Contrast Analyser
   • Haal de kleur van de focusindicator uit de CSS
   • Haal de aangrenzende kleuren uit de CSS
   • Bij een rand buiten het bedieningselement:
     • De rand tegen de achtergrondkleur rondom het bedieningselement
   • Bij een rand binnen het bedieningselement:
     • De rand tegen de aangrenzende kleuren binnen het bedieningselement
   • Bij een rand op de buitenrand van het bedieningselement:
     • De rand tegen de kleur binnen en de kleur buiten het bedieningselement
   • Bij een rand die deels binnen en deels buiten het bedieningselement valt:
     • Elk deel tegen de kleur ernaast
   • Bij een onderstreping of toegevoegd icoon:
     • De onderstreping of het icoon tegen de achtergrondkleur
7. Controleer voor elke focusindicator:
   • Bij een rand die deels binnen en deels buiten het bedieningselement valt:
     • Of de contrastverhouding van minstens één deel minstens 3:1 is
   • Bij alle andere focusindicatoren:
     • Of de contrastverhouding van elke gemeten kleurcombinatie minstens 3:1 is

Tekstcursor

Let op: Alleen als de focusindicator van een invoerveld of tekstgebied een contrastverhouding van minder dan 3:1 heeft.

8. Controleer voor elk invoerveld of tekstgebied met onvoldoende contrast:
   • Of de tekstcursor zichtbaar is als het veld de focus heeft

Contrast van interactieve toestanden

9. Verken de pagina met muis en toetsenbord
   • Bepaal welke toestanden de bedieningselementen hebben:
     • Geselecteerde toestand bij selectievakjes, keuzerondjes, keuzelijsten en tabbladen
     • Ingedrukte toestand bij schakelknoppen
     • Uitgevouwen en samengevouwen toestand bij accordeons en menu’s
   • Activeer elke toestand
   • Bepaal voor elke toestand welke visuele informatie de toestand aangeeft:
     • Een vinkje of vulling
     • De positie of kleur van het schuifje in een schakelknop
     • Een pijltje of een plus- of min-icoon
     • Een markering bij een geselecteerd tabblad
10. Meet het contrast voor elke kleurcombinatie:
    • Open Colour Contrast Analyser
    • Haal de voorgrondkleur uit de CSS
    • Haal de aangrenzende kleur uit de CSS
11. Controleer voor elke kleurcombinatie:
    • Of de contrastverhouding minstens 3:1 is

Test 2: Contrast van grafische objecten

1. Inventariseer de pagina
   • Bepaal welke afbeeldingen er zijn:
     • Illustraties
     • Iconen
     • Grafieken en diagrammen
     • Infographics
     • Kaarten
     • Handleidingen
     • Voortgangsbalken
   • Bepaal voor elke afbeelding welke delen nodig zijn om de content te begrijpen:
     • De vorm van een informatief icoon
     • De lijnen in een lijngrafiek, inclusief de hulplijnen voor de waarden
     • De grenzen tussen de segmenten van een taartdiagram
     • De gevulde balk van een voortgangsbalk
2. Meet het contrast voor elk deel dat nodig is om de content te begrijpen:
   • Open Colour Contrast Analyser
   • Bij een afbeelding in de code (SVG of CSS):
     • Haal de voorgrondkleur uit de code
     • Haal de aangrenzende kleur uit de code
   • Bij een afbeeldingsbestand (bijvoorbeeld PNG of JPG):
     • Kies de voorgrondkleur met de pipet
     • Kies de aangrenzende kleur met de pipet
   • Bij meerdere kleuren of een kleurverloop:
     • Kies het gebied met het minste contrast
3. Controleer voor elk deel:
   • Of de contrastverhouding minstens 3:1 is

Let op: Alleen als een deel een contrastverhouding van minder dan 3:1 heeft.

4. Controleer voor elk deel met onvoldoende contrast of minstens één van de volgende waar is:
   • Of het grafische object te begrijpen blijft zonder dat deel
   • Of dezelfde informatie in tekst bij het grafische object staat (bijvoorbeeld labels en waarden bij de delen van een grafiek)

Test 3: Contrast vergroten met bedieningselementen op de pagina

Let op: Gebruik deze procedure alleen als de pagina zonder een bedieningselement om het contrast te vergroten niet voldoet.

1. Inventariseer de pagina
   • Bepaal of er bedieningselementen zijn voor het vergroten van de contrastverhouding
2. Activeer de bedieningselementen voor het vergroten van de contrastverhouding
3. Meet het contrast voor elke kleurcombinatie:
   • Open Colour Contrast Analyser
     • Haal de voorgrondkleur uit de CSS
     • Haal de aangrenzende kleur uit de CSS
4. Controleer voor elke kleurcombinatie:
   • Of de contrastverhouding minstens 3:1 is

Belangrijk om te weten

• Contrastverhoudingen worden niet afgerond. Een contrastverhouding van 2,999:1 voldoet niet aan 3:1.
• Bij kleuren in de code gaat de meting uit van de kleuren uit de code, niet van de kleuren op het scherm. Dunne lijnen lijken door anti-aliasing (het vervagen van randen op het scherm) lichter dan de kleur in de code.
• Alleen visuele informatie die nodig is om een bedieningselement te herkennen telt mee. Heeft een knop tekst met voldoende contrast, dan hoeft de rand van de knop niet aan 3:1 te voldoen.
• Dit succescriterium vergelijkt toestanden niet met elkaar. Een kleurverandering bij hover of focus hoeft geen 3:1 te hebben ten opzichte van de standaardtoestand. Het bedieningselement moet in elke toestand wel genoeg contrast houden met de kleuren ernaast.
• Verandert bij focus of selectie alleen de kleur binnen het bedieningselement, dan valt dat buiten dit succescriterium. Toets dat bij 1.4.1 Gebruik van kleur.
• Een standaardfocusindicator van de browser valt buiten de contrasteis van dit succescriterium. Die moet wel zichtbaar zijn (zie 2.4.7 Focus zichtbaar).
• Een legenda alleen telt niet als tekst bij het grafische object. De labels of waarden moeten bij de delen zelf staan.
• Een bedieningselement om het contrast te vergroten is alleen een geldig alternatief als de weergave met verhoogd contrast aan alle succescriteria van niveau AA voldoet, niet alleen aan het contrast.

Bedieningselementen

• Voor alle visuele informatie die nodig is om een bedieningselement te herkennen, moet minstens één van de volgende zaken gelden:
  • De contrastverhouding met aangrenzende kleuren is minstens 3:1, in de standaardtoestand en in de hovertoestand
  • Alleen bij invoervelden en tekstgebieden: zichtbare placeholdertekst met voldoende contrast (zie 1.4.3 Contrast (minimum)) identificeert het veld

Toestanden

• Voor alle focusindicatoren moet minstens één van de volgende zaken gelden:
  • De contrastverhouding met aangrenzende kleuren is minstens 3:1
  • Alleen bij een focusindicator die deels binnen en deels buiten het bedieningselement valt: minstens één deel heeft een contrastverhouding van minstens 3:1
  • Alleen bij invoervelden en tekstgebieden: de tekstcursor is zichtbaar als het veld de focus heeft
• Visuele informatie die een toestand van een bedieningselement aangeeft, moet een contrastverhouding van minstens 3:1 hebben ten opzichte van aangrenzende kleuren

Grafische objecten

• Voor alle grafische objecten die nodig zijn om de content te begrijpen, moet minstens één van de volgende zaken gelden:
  • De delen die nodig zijn om het object te begrijpen, hebben een contrastverhouding van minstens 3:1 met aangrenzende kleuren
  • Het object blijft te begrijpen zonder de delen met een contrastverhouding van minder dan 3:1
  • Dezelfde informatie staat in tekst bij het object

• 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