Wat is een overlay?
Een overlay is een doorzichtige laag die over een afbeelding of over je hele pagina ligt. Meestal is dat een kleur met een zekere doorzichtigheid.
Je gebruikt hem om tekst op een foto leesbaar te houden.
Zonder zo’n laag valt witte tekst weg in elke lichte plek van je beeld.
Hoe hij werkt
Je legt een kleur over je afbeelding en stelt in hoe doorzichtig die is. Bij dertig procent zie je je foto nog goed en is je tekst al leesbaar.
Meer daarover lees je bij css.
Waar je hem tegenkomt
Bovenaan vrijwel elke website, in de grote afbeelding met een kop erover.
Meer daarover lees je bij hero.
Het andere gebruik
Een donkere laag over je hele pagina wanneer er een venster opent. Die maakt duidelijk dat de rest even niet aan de beurt is.
Meer daarover lees je bij het verschil met een modal.
Mijn vuistregels
- Dertig tot vijftig procent dekking als startpunt.
- Kies een kleur uit je huisstijl, niet zomaar zwart.
- Controleer het contrast met een meter.
- Test met je donkerste en lichtste foto.
Die laatste voorkomt dat één foto je hele ontwerp onderuit haalt.
Wat je ermee wint
Leesbaarheid zonder dat je je foto hoeft te vervangen. En een rustiger beeld, want je overlay dempt de drukte in de afbeelding.
Meer daarover lees je bij accessibility.
Welke kleur
Zwart is de veilige keuze, maar een donkere tint uit je huisstijl oogt persoonlijker.
Meer daarover lees je bij hexcode.