Mesurer et corriger les contrastes

Mesurer le contraste ne nécessite pas de connaître la formule mathématique. Il faut les bons outils et savoir quoi mesurer. Corriger un contraste insuffisant ne nécessite pas de redesign complet, souvent, assombrir légèrement une couleur ou ajuster sa teinte suffit.

Les outils indispensables

Colour Contrast Analyser (TPGi) : la référence

Téléchargement : Colour Contrast Checker lien externe qui s'ouvre dans un nouvel onglet , gratuit, Windows et macOS.

C’est l’outil de référence pour la mesure manuelle. Son atout principal : la pipette couleur qui échantillonne directement sur l’écran, n’importe quelle application, n’importe quel site.

Utilisation :

Ouvrir Colour Contrast Analyser
Utiliser la pipette “Foreground” → cliquer sur la couleur du texte à l’écran
Utiliser la pipette “Background” → cliquer sur la couleur du fond
Lire le ratio et le verdict WCAG AA / AAA

Cet outil permet de mesurer le contraste dans des situations complexes : texte sur image, texte sur dégradé, couleurs calculées par CSS qui ne sont pas explicitement dans le code.

Firefox DevTools : intégré, pratique pour les cas simples

Dans l’onglet Accessibilité de Firefox DevTools, cliquer sur n’importe quel élément texte affiche son ratio de contraste calculé, en tenant compte des couleurs réelles rendues par le navigateur, pas des valeurs brutes du CSS.

Utile pour un diagnostic rapide. Insuffisant pour les cas complexes (texte sur image, overlays CSS semi-transparents).

axe DevTools : pour les audits automatiques

L’extension axe signale automatiquement les contrastes insuffisants lors d’un audit de page. Elle ne mesure pas les couleurs manuellement mais détecte les problèmes courants dans le code CSS.

Limitation : axe ne peut pas mesurer le contraste du texte sur image, il signale alors “à vérifier manuellement”.

Simulateurs de daltonisme

Chrome DevTools → Rendering → Emulate vision deficiencies : simule deutéranopie, protanopie, tritanopie, achromatopsie directement dans le navigateur
Coblis Color Blindness lien externe qui s'ouvre dans un nouvel onglet : simulateur en ligne, upload d’une capture d’écran

Ces outils ne mesurent pas le contraste mais permettent de vérifier si une palette de couleurs reste lisible pour différents types de daltonisme.

Le workflow d’audit contraste en quatre étapes

Étape 1 : Audit automatique avec axe

Lancer axe DevTools sur la page. Les contrastes insuffisants identifiables automatiquement (texte sur fond uni, couleurs définies en CSS) sont signalés avec le ratio mesuré et le ratio requis.

Exemple d’erreur axe : "Element has insufficient color contrast of 3.52 (foreground color: #767676, background color: #f5f5f5, font size: 14pt, font weight: normal). Expected contrast ratio of 4.5:1"

Ces erreurs sont les plus simples à corriger, axe donne la valeur exacte, il suffit d’ajuster la couleur jusqu’à atteindre le seuil.

Étape 2 : Audit manuel avec Colour Contrast Analyser

Pour les éléments qu’axe ne peut pas mesurer automatiquement :

Texte sur image (photos de bannière, images de fond)
Texte sur dégradé: mesurer au point le plus défavorable
Texte sur fond semi-transparent (overlays avec rgba ou opacity)
Icônes et composants d’interface (critère 3.3)
Indicateurs de focus (outline sur fond variable)

Méthode pour le texte sur image :

Faire une capture d’écran de la zone concernée
Ouvrir dans Colour Contrast Analyser
Pipette sur la couleur du texte
Pipette sur plusieurs points de l’image derrière le texte
Retenir le ratio le plus défavorable (le plus bas)

Si ce ratio minimum passe 4,5:1, le critère est respecté même si d’autres zones de l’image sont plus favorables.

Étape 3 : Simulation daltonisme

Activer la simulation de deutéranopie dans Chrome DevTools. Observer :

Les liens sont-ils encore distinguables du texte environnant ?
Les badges d’état (succès, erreur, avertissement) sont-ils encore distinguables entre eux ?
Les graphiques ou cartes sont-ils encore lisibles ?

Note les éléments où la distinction devient difficile ou impossible, ce sont des non-conformités (NC) potentielles sur le critère 3.1 (information par la couleur seule).

Étape 4 : Test niveaux de gris

/* Dans les DevTools → Console */
document.documentElement.style.filter = 'grayscale(1)';

Identifier les éléments qui perdent leur lisibilité ou leur distinctivité. Retirer le filtre avant de quitter les DevTools.

Les cas difficiles à mesurer

Texte sur image de fond (`background-image`)

Cas le plus fréquent sur les sites web : une section “hero” avec une photo et un titre blanc par-dessus.

La méthode pipette du Colour Contrast Analyser est la plus fiable. Mesurer à plusieurs endroits de l’image derrière le texte pour trouver le point le plus défavorable.

Si le contraste est insuffisant au point le plus défavorable, les solutions sont :

Ajouter un overlay semi-opaque entre l’image et le texte
Ajouter une ombre de texte forte (text-shadow: 0 1px 4px rgba(0,0,0,0.8))
Forcer l’image dans les tons sombres en CSS (filter: brightness(0.5))
Utiliser une couleur de texte plus foncée (si l’image est claire)

