Aller au contenu principal
pruva

Étape 0 — Fondations

Styleguide

Les tokens de la section 4 du document de cadrage, tels qu'implémentés. Les ratios de contraste ci-dessous ne sont pas recopiés du document : ils sont calculés à l'affichage par la formule WCAG 2.1. Si un token change, cette page le dit.

Section 4.3

Palette

  • --encre#1B1F3BTexte principal, boutons primaires, pied de page
  • --craie#FAFAF7Fond général
  • --blanc#FFFFFFSurfaces, cartes
  • --surligneur#FFD447Mise en évidence, focus, point du logo
  • --conforme#14713FStatut « conforme »
  • --alerte#8A5A00Statut « à vérifier manuellement »
  • --nonconforme#B3261EStatut « non conforme »
  • --brume#5A5E75Texte secondaire
  • --trait#D8D8D2Bordures, séparateurs (décoratif)

Section 4.3, règle 1

Contrastes vérifiés

Ratios de contraste des couples texte / fond de la palette Pruva, calculés selon WCAG 2.1
TexteFondRatioNiveauAperçu
--encre--craie15.38:1AAATexte d'exemple
--encre--blanc16.08:1AAATexte d'exemple
--brume--craie6.10:1AATexte d'exemple
--brume--blanc6.38:1AATexte d'exemple
--encre--surligneur11.30:1AAATexte d'exemple
--blanc--encre16.08:1AAATexte d'exemple
--conforme--blanc6.06:1AATexte d'exemple
--alerte--blanc5.93:1AATexte d'exemple
--nonconforme--blanc6.54:1AATexte d'exemple

Deux points de vigilance

  • Focus. La section 4.8 prescrit un anneau jaune seul. Or --surligneur sur --craie ne fait que 1.36:1, loin des 3:1 exigés par WCAG 1.4.11 pour un indicateur de focus. L'anneau jaune est donc doublé d'un anneau --encre de 2 px qui comble l'offset. Le jaune reste visible car adjacent à l'encre (11.30:1).
  • Bordures de champs. --trait sur --blanc ne fait que 1.43:1. C'est acceptable pour un séparateur décoratif, mais interdit pour la bordure d'un champ de formulaire, qui doit atteindre 3:1 pour être identifiable. Les formulaires de l'Étape 1 utiliseront --brume (6.38:1).

Section 4.4

Typographie

Archivo

Titres et display

Aa Bb Cc 106

Atkinson Hyperlegible Next

Corps et interface

Aa Bb Cc 106

JetBrains Mono

Code et critères

RGAA 3.2

  • 61 pxDisplay XXL
  • 49 pxDisplay XL
  • 39 pxH1
  • 31 pxH2
  • 25 pxH3
  • 20 pxChapô
  • 16 pxCorps

Corps à 16 px minimum, interlignage 1,6, largeur de ligne plafonnée à --measure (70 caractères), jamais de texte justifié. Les liens de contenu sont soulignés, pas seulement colorés : voici un lien.

Section 4.6

Le surligneur de preuve

Un surlignage jaune à −1°, en pseudo-élément d'arrière-plan (jamais une image). Un seul par écran : s'il est partout, il ne met plus rien en évidence.

Amendes jusqu'à 50 000 € par service.

Section 4.8

Boutons

Bouton-lien

Zone cliquable de 44 × 44 px minimum, radius 10 px, libellés en verbes d'action précis. Naviguez à la touche Tab pour voir l'anneau de focus sur fond crème, blanc et encre.

Sections 4.3 et 4.8

Badges de statut

ConformeÀ vérifier manuellementNon conforme

Pastille, icône et libellé texte systématiques. Un statut n'est jamais porté par la couleur seule — c'est le critère RGAA 3.1, et c'est la première chose qu'on reprocherait à un outil qui vend de l'accessibilité.

Sections 4.5 et 4.8

Cartes et logo

Carte standard

Fond blanc, bordure --trait 1 px, radius 14 px, ombre quasi nulle.

pruva

Logotype : « pruva » en Archivo SemiBold, suivi du point carré jaune.