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 |
Uitzonderingen zijn:
- tekst op een element dat inactief is
- tekst die puur decoratief is
- tekst op een afbeelding die informatief 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
- Verken alle kleuren
- Bepaal welke kleurcombinaties in tekst er allemaal zijn
- Bepaal ook de kleurcombinaties van tekst in bedieningselementen in verschillende toestanden:
- Hover
- Focus
- Active
- Bepaal ook de kleurcombinaties van:
- placeholder-teksten
- tekst in formuliervelden
- Meet de lettergrootte
- Bepaal van iedere tekst of het valt onder tekst of grote tekst
- Normale tekst: kleiner dan 24px of 18.5px vetgedrukt
- Grote tekst: groter dan of gelijk aan 24px of 18.5px vetgedrukt
- Bepaal van iedere tekst of het valt onder tekst of grote tekst
- Meet het contrast
- Voor iedere kleurcombinatie:
- Open Contrast Analyzer
- Haal de voorgrondkleur uit de CSS
- Haal de achtergrondgrondkleur 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
- Voor iedere kleurcombinatie:
Contrast van tekst op afbeeldingen
- Verken alle kleuren
- Bepaal welke kleurcombinaties in tekst op afbeeldingen er allemaal zijn
- Bepaal welke kleurcombinaties in tekst over een achtergrondafbeeldingen er allemaal zijn
- Meet de lettergrootte
- Bepaal van iedere tekst of het valt onder tekst of grote tekst
- Meet het contrast
- Voor iedere kleurcombinatie:
- Open Contrast Analyzer
- Bepaal de voorgrondkleur met een pipet
- Bepaal de achtergrondgrondkleur met een pipet
- Controleer:
- Of de contrastverhouding van normale tekst minimaal 4,5:1 is
- Of de contrastverhouding van grote tekst minimaal 3:1 is
- Voor iedere kleurcombinatie:
Test 2: Contrast vergroten met bedieningselementen op de pagina (indien van toepassing)
- Zoek naar bedieningselementen
- Controleer of de webpagina eigen bedieningselementen heeft voor het vergroten van de contrastverhouding
- Meet het contrast
- Voor iedere kleurcombinatie:
- Open Contrast Analyzer
- Haal de voorgrondkleur uit de CSS
- Haal de achtergrondgrondkleur uit de CSS
- Controleer:
- Of de contrastverhouding van normale tekst minimaal 4,5:1 is
- Of de contrastverhouding van normale tekst minimaal 3:1 is
- Voor iedere kleurcombinatie:
Beoordeling
- Tekst moet een contrasthouding van minimaal 4,5:1 hebben
- Grote tekst moet een contrastverhouding van minimaal 3:1 hebben
Bronnen
- WCAG 2.2 – Succescriterium 1.4.3 Contrast (minimum)
- WebAIM: Contrast and Color Accessibility (Engelstalig)