# « Element has insufficient color contrast » sur un bandeau promotionnel

> Un audit axe signale un contraste insuffisant sur le bandeau coloré d'un site de billetterie. Diagnostic du dégradé fautif, correctif de la palette, et jeton de couleur pour éviter la récidive.

- Auteur : WordPress Développement
- Publié le : 2021-09-26
- Mis à jour le : 2021-09-26
- Catégorie : Accessibilité
- URL : https://www.wpmoderne.fr/accessibilite/contraste-insuffisant-bandeau-billetterie/

## L’essentiel

- Le dégradé de fond fait chuter le contraste à ses extrémités seulement
- Un ratio mesuré au point le plus clair du dégradé évite le faux positif inverse
- Un jeton de couleur validé une fois pour toutes évite de refaire le calcul à chaque campagne

`Elements must have sufficient color contrast (WCAG 2 AA)` : ce message, remonté par l'extension axe DevTools sur le bandeau promotionnel de la page d'accueil d'un site de billetterie, ne pointait qu'un seul élément parmi la dizaine de bandeaux similaires du site. Le texte, blanc, semblait pourtant lisible sur le fond orange de la bannière lors d'un contrôle visuel rapide.

## Symptôme : un seul bandeau signalé sur toute la campagne

Le site affiche régulièrement des bandeaux promotionnels pour ses événements à la une, tous construits avec le même composant, mais avec une couleur de fond différente par campagne. Sur cette campagne précise, axe DevTools signale un contraste insuffisant entre le texte blanc du bandeau et son fond, alors que les campagnes précédentes, avec d'autres couleurs, n'avaient déclenché aucune alerte.

## Diagnostic : un dégradé qui varie de teinte sur sa largeur

Le fond du bandeau n'est pas une couleur unie mais un dégradé CSS, du jaune vif à gauche vers un orange plus soutenu à droite :

```
.bandeau-promo {
  background: linear-gradient(to right, #ffd166, #f77f00);
  color: #ffffff;
}
```

Le texte blanc reste parfaitement lisible sur la partie droite du dégradé, où l'orange foncé offre un contraste confortable. Mais à gauche, sur le jaune clair `#ffd166`, le ratio de contraste avec le blanc tombe autour de 1,6:1, très en dessous du seuil de 4,5:1 requis pour un texte courant en niveau AA. L'outil d'audit calcule le contraste au point le moins favorable du fond sous le texte, ce qui explique pourquoi ce bandeau précis se fait signaler alors que d'autres, avec une teinte plus uniforme, passaient sans alerte.

> L'essentiel à retenir : Le dégradé de fond fait chuter le contraste à ses extrémités seulement ; Un ratio mesuré au point le plus clair du dégradé évite le faux positif inverse ; Un jeton de couleur validé une fois pour toutes évite de refaire le calcul à chaque campagne

## Correctif : resserrer la palette du dégradé

Deux approches corrigent ce problème. La première consiste à resserrer le dégradé vers des teintes plus sombres sur toute sa largeur, en gardant l'esprit visuel de la campagne :

```
.bandeau-promo {
  background: linear-gradient(to right, #d97706, #b45309);
  color: #ffffff;
}
```

Ce dégradé, vérifié au point le plus clair (`#d97706`) comme au plus sombre, dépasse le seuil de 4,5:1 avec le texte blanc sur toute sa largeur. La seconde approche, si la teinte claire doit être conservée pour des raisons de charte, consiste à foncer la couleur du texte plutôt que le fond, en réservant le blanc à la seule partie sombre du dégradé grâce à un halo de texte ou un fond semi-opaque local derrière le texte.

## Prévention : un jeton de couleur validé une fois

Pour éviter de refaire ce calcul à chaque nouvelle campagne promotionnelle, la solution durable consiste à figer un jeton de couleur de fond validé, plutôt que de laisser chaque campagne choisir librement ses teintes :

```
:root {
  --bandeau-promo-debut: #d97706;
  --bandeau-promo-fin: #b45309;
}
.bandeau-promo {
  background: linear-gradient(to right, var(--bandeau-promo-debut), var(--bandeau-promo-fin));
  color: #ffffff;
}
```

La charte graphique peut continuer à varier la teinte dominante (rouge pour une campagne, bleu pour une autre) en dupliquant ce jeton par variante, à condition que chaque nouvelle paire de couleurs soit vérifiée une fois avec un outil de mesure de contraste avant d'être ajoutée à la liste des jetons disponibles.

### Ce que cette alerte ne couvre pas

- Le contraste du texte courant du site (articles, descriptions d'événements) suit une chaîne de vérification distincte, non concernée par ce correctif ponctuel.
- Un bandeau qui utiliserait une image de fond plutôt qu'un dégradé CSS échappe totalement à ce type de détection automatisée et demande un contrôle manuel.

> Sur ce type de faux négatif inversé, où seule une partie du dégradé pose problème, je recommande de toujours vérifier le contraste aux deux extrémités de n'importe quel dégradé de fond, jamais uniquement au centre où l'œil se pose en premier.

## En résumé

Un dégradé de fond peut faire chuter le contraste sur une partie seulement de sa largeur, ce qu'un contrôle visuel rapide ne détecte pas mais qu'un outil comme axe DevTools révèle précisément. Resserrer la palette ou fixer un jeton de couleur validé une bonne fois pour toutes évite de refaire ce diagnostic à chaque nouvelle campagne promotionnelle.