Fonds sépia et crème pour une lecture facile
Les fonds blancs vifs conviennent dans un résultat de recherche mais sont punitifs sur une longue lecture. Un ton papier chaud réduit l'éblouissement, calme le contraste, et vous permet de lire pendant une heure sans plisser les yeux. Voici comment en appliquer un à n'importe quel site avec JustZix.
Pourquoi ne pas simplement passer au sombre ?
Le mode sombre aide dans une pièce peu éclairée, mais pour la lecture longue, beaucoup trouvent le texte inversé plus difficile, pas plus facile — le texte clair sur fond noir peut scintiller et se brouiller, un effet appelé halation. Une surface claire et chaude garde le texte net tout en supprimant le bord dur du blanc pur. Pensez au papier d'un livre de poche plutôt qu'au papier de bureau.
La recette sépia classique
Le sépia associe un fond beige chaud à une couleur de texte brun profond. Appliquez-le à l'enveloppe de la page et à l'article :
html, body,
article, main, .post {
background-color: #f4ecd8 !important;
color: #4a3b28 !important;
}
article a { color: #8a5a2b !important; }
article a:hover { color: #6b3f17 !important; }
La combinaison brun sur beige garde un rapport de contraste confortablement au-dessus du plancher d'accessibilité tout en restant doux.
Un crème plus clair
Si le sépia semble trop lourd, le crème reste plus proche du blanc mais élimine l'éblouissement. Il fonctionne bien dans la lumière diurne normale :
html, body, article, main {
background-color: #faf6ec !important;
color: #33302a !important;
}
N'oubliez pas les surfaces en dessous
Beaucoup de sites superposent des cartes, des blocs de code et des citations avec leurs propres fonds. Si vous ne recolorez que le body, ces panneaux brillent encore en blanc. Balayez-les aussi :
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;
}
Adoucissez les images avec un filtre
Les photos à pleine saturation peuvent jurer avec une page chaude. Un filtre doux les intègre à la palette sans masquer les détails :
article img {
filter: sepia(0.12) brightness(0.97) !important;
}
Gardez la valeur sépia basse — environ 0,1 à 0,2 — pour que les photographies restent naturelles pendant que les captures d'écran et les schémas se fondent.
Ton selon l'heure
Pour la lecture du soir, vous pouvez assombrir un peu plus la surface avec un seul bloc plus chaud. Configurez une deuxième règle JustZix que vous activez après le coucher du soleil :
html, body, article, main {
background-color: #e8ddc2 !important;
color: #3a2f1f !important;
}
Faites-en une règle
Créez une règle JustZix, pointez son motif d'URL vers la publication que vous lisez le plus, collez les blocs de fond, de surfaces et d'image dans le panneau CSS, et enregistrez. Le site vous accueille maintenant avec du papier au lieu d'une ampoule. Gardez le basculement à portée de main pour passer entre le crème diurne et le sépia du soir.
Les fonds chauds fonctionnent magnifiquement avec une colonne contrainte et une hauteur de ligne spacieuse. Voyez l'article complémentaire sur le bon réglage de la largeur de colonne, parcourez nos exemples prêts à l'emploi pour des thèmes de lecture complets, et téléchargez JustZix pour reposer vos yeux.
Notez cet article
Aucune note — soyez le premier.