“Welkom bij ons”
In wit. Op een foto van een zonnig landschap. Links voldoende contrast. Rechts? Waar de lucht wit is? Onleesbaar.
Tekst op foto’s is een gok. Het contrast verschilt per pixel. En bij een dynamische afbeelding — denk aan een slider met verschillende foto’s — heb je geen enkele garantie.
Ik zie dit bij bijna elke website met een hero-afbeelding. De designer heeft het getest op de ene foto die bij de lancering werd gebruikt. Maar de marketeer wisselt de foto elke maand. En niemand test het contrast opnieuw.
Twee oplossingen:
- Een semi-transparante overlay achter de tekst:
.hero-overlay {
background-color: rgba(0, 0, 0, 0.6);
padding: 1rem;
}
.hero-tekst { color: white; }
- Een tekstvak met een ondoorzichtige achtergrond:
.hero-tekst {
background-color: #1F2937;
color: white;
padding: 0.5rem 1rem;
}
Optie 1 is subtieler. Optie 2 is veiliger.
De test: kijk niet alleen naar de huidige afbeelding. Vraag jezelf af: werkt dit ook als iemand een lichtere foto uploadt? Als het antwoord “misschien” is, heb je een overlay nodig.
