Zoekformulier
Contrast van tekst op een website
Over contrasten
Kleuren zijn belangrijk voor vormgeving omdat ze de sfeer bepalen en de aandacht van iemand kunnen trekken. Genoeg contrast tussen twee kleuren is van belang voor mensen die niet goed kunnen zien. Het helpt om het verschil tussen kleuren beter te zien.
Hoe sterk dit verschil is, noemen we de contrastverhouding. Dit laat zien of elementen makkelijk te onderscheiden zijn van de achtergrond, of van elkaar. Een contrastverhouding van 1:1 betekent dat elementen helemaal niet te onderscheiden zijn. Een verhouding van 21:1 is het grootste contrast. Dit is wit op zwart of zwart op wit.
Gebruik genoeg contrast voor tekst op een website
De contrastverhouding voor tekst moet voldoen aan minimaal 4,5:1. Dit geldt voor tekst die kleiner is dan 24px of 18,5px vetgedrukt.
De contrastverhouding voor grote tekst moet voldoen aan minimaal 3:1. Grote tekst is tekst die groter is dan 24px of 18,5px vetgedrukt.
| Kleiner dan 18px | 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 |
De contrasteisen gelden ook voor de verschillende statussen (zoals hover en focus) en voor placeholdertekst.
Over contrastverhouding
De contrastverhouding tussen twee kleuren wordt berekend met een formule die de relatieve lichtheid van de kleuren met elkaar vergelijkt.
De contrastverhoudingen worden niet afgerond. Als een contrastverhouding van minimaal 4,5:1 is vereist, dan is 4,49:1 dus nog niet genoeg.
Er zijn tools die kunnen helpen bij het berekenen van de contrastverhouding.
Colour Contrast Analyser (CCA)
Colour Contrast Analyser (CCA) is een programma dat kan worden gebruikt voor het meten van de contrastverhouding tussen twee kleuren. Vul de HEX- of RGB-kleurcodes in, of bepaal de de kleur met een pipet en het programma berekent de contrastverhouding.
Download Colour Contrast Analyser (CCA) voor Windows of Mac.
WebAIM Contrast Checker
De website WebAIM.org heeft een contrastchecker voor het meten van de contrastverhouding tussen twee kleuren. Vul de HEX-kleurcodes in en de website berekent de contrastverhouding.
Uitzonderingen voor contrast van tekst
Er zijn een paar uitzonderingen waarbij tekst niet aan de contrasteisen hoeft te voldoen. Dit geldt voor:
- Tekst die onderdeel is van een logo of merknaam.
- Tekst op elementen die inactief zijn.
- Tekst die puur decoratief is.
- Tekst die toevallig op een afbeelding staat maar niet informatief is.
- Tekst waarvan de weergave wordt bepaald door de user agent en niet wordt aangepast door de auteur.
Zie ook
- WCAG: 1.4.3 Contrast (minimum)
- Categorie: Ontwerp
- Categorie: Tekst
- Medium: Website
- Functiegroep: Contentspecialist of redacteur
- Functiegroep: Eigenaar huisstijl of vormgever