Iris est l’accent de la signature générale. Les neutres construisent les niveaux de lecture et de surface. Les couleurs fonctionnelles servent aux états ; elles ne sont pas des accents interchangeables pour décorer une page.
Iris · signature
Neutres · structure
Rose · déclinaison
- Employer les rôles sémantiques dans l’interface :
text,surface,accent, plutôt qu’une valeur HEX dispersée dans le code. - Réserver l’accent aux actions, aux éléments sélectionnés et aux repères de marque.
- Les bordures décoratives peuvent rester discrètes. Un champ ou un contrôle qui dépend de sa bordure utilise
border-strong.
Le mode Sombre n’est pas une inversion de pixels. Les fonds, contrastes, ombres et images sont choisis par rôle. La hiérarchie doit rester lisible lorsque deux surfaces sombres sont proches.
| Rôle | Clair | Sombre |
|---|---|---|
| bg | #F6F5F2 | #111115 |
| surface | #FFFFFF | #1B1920 |
| surface-raised | #FFFFFF | #27232E |
| surface-soft | #EEEAF1 | #27232E |
| text | #24212B | #F1EDF3 |
| text-muted | #6E6876 | #A7A2AF |
| border | #DCD6E1 | #39333F |
| border-strong | #8C8296 | #8B8197 |
| accent | #73559A | #C5B5ED |
| accent-hover | #654787 | #D5C9F2 |
| on-accent | #FFFFFF | #211B2C |
| accent-soft | #EDE6F6 | #30253E |
| on-accent-soft | #594070 | #DDD0F5 |
| success | #286648 | #92D7B2 |
| success-soft | #EDF7F1 | #162B21 |
| warning | #805A10 | #E9C873 |
| warning-soft | #FFF5DA | #302814 |
| danger | #A33348 | #F2A4AE |
| danger-soft | #FBEDEF | #351E26 |
| info | #355C92 | #A5C7F3 |
| info-soft | #ECF2FA | #1B293D |
| overlay | #24212B66 | #00000099 |
| focus | #73559A | #C5B5ED |
Une application peut disposer d’un accent secondaire validé. frame peut utiliser Rose pour les commandes de capture et les sélections ; les fonds, typographies, espacements et états restent orbit. Cette souplesse sert la reconnaissance du produit, pas une palette différente à chaque écran.
- Une seule famille d’accent principal par contexte.
- Ne pas mélanger Iris, Rose et toutes les couleurs fonctionnelles comme des boutons de même importance.
- Un nouvel accent nécessite une matrice de contraste et des états hover, focus, sélection et erreur.
| Déclinaison | Clair | Sombre | Usage |
|---|---|---|---|
| Signature Iris | #73559A | #C5B5ED | Référence ayael et nouveau produit sans accent propre. |
| Rose frame | #8F4F73 | #E7BBD4 | Déclinaison de produit ; vérifier ses paires de texte. |
Les rapports affichés sont calculés sur les couleurs sRGB opaques du système. Le texte courant vise au moins 4,5:1. Les grands textes et les limites visuelles de contrôles visent au moins 3:1 selon le critère applicable. Une paire validée ne certifie pas une page complète.
Clair
| Paire | Texte | Fond | Rapport | Seuil |
|---|---|---|---|---|
| Texte / fond | #24212B | #F6F5F2 | 14.51:1 | ≥ 4.5:1 ✓ |
| Texte / surface | #24212B | #FFFFFF | 15.82:1 | ≥ 4.5:1 ✓ |
| Secondaire / fond | #6E6876 | #F6F5F2 | 4.93:1 | ≥ 4.5:1 ✓ |
| Secondaire / surface | #6E6876 | #FFFFFF | 5.38:1 | ≥ 4.5:1 ✓ |
| Bouton principal | #FFFFFF | #73559A | 6.01:1 | ≥ 4.5:1 ✓ |
| Accent / surface | #73559A | #FFFFFF | 6.01:1 | ≥ 4.5:1 ✓ |
| Accent doux | #594070 | #EDE6F6 | 7.21:1 | ≥ 4.5:1 ✓ |
| Bord de champ / surface | #8C8296 | #FFFFFF | 3.65:1 | ≥ 3:1 ✓ |
| Focus / fond | #73559A | #F6F5F2 | 5.51:1 | ≥ 3:1 ✓ |
| Succès | #286648 | #EDF7F1 | 6.22:1 | ≥ 4.5:1 ✓ |
| Alerte | #805A10 | #FFF5DA | 5.70:1 | ≥ 4.5:1 ✓ |
| Erreur | #A33348 | #FBEDEF | 5.91:1 | ≥ 4.5:1 ✓ |
| Information | #355C92 | #ECF2FA | 6.02:1 | ≥ 4.5:1 ✓ |
Sombre
| Paire | Texte | Fond | Rapport | Seuil |
|---|---|---|---|---|
| Texte / fond | #F1EDF3 | #111115 | 16.28:1 | ≥ 4.5:1 ✓ |
| Texte / surface | #F1EDF3 | #1B1920 | 15.04:1 | ≥ 4.5:1 ✓ |
| Secondaire / fond | #A7A2AF | #111115 | 7.56:1 | ≥ 4.5:1 ✓ |
| Secondaire / surface | #A7A2AF | #1B1920 | 6.99:1 | ≥ 4.5:1 ✓ |
| Bouton principal | #211B2C | #C5B5ED | 8.91:1 | ≥ 4.5:1 ✓ |
| Accent / surface | #C5B5ED | #1B1920 | 9.29:1 | ≥ 4.5:1 ✓ |
| Accent doux | #DDD0F5 | #30253E | 9.87:1 | ≥ 4.5:1 ✓ |
| Bord de champ / surface | #8B8197 | #1B1920 | 4.71:1 | ≥ 3:1 ✓ |
| Focus / fond | #C5B5ED | #111115 | 10.05:1 | ≥ 3:1 ✓ |
| Succès | #92D7B2 | #162B21 | 8.98:1 | ≥ 4.5:1 ✓ |
| Alerte | #E9C873 | #302814 | 9.01:1 | ≥ 4.5:1 ✓ |
| Erreur | #F2A4AE | #351E26 | 7.84:1 | ≥ 4.5:1 ✓ |
| Information | #A5C7F3 | #1B293D | 8.43:1 | ≥ 4.5:1 ✓ |
Ce calculateur permet de contrôler une couleur de texte et son fond. Le résultat distingue le seuil du texte courant, celui du grand texte et le seuil renforcé 7:1. Il ne remplace pas une recette avec lecteur d’écran, clavier et contenus réels.
Les grandes surfaces restent neutres. Un aplat accentué sert un choix ou une information clairement hiérarchisée. Les dégradés sont réservés aux illustrations et couvertures ; ils ne sont pas nécessaires au fonctionnement d’un bouton ou d’un formulaire.
- Ne pas coder une information uniquement par sa couleur : ajouter un mot, une icône ou un motif.
- Ne pas placer un texte secondaire translucide sur une image sans mesurer le contraste obtenu.
- Conserver les photos dans leurs couleurs naturelles ; un changement de thème n’impose pas leur inversion.
- Éviter les noirs écrasés et les blancs lumineux sur des surfaces de lecture prolongée.
- Les valeurs CMJN et tons directs se déterminent avec le profil d’impression : un HEX n’est pas une référence Pantone.