# Les classes globales de WordPress 6.8 au service d’un design system accessible

> « Les styles globaux garantissent la cohérence visuelle du site », rappelle la documentation officielle. Voici comment organiser les tokens de couleur pour qu'elle garantisse aussi le contraste.

- Auteur : Clément Hadrot
- Publié le : 2025-10-07
- Mis à jour le : 2025-10-07
- Catégorie : Accessibilité
- URL : https://wpmoderne.dev.wordpress-developpement.fr/accessibilite/classes-globales-wordpress-68-design-system-accessible/

## L’essentiel

- Les classes globales seules ne garantissent rien
- Il faut valider chaque paire au niveau des tokens
- Un contrôleur automatisé évite la régression

« Les styles globaux garantissent la cohérence visuelle de l'ensemble du site » : c'est ainsi que le [manuel de l'éditeur de blocs](https://developer.wordpress.org/block-editor/how-to-guides/themes/global-settings-and-styles/) présente le rôle de `theme.json`. Cohérence visuelle, certes, mais rien dans cette promesse ne garantit qu'une combinaison de couleur générée par ces classes globales respecte un seuil de contraste conforme aux WCAG. Avril 2025 : WordPress 6.8 étend encore les capacités de personnalisation des classes globales de couleur, rendant plus urgent de structurer les tokens en amont plutôt que de vérifier le contraste après coup, palette par palette.

Ce projet de design system, construit pour un réseau de sites institutionnels partageant une même charte, a fait le choix inverse de la vérification a posteriori : organiser les tokens de couleur pour qu'une combinaison non conforme devienne structurellement impossible à sélectionner dans l'éditeur.

## Le piège des classes globales en accès libre

Par défaut, `theme.json` expose chaque couleur de palette comme fond et comme texte, toutes combinaisons confondues, dans les contrôles de couleur de l'éditeur. Un rédacteur peut ainsi sélectionner un texte gris clair sur un fond blanc cassé, une combinaison passant sous le seuil de 4,5:1 exigé pour le texte courant, sans qu'aucun avertissement n'apparaisse dans l'interface d'édition.

## Structurer les tokens par paire validée

> L'essentiel à retenir : Les classes globales seules ne garantissent rien ; Il faut valider chaque paire au niveau des tokens ; Un contrôleur automatisé évite la régression

La solution retenue consiste à ne pas exposer les couleurs individuellement, mais à définir des styles de bloc préconfigurés (`blockStyles`) associant systématiquement un fond et un texte déjà validés ensemble, plutôt que de laisser le rédacteur composer librement sa propre combinaison.

```
{
  "settings": {
    "color": {
      "palette": [
        { "slug": "encre", "color": "#1a1a2e", "name": "Encre" },
        { "slug": "papier", "color": "#f7f7f2", "name": "Papier" }
      ],
      "duotone": []
    }
  },
  "styles": {
    "blocks": {
      "core/group": {
        "variations": {
          "encre-sur-papier": {
            "color": { "text": "#1a1a2e", "background": "#f7f7f2" }
          }
        }
      }
    }
  }
}
```

## Documenter le ratio de contraste dans le design system lui-même

Chaque paire validée est documentée avec son ratio de contraste calculé, directement dans la bibliothèque de composants partagée avec les designers : encre sur papier atteint 14,8:1, largement au-dessus du seuil AA, tandis qu'une combinaison écartée (gris moyen sur papier, à 3,1:1) figure explicitement comme contre-exemple dans la documentation, pour expliquer le choix aux équipes qui pourraient être tentées de la réintroduire.

- Ne jamais exposer une couleur de palette sans préciser sur quels fonds elle a été validée.
- Documenter les ratios calculés à côté de chaque paire, pas seulement le rendu visuel.
- Conserver une trace des combinaisons explicitement écartées, avec leur ratio, pour la mémoire du projet.

## Automatiser le contrôle de régression

Un script exécuté en intégration continue relit le fichier `theme.json` à chaque modification, recalcule le ratio de contraste de chaque variation de bloc déclarée, et fait échouer la build si un ratio descend sous 4,5:1 pour le texte courant ou 3:1 pour les grands titres. Cette vérification automatisée a intercepté deux régressions en six mois, introduites par des designers ajoutant une nouvelle variation sans recalculer le contraste.

## Ce que les classes globales de WordPress 6.8 changent concrètement

WordPress 6.8 enrichit la granularité des styles applicables par bloc et par variation, ce qui multiplie mécaniquement le nombre de combinaisons possibles si aucune structure n'encadre ces classes. Sur ce projet, cette granularité accrue a justifié de renforcer encore le contrôleur automatisé plutôt que de multiplier les vérifications manuelles, désormais hors de portée au vu du nombre de variations désormais disponibles.

## Pour aller plus loin

Un design system accessible par construction ne repose jamais sur la vigilance du rédacteur au moment de choisir une couleur : il repose sur une architecture de tokens qui rend la combinaison non conforme simplement indisponible dans l'interface. Les classes globales de WordPress 6.8 offrent la souplesse nécessaire pour construire cette architecture, à condition de l'organiser en amont plutôt que de la subir après un audit de contraste douloureux.