Colour-palette
Palette de marque#
La vue de marque conserve les valeurs de marque approuvées, indépendamment du thème de la page.
Couleurs de base
Noir presque pur
color.ink17.88:1 rapport de contraste · texte normal AA des WCAG
Papier chaud
color.paper17.88:1 rapport de contraste · texte normal AA des WCAG
Couleur d’accent
Orange signal
color.accent4.76:1 rapport de contraste · texte normal AA des WCAG
Texte d’accent accessible
color.accent-text5.03:1 rapport de contraste · texte normal AA des WCAG
Sur l’accent
color.on-accent4.76:1 rapport de contraste · texte normal AA des WCAG
Neutres
Ligne discrète
color.line13.17:1 rapport de contraste · texte normal AA des WCAG
Blanc
color.white19.03:1 rapport de contraste · texte normal AA des WCAG
Noir
color.black19.74:1 rapport de contraste · texte normal AA des WCAG
Palette Web par thème#
La vue Web résout les rôles de couleur sémantiques au moyen de la collection claire ou sombre active.
Couleurs de base
Texte principal
color.ink17.88:1 rapport de contraste · texte normal AA des WCAG17.88:1 rapport de contraste · texte normal AA des WCAG
Noir
color.black19.74:1 rapport de contraste · texte normal AA des WCAG19.74:1 rapport de contraste · texte normal AA des WCAG
Couleur de focus
Accent
color.accent4.76:1 rapport de contraste · texte normal AA des WCAG4.76:1 rapport de contraste · texte normal AA des WCAG
Texte d’accent
color.accent-text5.03:1 rapport de contraste · texte normal AA des WCAG4.76:1 rapport de contraste · texte normal AA des WCAG
Sur l’accent
color.on-accent4.76:1 rapport de contraste · texte normal AA des WCAG4.76:1 rapport de contraste · texte normal AA des WCAG
Couleurs de surface
Surface de lecture
color.paper17.88:1 rapport de contraste · texte normal AA des WCAG17.88:1 rapport de contraste · texte normal AA des WCAG
Séparateur discret
color.line13.17:1 rapport de contraste · texte normal AA des WCAG9.76:1 rapport de contraste · texte normal AA des WCAG
Blanc
color.white19.03:1 rapport de contraste · texte normal AA des WCAG19.03:1 rapport de contraste · texte normal AA des WCAG
Exemple
{{< colour-palette >}}Quand l’utiliser
Des cartes de couleurs de marque ou Web avec les noms de jetons, les groupes de rôles et les rapports de contraste WCAG générés.
Implémentation
layouts/shortcodes/colour-palette.htmlOptions
| Option | Lu par le gabarit du shortcode |
|---|---|
view | Lu par le gabarit du shortcode |
colourPaletteInstance | Lu par le gabarit du shortcode |
Manifeste d’interface
- Nature
- Shortcode
- Catégorie
- Données
- Statut
- Implémenté
- Implémentation
- Shortcode:
layouts/shortcodes/colour-palette.htmlDonnées:data/brand/tokens.ymlCSS:assets/css/generated/themes.cssassets/css/site.css