Tekst op een afbeelding: zeven manieren om woorden leesbaar te houden

Tekst op een afbeelding blijft leesbaar wanneer het vlak direct achter de letters rustig is en duidelijk lichter of donkerder dan de tekst. Zeven technieken brengen je daar: snijd bij zodat de woorden op een rustig vlak vallen, voeg een scrim toe, kleur de foto, vervaag hem, kader de tekst in, kies de inkt op lichtheid en zet woorden waar het oog al rust. De meeste goede ontwerpen combineren er twee, en geen ervan heeft een dicht vlak over de foto nodig.

Hetzelfde probleem speelt bij kleurverlopen en achtergronden met patronen; tekst op een kleurverloop en tekst op drukke achtergronden behandelen die gevallen. Deze gids richt zich op foto’s.

Waarom tekst verdwijnt op foto’s

Twee dingen maken letters moeilijk leesbaar op een afbeelding: weinig contrast en detail. Weinig contrast betekent dat de letters in lichtheid te dicht bij hun achtergrond liggen, zoals witte tekst op een heldere lucht. Detail betekent dat de achtergrond randen en texturen heeft op dezelfde schaal als de letters, zoals bladeren, mensenmassa’s of stof, zodat het oog het een niet van het ander kan scheiden. Elke techniek hieronder vermindert een van beide, of allebei.

Zeven technieken voor leesbare tekst op afbeeldingen

1. Snijd bij naar een rustig vlak

Verschuif de foto voordat je iets toevoegt. De meeste foto’s hebben een rustig gebied: lucht, een muur, water, schaduw, een onscherpe achtergrond. Snijd bij of verplaats de foto zodat de woorden daar vallen. Dit is de enige techniek die niets toevoegt, en daarom oogt ze het schoonst. Fotografeer je voor een ontwerp, laat die ruimte dan bewust vrij.

2. Voeg een scrim toe

Een scrim is een zacht verloop van donker naar transparant, alleen geplaatst waar de tekst staat, meestal onder- of bovenaan de afbeelding. Hij maakt het vlak achter de woorden donkerder en vervaagt voordat hij het onderwerp bereikt, zodat het grootste deel van de foto onaangeroerd lijkt. Het is de standaardtechniek voor kaarten, hero-afbeeldingen en videothumbnails.

.photo-card {
  position: relative;
  isolation: isolate;
}

.photo-card img {
  position: relative;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The scrim: dark at the bottom, clear by 60% up. */
.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.72) 0%,
    rgb(0 0 0 / 0.38) 30%,
    rgb(0 0 0 / 0) 60%
  );
}

.photo-card h2 {
  position: absolute;
  inset-inline: 1.5rem;
  bottom: 1.5rem;
  color: #fff;
  text-wrap: balance;
}

3. Kleur de foto: duotoon of een waslaag

Een foto omzetten naar twee kleuren (een duotoon) of er één kleurwaas overheen leggen drukt het bereik van lichtheid samen. De foto wordt rustiger en gelijkmatiger, en tekst in een contrasterende inkt leest er overal op. Het brengt foto’s ook in je merkkleuren, wat handig is wanneer beelden uit veel bronnen komen.

4. Vervaag achter de woorden

Vervaging haalt het fijne detail weg dat met letters vecht en behoudt de kleur en het licht van de foto. Vervaag de hele afbeelding voor een zachte achtergrond, of alleen een band achter de tekst. Gebruik genoeg vervaging om randen te laten verdwijnen; een lichte vervaging lijkt gewoon een fout. Onscherpe achtergronden beschrijft hoeveel je gebruikt.

5. Kader de tekst in

Soms is een vrij vlak het juiste antwoord: een band in een egale kleur, een paneel, of een gedeelde lay-out met de foto aan de ene kant en woorden aan de andere. Dat is eerlijk en altijd leesbaar. Haal de kleur van het kader uit de foto, zodat het bij het beeld hoort in plaats van het te bedekken.

6. Kies de inkt op lichtheid

Kies tussen lichte en donkere tekst op basis van de lichtheid van het vlak erachter, niet op de kleur die je mooi vindt. Controleer het daarna: mik op minstens 4,5:1 voor normale tekst en 3:1 voor grote tekst, de contrastniveaus van WCAG. Meet de lichtste en donkerste pixels achter de letters en test beide met een tool zoals de contrastchecker van WebAIM. Een zachte schaduw, zoals text-shadow: 0 1px 12px rgb(0 0 0 / 0.45), kan kleine tekst helpen, maar redt een slechte uitsnede niet.

7. Zet woorden waar het oog rust

Zet tekst waar de foto het oog naartoe leidt: langs een horizon, in de ruimte waar een persoon naar kijkt, of tegenover het onderwerp. Zet geen woorden over gezichten, handen of het product, en houd ze weg van randen die platforms met knoppen bedekken of op sommige schermen afsnijden.

Welke techniek je gebruikt voor welke foto

Tekst op afbeeldingen consistent houden binnen een merk

Als meerdere mensen posts maken, kies dan een of twee technieken en leg ze vast: bijvoorbeeld een scrim onderaan met een vaste sterkte voor elke fotopost, en een duotoon in merkkleuren voor citaten. In de Studio van Gradiently kun je foto’s bijsnijden en kleuren in de tinten van de Mark als mono, duotoon of een waslaag, zodat fotoposts in dezelfde familie vallen als de rest van je ontwerpen. Leg de regel vast in je stijlgids.