Hoe controleer je het contrast van je kleuren?
Het contrast van je kleuren controleren doe je met een online contrastcontrole: je vult twee hexcodes in en krijgt de verhouding terug.
Voor gewone tekst wil je minstens 4,5 op 1. Voor grote tekst mag 3 op 1.
Dat kost een halve minuut per kleurenpaar.
Wat je controleert
Elke combinatie die op je site voorkomt: tekst op je achtergrond, tekst op je knop, en bijschriften op een gekleurd vlak.
Die laatste is meestal de zwakste. Meer daarover lees je bij accessibility.
Waar het het vaakst misgaat
Bij lichtgrijze tekst op wit. Dat oogt rustig in een ontwerp en is voor een deel van je bezoekers slecht leesbaar.
Ook bij tekst op een foto, waar het contrast per plek verschilt.
In je browser
De inspectiefunctie toont bij een geselecteerd element vaak direct de contrastverhouding, met een waarschuwing als die te laag is.
Dat is sneller dan losse codes invullen. Meer daarover lees je bij css.
Mijn vuistregels
- Minstens 4,5 op 1 voor lopende tekst.
- Ook je knoppen en je bijschriften controleren.
- Tekst op een foto altijd met een laag eronder.
- Controleer één keer bij het vastleggen van je kleuren, niet per pagina.
Die laatste is de kern: leg het goed vast en je hoeft het nooit meer te doen.
Waarom het ertoe doet
Voor mensen met een verminderd zicht, maar net zo goed voor iedereen die buiten in de zon op zijn telefoon kijkt.
Dat is een veel grotere groep dan je denkt. Meer daarover lees je bij design system.
Wat je doet als het niet haalt
Maak je tekstkleur donkerder of je achtergrond lichter. Meestal is een kleine aanpassing genoeg.
Meer daarover lees je bij hoeveel kleuren een huisstijl nodig heeft.