Couleurs calculées par CSS (`calc()`, variables CSS, OKLCH)

Les couleurs définies avec des fonctions CSS modernes ne sont pas toujours lisibles directement dans le code. Exemple :

--couleur-primaire: oklch(55% 0.2 240);
color: color-mix(in srgb, var(--couleur-primaire) 80%, white);

La couleur résultante dépend du moteur de rendu. Les DevTools Firefox et Chrome affichent la valeur calculée dans l’inspecteur d’éléments (format RGB ou HEX). Copier cette valeur dans Colour Contrast Analyser.

Texte sur gradient

background: linear-gradient(to right, #1A56A0, #0D2E5A);
color: white;

Le contraste varie le long du gradient. Mesurer à l’extrémité la plus claire (ici #1A56A0) pour le point le plus défavorable. Si le contraste passe à l’extrémité la plus claire, il passera partout.

Corriger dans `theme.json` sur WordPress

WordPress FSE centralise les couleurs dans theme.json. C’est le meilleur endroit pour corriger les contrastes. Une seule modification impacte toutes les instances de la couleur sur le site.

Vérifier la palette existante

{
  "settings": {
    "color": {
      "palette": [
        { "slug": "primaire",     "color": "#1A56A0", "name": "Primaire" },
        { "slug": "texte",        "color": "#1F2937", "name": "Texte" },
        { "slug": "fond",         "color": "#FFFFFF", "name": "Fond" },
        { "slug": "gris-clair",   "color": "#9CA3AF", "name": "Gris clair" }
      ]
    }
  }
}

Mesurer le ratio gris-clair (#9CA3AF) sur fond blanc (#FFFFFF) → 2,32:1. NC sévère.

Correction : assombrir gris-clair jusqu’à atteindre 4,5:1 sur fond blanc.

#9CA3AF sur #FFFFFF → 2,32:1 ✗
#6B7280 sur #FFFFFF → 4,63:1 ✓ (juste au-dessus du seuil)
#4B5563 sur #FFFFFF → 7,22:1 ✓✓ (niveau AAA)

{ "slug": "gris-clair", "color": "#6B7280", "name": "Gris texte" }

Corriger les styles par défaut des éléments

theme.json permet de définir le contraste par défaut de chaque élément :

{
  "styles": {
    "color": {
      "text": "#1F2937",
      "background": "#FFFFFF"
    },
    "elements": {
      "link": {
        "color": {
          "text": "#1A56A0"
        },
        "typography": {
          "textDecoration": "underline"
        }
      },
      "heading": {
        "color": {
          "text": "#111827"
        }
      },
      "button": {
        "color": {
          "text": "#FFFFFF",
          "background": "#1A56A0"
        }
      }
    }
  }
}

Vérifier chaque combinaison :

Texte (#1F2937) sur fond (#FFFFFF) → 16,1:1 ✓
Lien (#1A56A0) sur fond (#FFFFFF) → 5,9:1 ✓
Bouton texte (#FFFFFF) sur fond bouton (#1A56A0) → 5,9:1 ✓

Générateurs de palettes accessibles

Quand il faut choisir une nouvelle couleur (ou ajuster une existante) en garantissant le contraste, ces outils font le travail de recherche.

Accessible Palette

Génère une palette complète à partir d’une teinte, avec les ratios de contraste calculés pour chaque combinaison. Particulièrement utile pour créer une gamme cohérente de dégradés (du plus clair au plus foncé) dont les valeurs extrêmes passent les seuils WCAG.

Leonardo (Adobe) lien externe qui s'ouvre dans un nouvel onglet

Permet de définir des contraintes de contraste et génère les valeurs de couleur qui les respectent. Utile pour créer des couleurs d’état (succès, erreur, avertissement, info) qui passent toutes 4,5:1 sur fond blanc.

Coolors lien externe qui s'ouvre dans un nouvel onglet

Générateur de palettes populaire qui affiche les ratios de contraste pour chaque paire de couleurs. Moins précis qu’Accessible Palette mais plus rapide pour explorer des options.

APCA Contrast Checker lien externe qui s'ouvre dans un nouvel onglet

APCA (Advanced Perceptual Contrast Algorithm) est un algorithme de contraste plus précis que celui de WCAG 2.x, qui tient mieux compte des polices fines et des petites tailles. Il est prévu pour WCAG 3.0 (en préparation). Utile pour explorer ce que sera la prochaine génération de règles de contraste, sans remplacer le calcul WCAG 2.x actuel pour la conformité RGAA.

Récapitulatif — les outils par usage

Besoin	Outil
Mesurer le contraste d’un texte sur fond uni	Firefox DevTools ou axe
Mesurer le contraste sur une image ou un dégradé	Colour Contrast Analyser (pipette)
Audit automatique de toute la page	axe DevTools
Simuler le daltonisme	Chrome DevTools → Rendering
Test rapide niveaux de gris	DevTools Console : `document.documentElement.style.filter = 'grayscale(1)'`
Choisir une couleur accessible	Accessible Palette ou Leonardo
Corriger dans WordPress FSE	`theme.json` → palette et styles des éléments