Le contrat de design de ce site

Le fichier DESIGN.md décrit ce site aux assistants de code : couleurs, typographie, composants. Notre extension design-md-a11y y ajoute les réglages d’accessibilité que le format ne couvre pas.

Ouvrir le fichier brut Voir l’extension design-md-a11y

Résultat du contrôle

Objectif : zéro erreur au linter de Google, et aucun écart aux règles de l’extension design-md-a11y.

Contrôles du fichier
Contrôle	Comment	Résultat, 21 octobre 2026
Linter de Google	`npx @google/design.md lint DESIGN.md`, version 0.4.0	0 erreur ; 7 avertissements, dont 5 dus à l’extension
Extension design-md-a11y	Outil design-md-a11y-lint 0.1.0, règles du skill 1.2.0 ; contrastes calculés par l’outil	0 constat

Les 5 avertissements dus à l’extension sont attendus. Google signale la clé a11y, qu’il ne connaît pas, la propriété borderColor des deux champs, absente de son schéma de composant, et les deux couleurs de focus, citées seulement par les réglages d’accessibilité. Notre outil les sépare des autres constats. Les 2 avertissements restants portent sur les filets rule et rule-dark, qu’aucun composant n’utilise : ce sont des filets décoratifs, décrits dans le fichier.

En mode sombre, l’anneau de focus est déclaré dans a11y.themes.dark et mesuré contre les fonds sombres : 8,95:1 sur le fond, 8,17:1 sur la surface, 6,65:1 sur la teinte. Les bordures de champ, rattachées aux champs par borderColor, sont mesurées contre le fond de page : 4,37:1 en mode clair, 5,44:1 en mode sombre.

Le linter est l’outil de contrôle automatique du format. « Anticipé » désigne un critère des WCAG 2.2 que le RAWeb 1.1 ne contient pas encore.

Couleurs

Une seule couleur d’accent. Chaque couleur de texte est déclarée avec sa couleur de fond.

Contrastes vérifiés par script le 20 octobre 2026
Paire	Mode clair	Mode sombre
Texte sur fond	16,64:1#1A1A1A sur #FAFAF7	16,08:1#EDEDE8 sur #111111
Texte secondaire sur fond	8,51:1#4A4A46 sur #FAFAF7	9,16:1#B5B5AE sur #111111
Accent, liens et focus sur fond	5,77:1#0F6E6F sur #FAFAF7	8,95:1#5CC2C2 sur #111111
Accent sur surface	5,33:1#0F6E6F sur #F1F1EC	8,17:1#5CC2C2 sur #1B1B1A
Accent sur offre phare	5,13:1#0F6E6F sur #E3EFEE	6,65:1#5CC2C2 sur #15302F
Texte du bouton principal	6,03:1#FFFFFF sur #0F6E6F	8,95:1#111111 sur #5CC2C2
Bordure de champ sur fond	4,37:1#767670 sur #FAFAF7	5,44:1#8A8A84 sur #111111
Bordure de champ sur surface	4,03:1#767670 sur #F1F1EC	4,97:1#8A8A84 sur #1B1B1A
Erreur sur fond	6,29:1#B42318 sur #FAFAF7	8,27:1#FF8A80 sur #111111
Succès sur fond	6,26:1#1E6B34 sur #FAFAF7	10,60:1#7FD49A sur #111111
Alerte sur fond	6,51:1#8A4B00 sur #FAFAF7	10,71:1#F5B860 sur #111111

Seuils : 4,5:1 pour le texte ; 3:1 pour les grands textes, les composants et l’anneau de focus.

Typographie

Atkinson Hyperlegible Next pour le texte, Atkinson Hyperlegible Mono pour le code et les tokens.

Échelle typographique
Rôle	Taille	Graisse	Interlignage
Titre d’accueil	2,375 à 4,25 rem	800	1,1
Titre de page	2,125 à 3,25 rem	800	1,15
Titre de section	1,75 à 2,25 rem	700	1,15
Intertitre	1,375 rem	700	1,25
Texte courant	1,125 rem	400	1,55
Texte secondaire	1 rem	400	1,5
Code et tokens	0,9375 rem	400	1,6

Règles d’accessibilité

Réglages ajoutés par l’extension design-md-a11y, sous la clé a11y (format 1.2).

Extrait de DESIGN.md

a11y:
  focus:
    ringColor: "{colors.focus}"
    ringWidth: 3px
    ringOffset: 2px
    style: solid
    scrollMargin: 96px
  target:
    minSize: 24px
    recommendedSize: 44px
  motion:
    respectReducedMotion: true
    maxAnimationDuration: 0.5s
  text:
    spacing:
      lineHeight: 1.5
      paragraphSpacing: 2em
      letterSpacing: 0.12em
      wordSpacing: 0.16em
  reflow:
    minViewportWidth: 320px
  themes:
    dark:
      focus:
        ringColor: "{colors.focus-dark}"

Valeurs et références
Section	Valeur	Référence
`a11y.focus`	Anneau de 3 px, décalé de 2 px ; marge de défilement de 96 px	RAWeb 10.7 et 3.3 ; WCAG 2.4.11, anticipé
`a11y.target`	24 px minimum, 44 px visés	WCAG 2.5.8, anticipé ; 2.5.5 (niveau AAA)
`a11y.motion`	Préférence « mouvement réduit » respectée ; animations de 0,5 s au plus	RAWeb 13.8 ; mouvement réduit : WCAG 2.3.3 (niveau AAA)
`a11y.text.spacing`	Valeurs du test que la page doit supporter : interlignage 1,5 ; paragraphes 2 em ; lettres 0,12 em ; mots 0,16 em	RAWeb 10.12 ; WCAG 1.4.12
`a11y.reflow`	Aucun défilement horizontal à 320 px	RAWeb 10.11 ; WCAG 1.4.10
`a11y.themes.dark`	Anneau de focus du mode sombre : `{colors.focus-dark}`, #5CC2C2	RAWeb 10.7 et 3.3

Ce que le format ne couvre pas

Le format DESIGN.md (Google Labs, spécification alpha) décrit l’apparence, pas le comportement. Notre extension y ajoute, sous la clé a11y, les réglages d’accessibilité visuels qui lui manquent : contour de focus, taille des cibles, animations, espacement du texte, affichage sur petit écran. Le comportement au clavier, les rôles ARIA et la structure des pages ne sont pas dans le fichier : ils se vérifient à l’audit.

La spécification du format DESIGN.md, sur GitHub (en anglais)