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 voor iedereen lastig te lezen. Mensen die slechtziend zijn of minder goed contrast zien, kunnen zulke tekst vaak helemaal niet lezen. (Dat geldt ook voor veel ouderen.) Gebruik daarom tekst met een contrastverhouding die hoog genoeg is.
De contrastverhouding is een maat voor het verschil in helderheid tussen twee kleuren. Het gaat dus om licht en donker, niet om de kleur zelf. De verhouding loopt van 1:1 (geen verschil) tot 21:1 (zwart op wit).
Succescriterium 1.4.3 stelt een aantal minimale eisen aan de contrastverhouding:
| Kleiner dan 18.5px | Vanaf 18.5px tot 24px | Vanaf 24px | |
|---|---|---|---|
| Tekst | 4,5:1 | 4,5:1 | 3:1 |
| Vetgedrukte tekst | 4,5:1 | 3:1 | 3:1 |
Uitzonderingen zijn:
- tekst die deel is van een inactief bedieningselement
- tekst die puur decoratief is
- tekst die voor niemand zichtbaar is
- tekst in een foto of afbeelding waarin de tekst niet de hoofdzaak is (bijvoorbeeld een straatnaambord op een foto)
- tekst die onderdeel is van een logo of merknaam
Let op: huisstijlkleuren vallen niet onder de uitzondering. Alleen de tekst in het logo of de merknaam zelf heeft geen contrasteis.
Hoe pas je dit toe?
- Zorg voor een contrastverhouding van minstens 4,5:1 tussen tekst en de achtergrond.
- Voor grote tekst is een contrastverhouding van minstens 3:1 genoeg.
- Dit geldt ook voor afbeeldingen van tekst, placeholdertekst en tekst bij hover of focus.
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?
Hoe toets je dit?
Benodigdheden
- Een contrast analyser, zoals Colour Contrast Analyser (CCA)
- Google Chrome
Uitzonderingen
Uitzonderingen zijn:
- tekst die deel is van een inactief bedieningselement
- tekst die puur decoratief is
- tekst die voor niemand zichtbaar is
- tekst die toevallig deel is van een afbeelding met veel andere visuele content
- tekst die onderdeel is van een logo of merknaam
Testprocedure
Test 1: Contrast
Contrast van tekst
- Verken de pagina met muis en toetsenbord
- Beweeg met de muis over elementen om hovertoestanden te activeren
- Navigeer met Tab om focustoestanden te activeren
- Verstuur formulieren leeg of met foute invoer om foutmeldingen te tonen
- Bepaal welke kleurcombinaties van tekst en achtergrond er zijn:
- Koppen
- Paragrafen en lijsten
- Links
- Knoppen
- Labels en tekst in formulierelementen
- Placeholdertekst
- Tekst in navigaties, kopteksten en voetteksten
- Tekst van bedieningselementen in elke toestand:
- Hovertoestand
- Focustoestand
- Actieve toestand
- Geselecteerde toestand (bijvoorbeeld het huidige menu-item of tabblad)
- Tekst die pas verschijnt na hover, focus of het versturen van een formulier (bijvoorbeeld tooltips, uitklapmenu’s en foutmeldingen)
- Bepaal voor elke tekst:
- Of het grote tekst is (minstens 24px, of minstens 18,66px en vetgedrukt)
- Of het normale tekst is (alle andere tekst)
- Meet het contrast voor elke kleurcombinatie:
- Open Colour Contrast Analyser
- Haal de voorgrondkleur uit de CSS
- Haal de achtergrondkleur uit de CSS
- Controleer voor elke kleurcombinatie:
- Of de contrastverhouding van normale tekst minstens 4,5:1 is
- Of de contrastverhouding van grote tekst minstens 3:1 is
Contrast van tekst in en op afbeeldingen
- Inventariseer de pagina
- Bepaal welke tekst er is in of op een afbeelding of kleurverloop:
- Afbeeldingen van tekst
- Tekst over een achtergrondafbeelding
- Tekst over een kleurverloop
- Bepaal voor elke tekst:
- Of het grote tekst is (minstens 24px, of minstens 18,66px en vetgedrukt)
- Of het normale tekst is (alle andere tekst)
- Bepaal welke tekst er is in of op een afbeelding of kleurverloop:
- Meet het contrast voor elke kleurcombinatie:
- Open Colour Contrast Analyser
- Kies de voorgrondkleur met de pipet
- Kies een pixel zonder anti-aliasing (geen vage rand)
- Kies de achtergrondkleur met de pipet
- Kies de pixel direct achter of rondom de letters die het minste contrast oplevert
- Bij een rand of schaduw die de letters helemaal omringt:
- Kies de kleur van de rand of schaduw als achtergrondkleur
- Controleer voor elke kleurcombinatie:
- Of de contrastverhouding van normale tekst minstens 4,5:1 is
- Of de contrastverhouding van grote tekst minstens 3:1 is
Test 2: Contrast vergroten met bedieningselementen op de pagina
Let op: Gebruik deze procedure alleen als de pagina zonder deze bedieningselementen niet voldoet.
- Inventariseer de pagina
- Bepaal of er bedieningselementen zijn voor het vergroten van de contrastverhouding
- Activeer de bedieningselementen voor het vergroten van de contrastverhouding
- Meet het contrast voor elke kleurcombinatie:
- Open Colour Contrast Analyser
- Haal de voorgrondkleur uit de CSS
- Haal de achtergrondkleur uit de CSS
- Controleer voor elke kleurcombinatie:
- Of de contrastverhouding van normale tekst minstens 4,5:1 is
- Of de contrastverhouding van grote tekst minstens 3:1 is
Test 3: Contrast vergroten met voorkeursinstelling
Let op: Gebruik deze procedure alleen als de pagina zonder deze voorkeursinstelling niet voldoet.
- Open de te testen webpagina in Chrome
- Open de ontwikkelaarstools
- Ga naar het paneel voor Renderen: “DevTools aanpassen en beheren” (drie verticale puntjes (⋮)) → Meer tools → Renderen
- Emuleer de CSS-mediafunctie
prefers-contrast: more
- Herlaad de pagina
- Inventariseer de pagina
- Bepaal of kleuren, randen of achtergronden zichtbaar zijn veranderd
- Meet het contrast voor elke kleurcombinatie:
- Open Colour Contrast Analyser
- Haal de voorgrondkleur uit de CSS
- Haal de achtergrondkleur uit de CSS
- Controleer voor elke kleurcombinatie:
- Of de contrastverhouding van normale tekst minstens 4,5:1 is
- Of de contrastverhouding van grote tekst minstens 3:1 is
Belangrijk om te weten
- Contrastverhoudingen worden niet afgerond: een contrastverhouding van 4,499:1 voldoet niet aan 4,5:1.
- Bij tekst in de code gaat de meting uit van de kleuren uit de CSS, niet van de kleuren op het scherm. Door anti-aliasing oogt tekst op het scherm vaak lichter.
- Een rand of schaduw die de letters helemaal omringt, telt als achtergrond van de tekst.
- Huisstijlkleuren vallen niet onder de uitzondering voor woordmerken. Die uitzondering geldt alleen voor de tekst in het logo of de merknaam zelf.
- 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.
Beoordeling
- De contrastverhouding tussen normale tekst en de achtergrond moet minstens 4,5:1 zijn
- De contrastverhouding tussen grote tekst en de achtergrond moet minstens 3:1 zijn
Bronnen
- WCAG 2.2 – Succescriterium 1.4.3 Contrast (minimum)
- WebAIM: Contrast and Color Accessibility (Engelstalig)