Un titre lisible sur une photo

🎯 Objectif

Garder un texte lisible sur une image de fond, quelle que soit la photo, avec un bandeau semi-transparent et une couleur de secours.

📖 Exemple

Le sentier de la forêt pose son titre foncé sur une photo très sombre — le code, et ce que le navigateur en fait :

<header class="sentier">
    <h1>Sentier des sapins</h1>
</header>

.sentier {
    padding: 48px 16px;
    background-color: #14532d;
    background-image: url("/images/fonds/foret.svg");
    background-size: cover;
    background-position: center;
}

.sentier h1 {
    margin: 0;
    color: #1e293b;
    background-color: rgba(255, 255, 255, 0.8);
}

Un texte foncé sur des sapins foncés serait illisible. Le bandeau blanc à 80 %, posé derrière le titre, éclaircit juste ce qu'il faut sous les lettres, et laisse la forêt deviner par transparence.

Pourquoi 80 % ? Parce qu'on raisonne sur le pire des cas. On ne choisit pas les pixels qui tombent sous chaque lettre. Le pire, ici, c'est un pixel tout noir : le bandeau posé dessus donne un gris clair #cccccc, et le titre foncé atteint 9:1 sur ce gris. Sur un pixel plus clair, le contraste ne peut que monter. Le minimum est atteint partout, quelle que soit la photo.

Regarde aussi la première règle : background-color est là en plus de l'image. Elle est peinte dessous, donc invisible tant que la photo s'affiche. C'est une couleur de secours : si le fichier manque ou si la connexion est lente, la boîte reste vert sapin, au lieu de laisser le texte sur du blanc.

♿ Un texte sur une image, c'est l'erreur de contraste la plus répandue du web. Le bandeau semi-transparent est la parade la plus simple : il garantit le contraste sans cacher la photo.

📝 Consigne

La bannière du club photo a son lac, et un titre blanc. Sur l'eau sombre, ça passe. Sur le ciel clair et la neige, il disparaît.

Deux déclarations, une dans chaque règle :

1. Dans la règle .banniere h1 : un bandeau noir à 60 % d'opacité derrière le titre, rgba(0, 0, 0, 0.6)
2. Dans la règle .banniere : la couleur de secours #1e293b, un bleu nuit, pour que le titre blanc reste lisible même sans la photo