# 05 — Contrastes : 6 échecs, tous sur des dégradés

> **Items** : Colour contrast — **required** · Forced colours mode — recommended
> **Verdict** : 🔴 **FAIL** · **Priorité : P2**
> **Effort estimé** : 0,5 jour (ajustements de palette sur les composants gradient)

## Constat

Contrastes calculés sur les **fonds réels** — presque tous les fonds colorés du site sont des `linear-gradient()` posés en `background-image` : un checker naïf qui ne lit que `background-color` verrait « fond blanc » partout et raterait la totalité des échecs.

### Échecs (seuils : 4.5:1 texte normal, 3:1 texte large / éléments non-texte)

| Élément | Couleurs | Ratio mesuré | Seuil |
|---|---|---|---|
| **Bouton cookies « Tout accepter »** | blanc sur gradient teal `#00b894→#2dd4aa` | **1.89–2.53** | 4.5 |
| **Icône WhatsApp (nav)** | vert `rgb(37,211,102)` sur blanc | **1.98** | 3.0 |
| **Carte « Spécialiste Nuisibles »** | blanc 17.6px/700 sur gradient teal | **2.53** | 4.5* |
| **Bouton cookies « Personnaliser »** | teal `#00b894` sur gradient navy | **4.33** | 4.5 |
| **Carte « Formation Pompier »** | blanc 17.6px/700 sur gradient rouge `#e74c3c→#c0392b` | **3.82** | 4.5* |
| **Anneau de focus sur la bannière cookies** | outline `#e6332a` sur gradient navy | **2.55** | 3.0 |

\* 17.6px gras n'atteint pas le seuil « texte large » (18.66px gras requis) — c'est bien 4.5:1 qui s'applique.

### Conformes (échantillon)

Corps de texte `#333`/blanc (11.8:1), H1 (16.3:1), nav (11:1), H2 rouge marque `#e6332a` en texte large (4.03 ≥ 3.0), bouton « Refuser » (6.16), liens in-content distingués par couleur **et** soulignement ✓, anneau de focus sur fonds clairs (4.31 ≥ 3.0) ✓.

## Correctifs

1. **Gradient teal** (« Tout accepter », « Spécialiste Nuisibles ») : assombrir les stops (ex. `#00805f→#009874`) pour amener le blanc ≥ 4.5:1 — ou passer le texte en ≥ 18.66px gras et viser ≥ 3:1, moins robuste.
2. **« Personnaliser »** : passer le texte teal en blanc, ou éclaircir le teal d'un cran (il ne manque que 0.17).
3. **Gradient rouge** (« Formation Pompier ») : assombrir vers `#b0392c→#96271c` (blanc ≥ 4.5:1).
4. **Icône WhatsApp** : utiliser le vert foncé de la marque WhatsApp `#128C7E` (≥ 3:1 sur blanc) ou poser l'icône sur une pastille de couleur.
5. **Anneau de focus** : conserver le rouge global, ajouter une variante pour surfaces sombres :
   ```css
   .cookie-banner :is(a, button):focus { outline-color: #fff; }
   ```

## Forced colors (Windows High Contrast) — absent

`forced-colors` : 0 occurrence dans le CSS. Or les boutons/cartes ci-dessus n'ont **aucune `border`** (formes définies par gradient + `box-shadow`) : en mode contraste forcé, gradients et ombres sont supprimés → les boutons de la bannière cookies et le CTA téléphone perdent toute délimitation visible. Les sémantiques natives (`<a>`, `<button>`) préservent l'opérabilité, mais pas la forme.

```css
@media (forced-colors: active) {
  button, .cta, [class*="cookie"] button { border: 1px solid CanvasText; }
}
```

## Vérification

- Recalculer les 6 ratios après ajustement (DevTools > inspecteur de contraste sur chaque stop du gradient — vérifier **le stop le plus défavorable**).
- Windows High Contrast (ou émulation DevTools `forced-colors: active`) : chaque bouton garde un contour visible.
- Non-régression : le rouge de marque `#e6332a` reste réservé au texte large / éléments non-texte (4.03:1 < 4.5 — jamais en texte courant sur blanc).