← Alle Beiträge

Anleitungen

Sepia- und Creme-Hintergründe für müheloses Lesen

Helle weiße Hintergründe sind in einem Suchergebnis in Ordnung, aber bei einer langen Lektüre quälend. Ein warmer Papierton schneidet die Blendung weg, beruhigt den Kontrast und lässt Sie eine Stunde lang lesen, ohne zu blinzeln. So wenden Sie einen mit JustZix auf jede Seite an.

Warum nicht einfach Dunkelmodus?

Der Dunkelmodus hilft in einem schwach beleuchteten Raum, aber für das Lesen langer Texte finden viele Menschen invertierten Text schwerer, nicht leichter — heller Text auf Schwarz kann schimmern und verschwimmen, ein Effekt namens Halation. Eine warme helle Fläche hält den Text scharf, während sie die harte Kante reinen Weißes entfernt. Denken Sie an Taschenbuchpapier statt Büropapier.

Das klassische Sepia-Rezept

Sepia paart einen warmen beigen Hintergrund mit einer tiefen braunen Textfarbe. Wenden Sie es auf die Seitenhülle und den Artikel an:

html, body,
article, main, .post {
  background-color: #f4ecd8 !important;
  color: #4a3b28 !important;
}
article a { color: #8a5a2b !important; }
article a:hover { color: #6b3f17 !important; }

Die Kombination Braun-auf-Beige hält ein Kontrastverhältnis bequem über der Barrierefreiheitsuntergrenze, während sie sanft bleibt.

Ein helleres Creme

Wenn Sepia zu schwer wirkt, bleibt Creme näher an Weiß, beseitigt aber die Blendung. Es funktioniert gut bei normalem Tageslicht:

html, body, article, main {
  background-color: #faf6ec !important;
  color: #33302a !important;
}

Vergessen Sie nicht die Flächen darunter

Viele Seiten schichten Karten, Code-Blöcke und Blockzitate mit ihren eigenen Hintergründen. Wenn Sie nur den Body umfärben, leuchten diese Tafeln immer noch weiß. Fegen Sie sie ebenfalls:

article pre,
article blockquote,
.card, .panel, figure {
  background-color: #efe7d2 !important;
  color: #4a3b28 !important;
  border-color: #d8cba8 !important;
}
input, textarea {
  background-color: #fbf8ef !important;
  color: #33302a !important;
}

Bilder mit einem Filter mildern

Fotos bei voller Sättigung können mit einer warmen Seite kollidieren. Ein sanfter Filter bindet sie in die Palette ein, ohne Details zu verbergen:

article img {
  filter: sepia(0.12) brightness(0.97) !important;
}

Halten Sie den Sepia-Wert niedrig — um 0,1 bis 0,2 — damit Fotografien natürlich bleiben, während sich Screenshots und Diagramme einfügen.

Tageszeit-Ton

Für das Lesen am Abend können Sie die Fläche mit einem einzigen wärmeren Block etwas weiter abdunkeln. Richten Sie eine zweite JustZix-Regel ein, die Sie nach Sonnenuntergang einschalten:

html, body, article, main {
  background-color: #e8ddc2 !important;
  color: #3a2f1f !important;
}

Es zu einer Regel machen

Erstellen Sie eine JustZix-Regel, richten Sie ihr URL-Muster auf die Publikation, die Sie am meisten lesen, fügen Sie die Hintergrund-, Flächen- und Bildblöcke in den CSS-Bereich ein und speichern Sie. Die Seite begrüßt Sie nun mit Papier statt einer Glühbirne. Halten Sie den Umschalter griffbereit, damit Sie zwischen Tages-Creme und Abend-Sepia wechseln können.

Warme Hintergründe funktionieren wunderbar zusammen mit einer begrenzten Spalte und einer großzügigen Zeilenhöhe. Siehe den Begleitbeitrag zum richtigen Einstellen der Spaltenbreite, durchstöbern Sie unsere fertigen Beispiele für vollständige Lese-Themes und laden Sie JustZix herunter, um Ihren Augen eine Pause zu gönnen.

Bewerte diesen Beitrag

Noch keine Bewertungen — sei der Erste.

Probiere es selbst aus

Installiere JustZix und füge ein beliebiges Snippet aus diesem Artikel ein. Zwei Minuten von null bis zu einer funktionierenden Regel auf allen deinen Geräten.

JustZix holen

Funktionen · So funktioniert es · Beispiele · Anwendungsfälle