Der Hero mit Bild

Bei einem Foto hinter einer Überschrift geraten Gestaltung und Lesbarkeit aneinander. Das Bild ist der Grund, warum jemand hinschaut, der Text der Grund, warum jemand bleibt. Damit beides geht, braucht es fünf Teile, und jeden davon kennst du schon.

01 / 05Die Teile

• Die Ersatzfarbe unter dem Foto, damit der weiße Text auch trägt, solange es noch lädt.
• cover und background-position, damit das Bild die Fläche füllt und der interessante Teil übrig bleibt.
• Der Verlauf, diesmal als Werkzeug und nicht als Schmuck.
• Der Textschatten als letzte Absicherung an den hellsten Stellen.
• Die Tokens, damit im Regelblock keine freie Zahl mehr steht.

02 / 05Die Reihenfolge entscheidet

<section class="hero falsch">
  <h2>Verlauf hinten in der Liste</h2>
</section>

<section class="hero richtig">
  <h2>Verlauf vorn in der Liste</h2>
</section>

.hero {
  min-height: 180px;
  padding: 24px;
  margin-bottom: 16px;
  color: #ffffff;
  font-family: system-ui, sans-serif;
  background-color: #18181b;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero h2 {
  margin: 0;
  font-size: 28px;
}

/* Der Verlauf steht hinten und liegt damit unter dem
   Foto. Zu sehen ist von ihm nichts. */
.falsch {
  background-image:
    url("/lernen/media/hero-1600.jpg"),
    linear-gradient(to bottom, rgb(24 24 27 / 85%), rgb(24 24 27 / 0));
}

/* Dieselben zwei Ebenen, nur andersherum notiert. */
.richtig {
  background-image:
    linear-gradient(to bottom, rgb(24 24 27 / 85%), rgb(24 24 27 / 0)),
    url("/lernen/media/hero-1600.jpg");
}

background-image nimmt mehrere Ebenen als kommagetrennte Liste, und die erste liegt oben. Für einen abgedunkelten Hero kommt also der Verlauf zuerst und das Foto danach.

In beiden Kästen im Beispiel stehen dieselben zwei Zeilen, nur andersherum. Beim oberen liegt der Verlauf unter dem Foto, und du siehst von ihm überhaupt nichts.

Das ist die Sorte Fehler, die man lange sucht, weil beide Zeilen richtig geschrieben sind und der Browser nichts meldet. Es ist gültiges CSS, das nicht tut, was gemeint war.

03 / 05Schleier oder Verlauf

<section class="hero schleier">
  <h2>Gleichmäßiger Schleier</h2>
  <p>Das ganze Bild liegt hinter Milchglas.</p>
</section>

<section class="hero verlauf">
  <h2>Verlauf von oben</h2>
  <p>Oben trägt das Bild den Text, unten bleibt es sichtbar.</p>
</section>

.hero {
  min-height: 200px;
  padding: 24px;
  margin-bottom: 16px;
  color: #ffffff;
  font-family: system-ui, sans-serif;
  background-color: #18181b;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero h2 {
  margin: 0 0 8px 0;
  font-size: 28px;
}

.hero p {
  margin: 0;
}

/* Eine Fläche mit Deckkraft dunkelt überall gleich ab,
   auch dort, wo gar kein Text steht. */
.schleier {
  background-image:
    linear-gradient(rgb(24 24 27 / 55%), rgb(24 24 27 / 55%)),
    url("/lernen/media/linsensuppe-1200.jpg");
}

/* Der Verlauf dunkelt dort ab, wo der Text steht,
   und lässt den Rest des Bildes in Ruhe. */
.verlauf {
  background-image:
    linear-gradient(to bottom, rgb(24 24 27 / 85%), rgb(24 24 27 / 0)),
    url("/lernen/media/linsensuppe-1200.jpg");
}

Die naheliegende Lösung für lesbaren Text auf einem Bild ist eine dunkle Fläche mit Deckkraft über allem. Sie funktioniert und kostet das halbe Bild.

