1.4.3 Contrast (minimum) – Richtlijnen voor toegankelijkheid van webcontent

Succescriterium 1.4.3 Contrast (minimum)

De visuele weergave van tekst en afbeeldingen van tekst heeft een contrastverhouding van ten minste 4,5:1, behalve in de volgende gevallen:

Grote tekst: Grote tekst en afbeeldingen van grote tekst hebben een contrastverhouding van ten minste 3:1;

Incidenteel: Tekst of afbeeldingen van tekst die deel zijn van een inactieve component van de gebruikersinterface, die puur decoratief zijn, die voor niemand zichtbaar zijn, of die onderdeel zijn van een afbeelding die significant andere visuele content bevat, hebben geen contrasteis.

Woordmerken: Tekst die onderdeel is van een logo of merknaam heeft geen contrasteis.

Contrast (minimum) begrijpen (Engelstalig)

Tekst met te weinig contrast is een probleem voor iedereen, maar vooral mensen die slechtziend of kleurenblind zijn kunnen deze teksten niet goed zien. Gebruik daarom tekst met een contrastverhouding die hoog genoeg is.

De contrastverhouding is een maat voor hoe goed 2 kleuren van elkaar te onderscheiden zijn. Het varieert van 1:1 (minimaal) tot 21:1 (maximaal).

Succescriterium 1.4.3 stelt een aantal minimale eisen aan de contrastverhouding:

	Kleiner dan 18.5px	18.5px tot 24px	Groter dan 24px
Tekst	4,5:1	4,5:1	3:1
Vetgedrukte tekst	4,5:1	3:1	3:1

Contrasteisen van succescriterium 1.4.3 (niveau AA)

Uitzonderingen zijn:

tekst op een element dat inactief is
tekst die puur decoratief is
tekst op een afbeelding die geen informatie overdraagt
tekst die onderdeel is van een logo of merknaam

Hoe pas je dit toe?

Gebruik een contrastverhouding van minimaal 4,5:1 voor tekst.
Gebruik een contrastverhouding van minimaal 3:1 voor grote tekst.

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.

Voor wie is dit belangrijk?

Mensen die slechtziend of kleurenblind zijn.

Wie is verantwoordelijk?

Redacteur
Vormgever

Hoe toets je dit?

Benodigdheden

Een contrast analyser, zoals Colour Contrast Analyser (CCA)

Testprocedure

Test 1: Contrast

Contrast van tekst

Inventariseer de pagina
- Bepaal welke kleurcombinaties in tekst er allemaal zijn
  - Koppen
  - Paragrafen
  - Links
  - Knoppen
  - Placeholder-teksten
  - Tekst in formuliervelden
- Bepaal voor elke tekst:
  - Of het normale tekst is (kleiner dan 24px of 18.5px vetgedrukt)
  - Of het grote tekst is (groter dan of gelijk aan 24px of 18.5px vetgedrukt)
Verken de pagina met muis en toetsenbord
- Beweeg met de muis over elementen om hover-states te activeren
- Navigeer met de Tab-toets om focus-states te activeren
- Bepaal de kleurcombinaties van tekst van bedieningselementen in verschillende toestanden:
  - Hover
  - Focus
  - Active
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 van normale tekst minimaal 4,5:1 is
  - Of de contrastverhouding van grote tekst minimaal 3:1 is

Contrast van tekst op afbeeldingen

Inventariseer de pagina
- Bepaal welke kleurcombinaties in tekst op afbeeldingen er allemaal zijn
- Bepaal welke kleurcombinaties in tekst over een achtergrondafbeeldingen er allemaal zijn
- Bepaal voor elke tekst op afbeeldingen of het normale tekst of grote tekst is
Meet het contrast voor elke kleurcombinatie:
- Open Contrast Analyzer
  - Bepaal de voorgrondkleur met een pipet
    - Kies een pixel die geen anti-aliasing bevat (geen vage rand)
  - Bepaal de achtergrondkleur met een pipet
    - Bij gradients of complexe achtergronden: selecteer de pixel die waarschijnlijk het minste contrast oplevert
- Controleer:
  - Of de contrastverhouding van normale tekst minimaal 4,5:1 is
  - Of de contrastverhouding van grote tekst minimaal 3:1 is

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

Let op: Alleen indien van toepassing en zonder gebruik van deze bedieningselementen niet voldoet.

Inventariseer de pagina
- Bepaal of de webpagina eigen bedieningselementen heeft voor het vergroten van de contrastverhouding
Pas het contrast aan met deze bedieningselementen
Meet het contrast voor elke kleurcombinatie:
- Voor elke kleurcombinatie:
  - Open Contrast Analyzer
    - Haal de voorgrondkleur uit de CSS
    - Haal de achtergrondkleur uit de CSS
  - Controleer:
    - Of de contrastverhouding van normale tekst minimaal 4,5:1 is
    - Of de contrastverhouding van grote tekst minimaal 3:1 is

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

Let op: Alleen indien van toepassing en zonder gebruik van deze bedieningselementen niet voldoet.

Inventariseer de pagina
- Bepaal of de webpagina eigen bedieningselementen heeft voor tekstvergroting
Pas de tekst aan met deze bedieningselementen
- Bepaal voor elke tekst opnieuw:
  - Of het normale tekst is (kleiner dan 24px of 18.5px vetgedrukt)
  - Of het grote tekst is (groter dan of gelijk aan 24px of 18.5px vetgedrukt)
Meet het contrast voor elke kleurcombinatie:
- Voor elke kleurcombinatie:
  - Open Contrast Analyzer
    - Haal de voorgrondkleur uit de CSS
    - Haal de achtergrondkleur uit de CSS
  - Controleer:
    - Of de contrastverhouding van normale tekst minimaal 4,5:1 is
    - Of de contrastverhouding van grote tekst minimaal 3:1 is

Beoordeling

De contrastverhouding tussen tekst en de achtergrond moet minstens 4,5:1 zijn
De contrastverhouding tussen grote tekst en de achtergrond moet minstens 3:1 zijn

Bronnen

Andere richtlijnen

Richtlijnen voor toegankelijkheid van webcontent