Cette page gouverne les couleurs utilisées par l’interface Web. La fondation plus générale Couleur demeure la source pour les publications, les présentations et les autres applications hors Web.
Explorer le système# L’explorateur est généré depuis chaque jeton de couleur public. Utilisez les liens vers les groupes pour atteindre une collection et les boutons de filtre pour limiter les jetons visibles. Le sélecteur de thème local compare les collections claire et sombre sans modifier le thème du document. Chaque échantillon est un bouton : ouvrez-le pour inspecter la couche du jeton, la variable CSS, la déclaration source, les valeurs résolues, le premier plan approuvé et la preuve WCAG 2.2 lorsque cette association est déclarée.
Utiliser le thème sombre Couleur
Rôle
Inspecter
Rôles d’interface 8
Texte principal
color.ink
× Détails du jeton
Texte principal Couleur principale du texte pour les interfaces et les textes de marque à contraste élevé.
Couche Sémantique
Jeton color.ink
Variable CSS --color-ink
Copier
Déclaration source {color.palette.near-black}
Valeur claire #101010
Copier
Valeur sombre #f8f8f5
Copier
Premier plan approuvé color.paperPreuve de contraste WCAG 2.2 Clair
17.88:1
texte normal AA des WCAG
Sombre
17.88:1
texte normal AA des WCAG
Surface de lecture
color.paper
× Détails du jeton
Surface de lecture Couleur d’arrière-plan par défaut des pages.
Couche Sémantique
Jeton color.paper
Variable CSS --color-paper
Copier
Déclaration source {color.palette.warm-paper}
Valeur claire #f8f8f5
Copier
Valeur sombre #101010
Copier
Premier plan approuvé color.inkPreuve de contraste WCAG 2.2 Clair
17.88:1
texte normal AA des WCAG
Sombre
17.88:1
texte normal AA des WCAG
Séparateur discret
color.line
× Détails du jeton
Séparateur discret Couleur discrète pour les séparateurs et les bordures.
Couche Sémantique
Jeton color.line
Variable CSS --color-line
Copier
Déclaration source {color.palette.quiet-line}
Valeur claire #d7d7d2
Copier
Valeur sombre oklch(37.1% 0 none)
Copier
Premier plan approuvé color.inkPreuve de contraste WCAG 2.2 Clair
13.17:1
texte normal AA des WCAG
Sombre
9.76:1
texte normal AA des WCAG
Accent
color.accent
× Couleur d’accent principale pour l’emphase, les états actifs et les signaux de marque.
Couche Sémantique
Jeton color.accent
Variable CSS --color-accent
Copier
Déclaration source {color.palette.signal-orange}
Valeur claire #e6461a
Copier
Valeur sombre #e6461a
Copier
Premier plan approuvé color.palette.near-blackPreuve de contraste WCAG 2.2 Clair
4.76:1
texte normal AA des WCAG
Sombre
4.76:1
texte normal AA des WCAG
Texte d’accent
color.accent-text
× Détails du jeton
Texte d’accent Couleur d’accent adaptée au thème pour le texte de taille normale sur la surface de page.
Couche Sémantique
Jeton color.accent-text
Variable CSS --color-accent-text
Copier
Déclaration source {color.palette.deep-signal-orange}
Valeur claire #c43810
Copier
Valeur sombre #e6461a
Copier
Premier plan approuvé color.paperPreuve de contraste WCAG 2.2 Clair
5.03:1
texte normal AA des WCAG
Sombre
4.76:1
texte normal AA des WCAG
Sur l’accent
color.on-accent
× Détails du jeton
Sur l’accent Couleur de premier plan accessible pour le texte et les icônes sur l’arrière-plan d’accent.
Couche Sémantique
Jeton color.on-accent
Variable CSS --color-on-accent
Copier
Déclaration source {color.palette.near-black}
Valeur claire #101010
Copier
Valeur sombre #101010
Copier
Premier plan approuvé color.accentPreuve de contraste WCAG 2.2 Clair
4.76:1
texte normal AA des WCAG
Sombre
4.76:1
texte normal AA des WCAG
Blanc
color.white
× Blanc utilisé pour le texte inversé et les surfaces élevées.
Couche Sémantique
Jeton color.white
Variable CSS --color-white
Copier
Déclaration source {color.palette.white}
Valeur claire #ffffff
Copier
Valeur sombre #ffffff
Copier
Premier plan approuvé color.palette.near-blackPreuve de contraste WCAG 2.2 Clair
19.03:1
texte normal AA des WCAG
Sombre
19.03:1
texte normal AA des WCAG
Noir
color.black
× Noir utilisé pour les superpositions et les contrôles de code très contrastés.
Couche Sémantique
Jeton color.black
Variable CSS --color-black
Copier
Déclaration source {color.palette.black}
Valeur claire #000000
Copier
Valeur sombre #000000
Copier
Premier plan approuvé color.palette.warm-paperPreuve de contraste WCAG 2.2 Clair
19.74:1
texte normal AA des WCAG
Sombre
19.74:1
texte normal AA des WCAG
Échelle neutre 8
color.neutral.50
color.neutral.50
× Détails du jeton
color.neutral.50 Surface neutre la plus claire.
Couche Sémantique
Jeton color.neutral.50
Variable CSS --color-neutral-50
Copier
Déclaration source {color.palette.neutral.50}
Valeur claire oklch(98.5% 0 none)
Copier
Valeur sombre oklch(26.9% 0 none)
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
color.neutral.100
color.neutral.100
× Détails du jeton
color.neutral.100 Surface neutre claire.
Couche Sémantique
Jeton color.neutral.100
Variable CSS --color-neutral-100
Copier
Déclaration source {color.palette.neutral.100}
Valeur claire oklch(97% 0 none)
Copier
Valeur sombre oklch(37.1% 0 none)
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
color.neutral.300
color.neutral.300
× Détails du jeton
color.neutral.300 Ton neutre discret pour les repères et séparateurs.
Couche Sémantique
Jeton color.neutral.300
Variable CSS --color-neutral-300
Copier
Déclaration source {color.palette.neutral.300}
Valeur claire oklch(87% 0 none)
Copier
Valeur sombre oklch(43.9% 0 none)
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
color.neutral.400
color.neutral.400
× Détails du jeton
color.neutral.400 Ton neutre pour le texte secondaire.
Couche Sémantique
Jeton color.neutral.400
Variable CSS --color-neutral-400
Copier
Déclaration source {color.palette.neutral.400}
Valeur claire oklch(70.8% 0 none)
Copier
Valeur sombre oklch(55.6% 0 none)
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
color.neutral.500
color.neutral.500
× Détails du jeton
color.neutral.500 Ton neutre atténué pour le texte.
Couche Sémantique
Jeton color.neutral.500
Variable CSS --color-neutral-500
Copier
Déclaration source {color.palette.neutral.500}
Valeur claire oklch(55.6% 0 none)
Copier
Valeur sombre oklch(70.8% 0 none)
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
color.neutral.600
color.neutral.600
× Détails du jeton
color.neutral.600 Ton neutre pour le texte d’appoint.
Couche Sémantique
Jeton color.neutral.600
Variable CSS --color-neutral-600
Copier
Déclaration source {color.palette.neutral.600}
Valeur claire oklch(43.9% 0 none)
Copier
Valeur sombre oklch(87% 0 none)
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
color.neutral.700
color.neutral.700
× Détails du jeton
color.neutral.700 Ton neutre fort pour le texte et les bordures.
Couche Sémantique
Jeton color.neutral.700
Variable CSS --color-neutral-700
Copier
Déclaration source {color.palette.neutral.700}
Valeur claire oklch(37.1% 0 none)
Copier
Valeur sombre oklch(97% 0 none)
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
color.neutral.800
color.neutral.800
× Détails du jeton
color.neutral.800 Surface neutre foncée.
Couche Sémantique
Jeton color.neutral.800
Variable CSS --color-neutral-800
Copier
Déclaration source {color.palette.neutral.800}
Valeur claire oklch(26.9% 0 none)
Copier
Valeur sombre oklch(98.5% 0 none)
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
Couleurs d’état 6
status.note
status.note
× Détails du jeton
status.note Accent d’état informatif pour les notes et les avis de changement neutres.
Couche Sémantique
Jeton status.note
Variable CSS --status-note
Copier
Déclaration source oklch(62.3% 0.214 259.815)
Valeur claire oklch(62.3% 0.214 259.815)
Copier
Valeur sombre oklch(62.3% 0.214 259.815)
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
status.success
status.success
× Détails du jeton
status.success Accent d’état positif pour les éléments confirmés ou nouvellement disponibles.
Couche Sémantique
Jeton status.success
Variable CSS --status-success
Copier
Déclaration source oklch(72.3% 0.219 149.579)
Valeur claire oklch(72.3% 0.219 149.579)
Copier
Valeur sombre oklch(72.3% 0.219 149.579)
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
status.important
status.important
× Détails du jeton
status.important Accent d’état important pour les décisions qui demandent de l’attention.
Couche Sémantique
Jeton status.important
Variable CSS --status-important
Copier
Déclaration source oklch(62.7% 0.265 303.9)
Valeur claire oklch(62.7% 0.265 303.9)
Copier
Valeur sombre oklch(62.7% 0.265 303.9)
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
status.warning
status.warning
× Détails du jeton
status.warning Accent d’état d’avertissement pour les changements ou contraintes à surveiller.
Couche Sémantique
Jeton status.warning
Variable CSS --status-warning
Copier
Déclaration source oklch(76.9% 0.188 70.08)
Valeur claire oklch(76.9% 0.188 70.08)
Copier
Valeur sombre oklch(76.9% 0.188 70.08)
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
status.danger
status.danger
× Détails du jeton
status.danger Accent d’état critique pour les mises en garde, erreurs et obsolescences.
Couche Sémantique
Jeton status.danger
Variable CSS --status-danger
Copier
Déclaration source oklch(63.7% 0.237 25.331)
Valeur claire oklch(63.7% 0.237 25.331)
Copier
Valeur sombre oklch(63.7% 0.237 25.331)
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
status.archived
status.archived
× Détails du jeton
status.archived Accent d’état atténué pour le contenu archivé.
Couche Sémantique
Jeton status.archived
Variable CSS --status-archived
Copier
Déclaration source {color.neutral.500}
Valeur claire oklch(55.6% 0 none)
Copier
Valeur sombre oklch(55.6% 0 none)
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
Couleurs du code 6
color.code.background
color.code.background
× Détails du jeton
color.code.background Couleur d’arrière-plan des surfaces de code technique.
Couche Sémantique
Jeton color.code.background
Variable CSS --color-code-background
Copier
Déclaration source #272822
Valeur claire #272822
Copier
Valeur sombre #272822
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
color.code.foreground
color.code.foreground
× Détails du jeton
color.code.foreground Couleur de premier plan des surfaces de code technique.
Couche Sémantique
Jeton color.code.foreground
Variable CSS --color-code-foreground
Copier
Déclaration source #f8f8f2
Valeur claire #f8f8f2
Copier
Valeur sombre #f8f8f2
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
color.code.copy.success.foreground
color.code.copy.success.foreground
× Détails du jeton
color.code.copy.success.foreground Couleur du texte de confirmation du contrôle de copie.
Couche Sémantique
Jeton color.code.copy.success.foreground
Variable CSS --color-code-copy-success-foreground
Copier
Déclaration source oklch(87.1% 0.15 154.449)
Valeur claire oklch(87.1% 0.15 154.449)
Copier
Valeur sombre oklch(87.1% 0.15 154.449)
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
color.code.copy.success.border
color.code.copy.success.border
× Détails du jeton
color.code.copy.success.border Couleur de bordure de confirmation du contrôle de copie.
Couche Sémantique
Jeton color.code.copy.success.border
Variable CSS --color-code-copy-success-border
Copier
Déclaration source oklch(79.2% 0.209 151.711)
Valeur claire oklch(79.2% 0.209 151.711)
Copier
Valeur sombre oklch(79.2% 0.209 151.711)
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
color.code.copy.error.foreground
color.code.copy.error.foreground
× Détails du jeton
color.code.copy.error.foreground Couleur du texte d’erreur du contrôle de copie.
Couche Sémantique
Jeton color.code.copy.error.foreground
Variable CSS --color-code-copy-error-foreground
Copier
Déclaration source oklch(80.8% 0.114 19.571)
Valeur claire oklch(80.8% 0.114 19.571)
Copier
Valeur sombre oklch(80.8% 0.114 19.571)
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
color.code.copy.error.border
color.code.copy.error.border
× Détails du jeton
color.code.copy.error.border Couleur de bordure d’erreur du contrôle de copie.
Couche Sémantique
Jeton color.code.copy.error.border
Variable CSS --color-code-copy-error-border
Copier
Déclaration source oklch(70.4% 0.191 22.216)
Valeur claire oklch(70.4% 0.191 22.216)
Copier
Valeur sombre oklch(70.4% 0.191 22.216)
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
Alias de composants 11
component.announcement.background
component.announcement.background
× Détails du jeton
component.announcement.background Surface d’arrière-plan de la bannière d’annonce présente sur tout le site.
Couche Composant
Jeton component.announcement.background
Variable CSS --component-announcement-background
Copier
Déclaration source {color.paper}
Valeur claire #f8f8f5
Copier
Valeur sombre #f8f8f5
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
component.announcement.foreground
component.announcement.foreground
× Détails du jeton
component.announcement.foreground Couleur de texte de la bannière d’annonce présente sur tout le site.
Couche Composant
Jeton component.announcement.foreground
Variable CSS --component-announcement-foreground
Copier
Déclaration source {color.ink}
Valeur claire #101010
Copier
Valeur sombre #101010
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
component.announcement.border
component.announcement.border
× Détails du jeton
component.announcement.border Couleur de bordure signal de la bannière d’annonce présente sur tout le site.
Couche Composant
Jeton component.announcement.border
Variable CSS --component-announcement-border
Copier
Déclaration source {color.accent}
Valeur claire #e6461a
Copier
Valeur sombre #e6461a
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
component.announcement.link
component.announcement.link
× Détails du jeton
component.announcement.link Couleur de lien accessible de la bannière d’annonce présente sur tout le site.
Couche Composant
Jeton component.announcement.link
Variable CSS --component-announcement-link
Copier
Déclaration source {color.accent-text}
Valeur claire #c43810
Copier
Valeur sombre #c43810
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
component.avatar.background
component.avatar.background
× Détails du jeton
component.avatar.background Surface d’avatar de repli pour l’attribution d’une recommandation.
Couche Composant
Jeton component.avatar.background
Variable CSS --component-avatar-background
Copier
Déclaration source {color.neutral.100}
Valeur claire oklch(97% 0 none)
Copier
Valeur sombre oklch(97% 0 none)
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
component.avatar.foreground
component.avatar.foreground
× Détails du jeton
component.avatar.foreground Couleur des initiales de l’avatar de repli dans l’attribution d’une recommandation.
Couche Composant
Jeton component.avatar.foreground
Variable CSS --component-avatar-foreground
Copier
Déclaration source {color.ink}
Valeur claire #101010
Copier
Valeur sombre #101010
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
component.avatar.border
component.avatar.border
× Détails du jeton
component.avatar.border Couleur de contour de l’avatar dans l’attribution d’une recommandation.
Couche Composant
Jeton component.avatar.border
Variable CSS --component-avatar-border
Copier
Déclaration source {color.line}
Valeur claire #d7d7d2
Copier
Valeur sombre #d7d7d2
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
component.back-to-top.background
component.back-to-top.background
× Détails du jeton
component.back-to-top.background Surface derrière le lien de retour en haut.
Couche Composant
Jeton component.back-to-top.background
Variable CSS --component-back-to-top-background
Copier
Déclaration source {color.paper}
Valeur claire #f8f8f5
Copier
Valeur sombre #f8f8f5
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
component.back-to-top.foreground
component.back-to-top.foreground
× Détails du jeton
component.back-to-top.foreground Couleur du texte et de la flèche du lien de retour en haut.
Couche Composant
Jeton component.back-to-top.foreground
Variable CSS --component-back-to-top-foreground
Copier
Déclaration source {color.ink}
Valeur claire #101010
Copier
Valeur sombre #101010
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
component.back-to-top.border
component.back-to-top.border
× Détails du jeton
component.back-to-top.border Bordure au repos du lien de retour en haut.
Couche Composant
Jeton component.back-to-top.border
Variable CSS --component-back-to-top-border
Copier
Déclaration source {color.line}
Valeur claire #d7d7d2
Copier
Valeur sombre #d7d7d2
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
component.back-to-top.hover-border
component.back-to-top.hover-border
× Détails du jeton
component.back-to-top.hover-border Bordure au survol et au focus du lien de retour en haut.
Couche Composant
Jeton component.back-to-top.hover-border
Variable CSS --component-back-to-top-hover-border
Copier
Déclaration source {color.accent}
Valeur claire #e6461a
Copier
Valeur sombre #e6461a
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
Sorties de diagrammes 5
diagram.canvas
diagram.canvas
× Détails du jeton
diagram.canvas Arrière-plan de canevas pour les diagrammes dans les outils de rédaction pris en charge.
Couche Composant
Jeton diagram.canvas
Variable CSS --diagram-canvas
Copier
Déclaration source {color.paper}
Valeur claire #f8f8f5
Copier
Valeur sombre #f8f8f5
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
diagram.node
diagram.node
× Détails du jeton
diagram.node Surface de nœud de diagramme par défaut.
Couche Composant
Jeton diagram.node
Variable CSS --diagram-node
Copier
Déclaration source {color.paper}
Valeur claire #f8f8f5
Copier
Valeur sombre #f8f8f5
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
diagram.node-ink
diagram.node-ink
× Détails du jeton
diagram.node-ink Couleur par défaut des libellés de nœud de diagramme.
Couche Composant
Jeton diagram.node-ink
Variable CSS --diagram-node-ink
Copier
Déclaration source {color.ink}
Valeur claire #101010
Copier
Valeur sombre #101010
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
diagram.node-line
diagram.node-line
× Détails du jeton
diagram.node-line Couleur par défaut des bordures de nœud et des connecteurs de diagramme.
Couche Composant
Jeton diagram.node-line
Variable CSS --diagram-node-line
Copier
Déclaration source {color.line}
Valeur claire #d7d7d2
Copier
Valeur sombre #d7d7d2
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
diagram.accent
diagram.accent
× Détails du jeton
diagram.accent Couleur d’emphase des diagrammes et des flux actifs.
Couche Composant
Jeton diagram.accent
Variable CSS --diagram-accent
Copier
Déclaration source {color.accent}
Valeur claire #e6461a
Copier
Valeur sombre #e6461a
Copier
Premier plan approuvé Non déclaré Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.
Un jeton sans premier plan approuvé reste disponible pour son rôle structurel ou de composant documenté, mais l’explorateur n’en déduit aucune association de texte et ne prétend pas établir un résultat de contraste.
Associations de premiers plans approuvées# Les cartes ci-dessous se concentrent sur le plus petit ensemble de rôles d’interface nommés qui déclarent une relation de premier plan. Leurs couleurs et leurs résultats de contraste générés suivent le thème choisi localement.
Utiliser le thème sombre Couleurs de base Texte principal
Aa
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
Aa
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
Aa
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
Aa
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
Aa
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
Aa
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
Aa
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
Aa
Blanc color.white19.03:1 rapport de contraste · texte normal AA des WCAG19.03:1 rapport de contraste · texte normal AA des WCAG
Utiliser la couleur selon son rôle# Couleurs de base : établissent le contraste de lecture, la hiérarchie et les moments de marque les plus sombresCouleur de focus : utilisez Orange signal pour le focus clavier, l’état actif et les signaux limités qui doivent attirer l’attention; ce n’est jamais le seul moyen de communiquer un étatCouleurs de surface : fournissent les pages, les zones surélevées et les limites structurelles discrètes sans concurrencer le contenuLe contraste est une contrainte# L’association affichée respecte le niveau AA des WCAG 2.2 pour le texte normal lorsque la carte l’indique. Un indicateur de focus et les autres limites d’interface non textuelles porteuses de sens doivent présenter un contraste d’au moins 3:1 avec les couleurs adjacentes. Consultez Accessibilité pour les exigences qui gouvernent ce sujet.
Ne choisissez pas un premier plan selon une préférence visuelle seulement. Ajoutez d’abord l’association voulue aux métadonnées du jeton, puis laissez la carte générée et le contrôle de contraste rendre la décision vérifiable.