Ein Verlauf von dunkel nach durchsichtig macht dasselbe nur dort, wo es nötig ist. Oben macht er den Text lesbar, unten bleibt das Foto, wie es ist. Wenn du beide nebeneinander siehst, ist die Wahl leicht.

Zwei Kleinigkeiten dazu.

Die durchsichtige Farbe schreibe ich als dieselbe Farbe mit Deckkraft null, also rgb(24 24 27 / 0) statt transparent. Beides ergibt seit Safari 15 vom Herbst 2021 in jedem Browser dasselbe, aber an der ausgeschriebenen Variante siehst du beim Lesen gleich, worauf der Verlauf zuläuft.

Die Richtung schreibe ich als to bottom aus, weil der Text oben sitzt und der Verlauf dort dunkel anfangen soll. Ohne Richtung käme dasselbe heraus, denn to bottom ist die Voreinstellung. Ausgeschrieben muss aber niemand nachdenken. Wer sich vertut und to top schreibt, sieht es sofort. Dann ist unten abgedunkelt, wo nichts steht, und die Überschrift oben ist frei.

04 / 05Wie weit der Verlauf reicht

<section class="hero ganz">
  <h2>bis 100 Prozent</h2>
</section>

<section class="hero halb">
  <h2>bis 60 Prozent</h2>
</section>

.hero {
  min-height: 220px;
  padding: 24px;
  margin-bottom: 16px;
  color: #ffffff;
  font-family: system-ui, sans-serif;
  background-color: #18181b;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero h2 {
  margin: 0;
  font-size: 28px;
}

/* Der Verlauf zieht sich über die ganze Höhe. Auch unten
   liegt noch ein Rest Dunkelheit auf dem Bild. */
.ganz {
  background-image:
    linear-gradient(to bottom, rgb(24 24 27 / 85%) 0%, rgb(24 24 27 / 0) 100%),
    url("/lernen/media/linsensuppe-1200.jpg");
}

/* Bei 60 Prozent ist der Verlauf durch. Die unteren 40
   Prozent zeigen das Bild unangetastet. */
.halb {
  background-image:
    linear-gradient(to bottom, rgb(24 24 27 / 85%) 0%, rgb(24 24 27 / 0) 60%),
    url("/lernen/media/linsensuppe-1200.jpg");
}

Die Farbstopps legen fest, wo der Verlauf zu Ende ist. Bei rgb(24 24 27 / 0) 60% ist von oben gezählt ab sechzig Prozent der Höhe Schluss. Die unteren 40 Prozent zeigen das Foto unangetastet.

Ich fange mit 60 bis 70 Prozent und etwa 85 Prozent Deckkraft am oberen Ende an. Wie weit du dann gehst, hängt davon ab, wie viel Text oben steht und wie unruhig das Bild ist.

05 / 05Kontrast an der schlechtesten Stelle

Ob weißer Text auf diesem Hintergrund lesbar ist, sieht man nicht. Das misst man. Nur geht das hier nicht.

An der Überschrift fehlt im Auskunftsstreifen die Zeile Kontrast, die bei den Farben noch dastand. Das ist Absicht und kein Aussetzer. Hinter der Schrift liegt ein Foto, und ein Foto hat nicht den einen Farbwert, gegen den sich rechnen ließe. Für die halbdurchsichtige Verlaufsschicht darüber gilt dasselbe. Nennt ein Werkzeug hier trotzdem eine Zahl, gilt sie nur für eine Stelle, und welche das ist, steht nicht dabei.

Die Zielwerte gelten trotzdem. WCAG 2.2 verlangt im Kriterium 1.4.3 ein Verhältnis von 3 zu 1 für große Schrift und 4,5 zu 1 für Fließtext.

Bei einem Bild gilt das an der schlechtesten Stelle, nicht im Durchschnitt. Deshalb steht am Ende noch der Textschatten. Er kostet nichts, fällt niemandem auf und rettet die Zeile an der einen hellen Stelle, an die niemand gedacht hat.

Passt ein Bild partout nicht, nehme ich ein anderes, eines mit einer ruhigen, dunklen Fläche dort, wo der Text steht.

In der Aufgabe bekommt der Hero seinen Verlauf und wird damit fertig.