Bijna elke website opent met een foto en een tekst eroverheen. Dat werkt prachtig zolang die foto egaal is. Wordt hij lichter aan de rechterkant, dan valt de helft van je kop weg. En op een telefoon schuift het beeld, waardoor de tekst ineens boven het lichtste stuk staat.
Daar is een oplossing voor die zo eenvoudig is dat hij vaak wordt overgeslagen. Je legt er een laag tussen.
Die laag heet een overlay. Hij dempt de foto net genoeg om je tekst overal leesbaar te houden.
Het is een van de weinige ingrepen die zowel je vormgeving als je toegankelijkheid verbetert. En hij kost je twee regels code.
Een laag die je legt om tekst leesbaar te houden.
Wat is een overlay?
Een overlay is een laag over een afbeelding of over je pagina. Meestal is dat een halfdoorzichtig vlak in een effen kleur.
In CSS maak je dat met een kleur en een doorzichtigheid. Je legt bijvoorbeeld zwart met veertig procent dekking over je foto.
De twee soorten die je tegenkomt
De eerste is de verduistering over een afbeelding. Die gebruik je voor leesbaarheid.
De tweede is de laag achter een venster dat over je pagina komt. Die dimt de rest zodat de aandacht naar het venster gaat. Meer daarover lees je bij modal.
Ze heten allebei overlay, maar ze doen iets anders. De eerste is vormgeving, de tweede is gedrag.
Hoe je het goed instelt
Begin niet bij een percentage maar bij het resultaat. Meet het contrast tussen je tekst en de donkerste plek van je foto.
Wat ik aanhoud
Minimaal 4,5 staat tot 1 voor gewone tekst.
Minimaal 3 staat tot 1 voor grote koppen.
Meten op het lichtste punt onder je tekst, niet op het gemiddelde.
Testen met de foto die er straks echt staat.
Die derde is waar het meestal misgaat. Een foto is nergens egaal, en je kop staat toevallig net op de lucht.
Waarom witte tekst vaak niet werkt
Omdat foto’s zelden donker genoeg zijn. Een gevel in de zon, een lichte lucht of een witte muur en je tekst is weg.
Een donkere overlay lost dat op. Een verloop van donker naar doorzichtig werkt vaak fraaier dan een egale laag. Je ziet je foto dan nog.
Kies je kleur bewust en leg hem vast met een hexcode. Een overlay in je merkkleur oogt beter dan standaard zwart.
Zonder afbeelding
Ook dan kom je het tegen. Een laadscherm is een overlay die verschijnt terwijl er iets geladen wordt.
Wees daar terughoudend mee. Een laadscherm dat langer dan een seconde blijft staan, voelt traag. Trager dan een pagina die stukje bij beetje verschijnt.
Waarom het meer is dan vormgeving
Tekst die je zelf net kunt lezen op een groot scherm, is buiten in de zon onleesbaar. Datzelfde geldt voor iemand met een visuele beperking.
Een goede overlay is dus geen esthetische keuze maar een voorwaarde. Zeker in je hero, waar de belangrijkste boodschap staat.
Test hem op een telefoon in fel daglicht. Dat is de strengste situatie die er is. Het raakt bovendien direct aan accessibility.
Denk aan wisselende foto’s
Een ontwerp met een donkere voorbeeldfoto zegt weinig. Met de foto van je klant oogt het anders. Zeker als die later zelf beelden wisselt.
Een overlay maakt je opzet daar ongevoelig voor. Welke foto er ook komt, je tekst blijft leesbaar.
Een verloop in plaats van een vlak
Leg de donkerste laag daar waar je tekst staat en laat hem uitlopen naar doorzichtig. Dan houd je de sfeer van je foto vast.
Op mobiel schuift je tekst vaak naar een andere plek. Controleer of je verloop daar nog klopt, want dat gaat regelmatig mis.
Waar je het meet
Neem een schermafbeelding en gebruik een gratis contrastchecker op het lichtste punt onder je tekst.
Doe dat op de foto die er straks echt staat en niet op je ontwerpvoorbeeld. Meer over de kleurkant lees je bij hexcode.
Meer vragen over Overlay
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een overlay?
Waarvoor gebruik je een overlay op een afbeelding?
Hoe zorg je dat tekst op een foto leesbaar blijft?
Wat is het verschil tussen een overlay en een modal?
Waarom werkt witte tekst op een foto vaak niet?
Kun je een overlay gebruiken zonder afbeelding?
Wat is een overlay?
Om tekst leesbaar te houden op een foto met wisselend contrast.
Bijna elke website opent met een foto en een tekst eroverheen. Dat werkt prachtig zolang die foto egaal is.
Wordt hij lichter aan de rechterkant, dan valt de helft van je kop weg. En op een telefoon schuift het beeld, waardoor je tekst ineens boven het lichtste stuk staat.
Een overlay dempt de foto net genoeg om je tekst overal leesbaar te houden. Je ziet het beeld nog wel, alleen wat rustiger.
Het is een van de weinige ingrepen die zowel je vormgeving als je toegankelijkheid verbetert. En hij kost je twee regels code, dus er is geen goede reden om hem over te slaan.
Zet een laag onder je tekst als je met foto’s werkt die kunnen wisselen. Dan is je opzet ongevoelig voor de foto die er later komt.
Dat scheelt je een probleem op het moment dat je klant zelf beelden gaat vervangen.
Waarvoor gebruik je een overlay op een afbeelding?
Een overlay is een laag die je over een afbeelding of over je pagina legt. Meestal is dat een halfdoorzichtig vlak in een effen kleur.
In de opmaak maak je dat met een kleur en een doorzichtigheid. Je legt bijvoorbeeld zwart met veertig procent dekking over je foto.
Je komt twee soorten tegen. De eerste is de laag over een afbeelding, die je gebruikt om tekst leesbaar te houden.
De tweede is de laag achter een venster dat over je pagina komt. Die dimt de rest zodat de aandacht naar het venster gaat.
Ze heten allebei overlay, maar ze doen iets anders. De eerste is vormgeving, de tweede is gedrag. In dit begrip gaat het vooral over die eerste. Meer over de tweede lees je bij modal.
Kijk eens naar je eigen openingsfoto op een telefoon in de zon. Blijft je kop overal leesbaar, of valt hij weg boven het lichtste stuk?
Dat is de test die telt, want zo bekijkt een groot deel van je bezoek je site.
Hoe zorg je dat tekst op een foto leesbaar blijft?
Begin niet bij een percentage maar bij het resultaat. Meet het contrast tussen je tekst en de lichtste plek onder die tekst.
Ik houd minimaal 4,5 staat tot 1 aan voor gewone tekst en 3 staat tot 1 voor grote koppen. Er zijn gratis hulpmiddelen die dat berekenen.
Belangrijk is dat je meet op het lichtste punt en niet op het gemiddelde van je foto. Daar gaat het meestal mis.
Een foto is nergens egaal, en je kop staat toevallig net op de lucht of op een witte gevel.
Test het ook met de foto die er straks echt staat. Een ontwerp met een donkere voorbeeldfoto zegt niets over hoe het eruitziet met de foto van je klant.
Meet op het lichtste punt onder je tekst en niet op het gemiddelde van je foto. Daar gaat het bij vrijwel iedereen mis.
Gebruik daarvoor een gratis contrastchecker en een schermafbeelding van de echte situatie.
Waarom werkt witte tekst op een foto vaak niet?
Omdat foto’s zelden donker genoeg zijn. Een gevel in de zon, een lichte lucht of een witte muur en je tekst is weg.
Witte tekst werkt alleen op consequent donker beeld, en dat heb je zelden in de hand. Zeker niet als je klant later zelf foto’s wisselt.
Een donkere overlay lost dat op. Een verloop van donker naar doorzichtig werkt vaak fraaier dan een egale laag, want je ziet je foto nog.
Kies je kleur bewust en leg hem vast met een hexcode. Een overlay in je merkkleur oogt beter dan standaard zwart.
Test het resultaat op een telefoon in fel daglicht. Dat is de strengste situatie die er is, en wat daar leesbaar blijft, is overal leesbaar. Meer daarover lees je bij accessibility.
Kies je overlaykleur bewust in plaats van standaard zwart te gebruiken. Een laag in je merkkleur oogt rustiger en past bij de rest.
Leg die kleur vast met een code, zodat hij overal hetzelfde is.
Kun je een overlay gebruiken zonder afbeelding?
Ja, en dan kom je bij de tweede soort terecht.
Een laadscherm is een overlay die verschijnt terwijl er iets geladen wordt. Je ziet een gedimd scherm met een draaiend icoontje.
Wees daar terughoudend mee. Een laadscherm dat langer dan een seconde blijft staan, voelt trager dan een pagina die gewoon stukje bij beetje verschijnt.
Je blokkeert dan namelijk alles, ook de delen die al klaar waren. Dat is zelden in het voordeel van je bezoeker.
De andere variant is de gedimde achtergrond achter een venster. Die hoort er wel, want zonder dat onderscheid weet je bezoeker niet dat de rest van de pagina even niet werkt.
Wees terughoudend met laadschermen. Je blokkeert daarmee ook de delen die al klaar waren, en dat voelt trager dan het is.
Een pagina die stukje bij beetje verschijnt, wordt door bezoekers als sneller ervaren. Laat liever zien wat er al klaar is, dan wacht niemand op een leeg scherm.
Valt de tekst op je openingsfoto soms weg? Stuur me de link via het formulier hieronder. Ik meet het contrast op de lastigste punten van je afbeelding en zeg je welke laag je nodig hebt om het overal leesbaar te houden. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Bedekkingslaag, verduistering, kleurwaas
