Je tekst valt weg tegen de achtergrond: zo krijg je genoeg contrast
Contrast is het verschil in helderheid tussen je tekst en de achtergrond. Lichtgrijze tekst op wit, of witte tekst op een felle kleur, ziet er strak uit in een ontwerp, maar is voor veel mensen slecht leesbaar.
In het kud-rapport Je tekst valt weg tegen de achtergrond
Waarom het uitmaakt
Iedereen leest slechter bij weinig contrast: in de zon, op een goedkoop scherm, of gewoon als je ogen moe zijn. Voor slechtzienden en ouderen is het vaak echt onleesbaar.
De toegankelijkheidsrichtlijnen (WCAG) vragen een contrastverhouding van minstens 4,5 op 1 voor gewone tekst, en 3 op 1 voor grote tekst. Sinds de Europese toegankelijkheidswet van juni 2025 moeten veel webshops en dienstverleners daaraan voldoen.
Zo los je het op
- Controleer je kleurcombinaties met een contrastchecker, zoals die van WebAIM of de kleurkiezer in Chrome DevTools.
- Maak lichte tekst donkerder, of de achtergrond lichter, tot je minstens 4,5 op 1 haalt.
- Grote tekst (vanaf ongeveer 24 pixels, of 19 pixels vet) mag 3 op 1.
- Let op tekst over foto's. Gebruik een donkere laag over de foto of zet de tekst ernaast.
- Vergeet knoppen, placeholders in formulieren en links niet; die zijn vaak het lichtst.
Op jouw platform
- Alle platforms
- Contrast regel je in je kleurinstellingen of CSS. Pas je merkkleur niet aan, maar kies een donkerdere of lichtere tint voor tekst.
Veelgestelde vragen
Mijn merkkleur haalt geen 4,5 op 1. Wat nu?
Gebruik je merkkleur voor vlakken, knoppen en grote koppen, en een donkerdere tint voor lopende tekst. Dan blijft je merk herkenbaar en is alles leesbaar.
Geldt dit ook voor logo's?
Nee. Logo's en puur decoratieve elementen zijn uitgezonderd van de contrasteisen.