Aller au contenu

Aide:Couleurs

Une page de Wikipédia, l'encyclopédie libre.
(Redirigé depuis Aide:Couleur)
Wikicode
Cette page ne concerne que le wikicode (liens « modifier le code »).
Niveau avancé
Nous vous recommandons de lire auparavant la recommandation « Limitez l'usage de la couleur dans les articles »
Important : Certains contenus de Wikipédia nécessitent d'utilisation de couleurs différentes. L'utilisation de ces couleurs doit être faite avec beaucoup de précautions.

L'utilisation des couleurs doit impérativement respecter les normes d’accessibilité.

Pour les éléments de navigation (infobox, palettes, tableaux explicatifs, etc.) la charte graphique Wikimédia s'applique.

Avec l'introduction du WP:mode sombre, tout usage de couleurs doit désormais rendre correctement à la fois en mode clair et en mode sombre. La méthode privilégiée est l'utilisation de TemplateStyles.

Dans tous les cas limitez l'usage de la couleur dans les articles et en cas de doute consultez l'atelier accessibilité de Wikipédia.

Quelles couleurs ?

[modifier | modifier le code]

L'usage de la couleur est fortement déconseillé dans les articles. Ailleurs, il conviendra de choisir des couleurs qui respectent la charge graphique et les personnes qui consultent Wikipédia.

Le fameux adage « les goûts et les couleurs ça ne se discute pas » ne se dément pas, et quelle que soit la couleur que vous choisirez, vous ne ferez sûrement pas l'unanimité.

Les couleurs ont un sens. C'est pour cela qu'il existe une charge graphique : fond blanc, boutons et liens bleus, liens visités violet, cadres gris, etc. Par conséquent, il ne faut pas tenter d'imiter des éléments existants, sous peine de perturber les personnes qui lisent Wikipédia. L'accessibilité des couleurs doit être prise en compte.

Si vous hésitez dans le choix d'une couleur, orientez-vous vers une couleur neutre (gris ou pastel) pour un fond et foncée pour les objets devant ressortir sur fond clair (comme les polices de caractères) ; il est rappelé que l'usage de la couleur est fortement déconseillé pour le texte normal des articles et que la mise en couleurs d'éléments du type ligne de bus ou enseigne n'est pas accepté. Pensez à vous référer aux discussions qui ont pu avoir lieu sur le sujet auprès des projets éditoriaux concernés.

Si l'usage des couleurs est vraiment nécessaire, ou si vous voulez réaliser une carte, consultez Aide:Accessibilité des couleurs pour vous aider à choisir des couleurs accessibles aux déficients visuels de la couleur, et consultez les membre du projet:charte graphique.

Avec l'introduction du mode sombre, tout usage de couleurs doit désormais rendre correctement à la fois en mode clair et en mode sombre. La méthode privilégiée est l'utilisation de TemplateStyles.

Texte simple

[modifier | modifier le code]

Avec un modèle

[modifier | modifier le code]

Avec le nom de la couleur

[modifier | modifier le code]

Attention, la plupart de ces modèles n'ont pas été adaptés pour une utilisation avec le mode sombre. Vérifier bien que le rendu est correct à la fois en mode clair et sombre pour toute utilisation.

Pour mettre le mot « paon » en bleu et le mot « herbe » en vert, il suffit d'utiliser les modèles {{bleu}} et {{vert}} comme ceci : {{bleu|paon}} et {{vert|herbe}}. On obtient ainsi paon et herbe. Pour cela, cliquez sur le bouton « Modèle » puis écrivez entre les accolades le nom de la couleur désirée, par exemple rouge. Ensuite, vous devez mettre le signe |. Enfin, écrivez le (groupe de) mot(s) que vous voulez mettre en couleur. Vous pouvez obtenir tous les modèles de mise en couleur rapide sur la page dédiée.

Le modèle {{Couleur de la police}} est plus puissant, puisqu'il permet de modifier la couleur d'un texte et la couleur du fond, pour du texte simple ou un lien. Il utilise les noms anglais des couleurs HTML.

Avec un code couleur

[modifier | modifier le code]

Exemple : {{Coloré|#9966CC|chaussette}} donne chaussette

Avec des balises « span »

[modifier | modifier le code]

Avec le nom HTML de la couleur

[modifier | modifier le code]

Pour donner une couleur à un texte et au fond, il faut utiliser : <span class="notheme" style="background-color:triplet hexadécimal ou nom de la couleur; color:triplet hexadécimal ou nom de la couleur">texte</span>

Veillez bien à toujours indiquer à la fois la couleur du texte et celle du fond pour conserver le même rendu en mode clair et sombre. L'usage d'une couleur de fond sans couleur de texte associée est considérée comme une erreur de lint et est listé dans Spécial:LintErrors/night-mode-unaware-background-color.

Exemples :

  • <span class="notheme" style="background-color:white; color:red">texte rouge sur fond blanc</span> donne texte rouge sur fond blanc
  • <span class="notheme" style="background-color:white; color:green">texte vert sur fond blanc</span> donne texte vert sur fond blanc
  • <span class="notheme" style="background-color:white; color:blue">texte bleu sur fond blanc</span> donne texte bleu sur fond blanc
  • <span class="notheme" style="background-color:white; color:DeepPink">texte rose sur fond noir</span> donne texte rose sur fond noir
  • <span style="color:var(--color-emphasized, black)">texte adaptatif noir ou blanc</span> donne texte adaptatif noir ou blanc

Dans le dernier exemple, la définition de la couleur de fond n'est pas nécessaire car on a utilisé une variable css qui s'adapte naturellement au mode clair / sombre choisi. Voir plus bas.

Avec un code couleur

[modifier | modifier le code]

Exemple : <span class="notheme" style="background-color:white; color:#9966CC">chaussette</span> donne chaussette.

Couleur via des modèles et des TemplateStyles

[modifier | modifier le code]

Bien que plus complexe, la méthode recommandée pour des couleurs qui s'adaptent proprement au mode sombre est d'utiliser des modèles dans lesquels les couleurs sont définies via des TemplateStyles.

Un TemplateStyle est une sous-page d'un modèle nommée [[Modèle:NOM_MODELE/styles.css]] et insérée dans le code du modèle principal en mettant <templatestyles src="NOM_MODELE/styles.css"/>, généralement au début. Elle est écrite en langage css.

Exemple de code pour un TemplateStyle : 

/* Style pour le thème clair */
.texte-coloré {
    color: darkgreen
}

/* Style pour le thème sombre */
html.skin-theme-clientpref-night .texte-coloré {
    color: lightgreen
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .texte-coloré {
        color: lightgreen
    }
}

On note que le style en mode sombre doit être défini deux fois : une fois pour le mode sombre et une fois pour le mode automatique rendant sombre.

Il ne suffit pas d'insérer un templatestyle pour que le texte soit colorié automatiquement. Il faut encore ajouter la classe texte-coloré aux éléments à colorier (texte-coloré est un exemple, en pratique il faut donner un nom suffisamment unique pour ne pas risquer qu'il soit déjà utilisé ailleurs, par exemple NOM-MODELE-texte-coloré).

Exemple de code de modèle : 

<includeonly><templatestyles src="NOM_MODELE/styles.css"/>

<span class="texte-coloré"> TEXTE EN COULEUR !!! </span>

</includeonly><noinclude>
{{Documentation}}
</noinclude>

Variables css

[modifier | modifier le code]

Une variable css est une couleur spécifique à MediaWiki. Elle peut être utilisée en lieu et place d'une couleur normale et a l'avantage de s'adapter au mode clair / sombre choisi.

Par exemple var(--color-base, #202122) rendra noir en mode clair et blanc en mode sombre. La syntaxe sans fallback value var(--color-base) n'est pas compatible avec les anciens affichages et ne doit donc pas être utilisée.

Les variables css étant naturellement adaptées au mode choisi, le code des templatestyles peut être simplifié : 

.texte-coloré {
    color: var(--color-success, #14866d)
}
Couleurs de texte (Codex)
Code à utiliser Mode clair Mode sombre Rendu sans fallback Commentaire
var(--color-base, #202122) #202122 #eaecf0 texte Couleur du texte par défaut.
var(--color-base-fixed, #202122) #202122 #202122 texte Texte conservant la couleur par défaut du mode clair en mode sombre.
var(--color-base--hover, #404244) #404244 #f8f9fa texte Couleur du texte au survol par défaut.
var(--color-emphasized, #101418) #101418 #f8f9fa texte
var(--color-subtle, #54595d) #54595d #a2a9b1 texte
var(--color-placeholder, #72777d) #72777d #72777d texte
var(--color-disabled, #a2a9b1) #a2a9b1 #54595d texte
var(--color-disabled-emphasized, #a2a9b1) #a2a9b1 #72777d texte
var(--color-inverted, #fff) #fff #101418 texte
var(--color-inverted-fixed, #fff) #fff #fff texte Texte conservant la couleur blanche en mode clair comme en mode sombre.
var(--color-progressive, #36c) #36c #88a3e8 texte Couleur des liens par défaut.
var(--color-progressive--hover, #4b77d6) #4b77d6 #b0c1f0 texte
var(--color-progressive--active, #233566) #233566 #cbd6f6 texte
var(--color-progressive--focus, #36c) #36c #36c texte
var(--color-destructive, #bf3c2c) #bf3c2c #fd7865 texte
var(--color-destructive--hover, #f54739) #f54739 #fea898 texte
var(--color-destructive--active, #9f3526) #9f3526 #ffc8bd texte
var(--color-destructive--focus, #36c) #36c #36c texte
var(--color-visited, #6a60b0) #6a60b0 #a799cd texte Couleur des liens visités.
var(--color-destructive--visited, #9f5555) #9f5555 #c99391 texte Couleur des liens rouges visités.
var(--color-error, #bf3c2c) #bf3c2c #fd7865 texte
var(--color-warning, #886425) #886425 #ca982e texte
var(--color-success, #177860) #177860 #2cb491 texte
var(--color-notice, #404244) #404244 #a2a9b1 texte
var(--color-icon-error, #f54739) #f54739 #f54739 texte
var(--color-icon-warning, #ab7f2a) #ab7f2a #ab7f2a texte
var(--color-icon-success, #099979) #099979 #099979 texte
var(--color-icon-notice, #72777d) #72777d #72777d texte
var(--color-content-added, #006400) #006400 #80cdb3 texte
var(--color-content-removed, #8b0000) #8b0000 #fd7865 texte
var(--color-link-red, #bf3c2c) #bf3c2c #fd7865 texte
var(--color-link-red--hover, #f54739) #f54739 #fea898 texte
var(--color-link-red--active, #9f3526) #9f3526 #ffc8bd texte
var(--color-link-red--focus, #36c) #36c #36c texte
var(--color-link-red--visited, #9f5555) #9f5555 #c99391 texte
Couleurs de fond
Code à utiliser Mode clair Mode sombre Rendu sans valeur par défaut Commentaire
Couleurs spécifiques à Wikipédia en français, définies dans MediaWiki:Common.css#L-12
var(--couleur-fond-boite-grise, #f9f9f9) #f9f9f9 #101418 Couleur utilisée notamment par les bandeaux de {{Portail}} et le modèle {{Autres projets}}.
var(--couleur-fond-entete-alternance, #e6e6e6) #e6e6e6 #191919 Couleur utilisée notamment par l'entête des tableaux avec une alternance de couleur de fond.
var(--couleur-fond-gris-alternance, #eeeeee) #eeeeee #202122 Couleur utilisée notamment en alternance avec var(--background-color-base, #fff) dans les tableaux avec une alternance de couleur de fond.
Couleurs fournies par Codex
var(--background-color-base, #fff) #fff #101418 Couleur de fond par défaut.
var(--background-color-base-fixed, #fff) #fff #fff Couleur de fond par défaut du mode clair conservée en mode sombre.
var(--background-color-neutral, #eaecf0) #eaecf0 #27292d
var(--background-color-neutral-subtle, #f8f9fa) #f8f9fa #202122
var(--background-color-interactive, #eaecf0) #eaecf0 #27292d
var(--background-color-interactive-subtle, #f8f9fa) #f8f9fa #202122
var(--background-color-interactive-subtle--hover, #eaecf0) #eaecf0 #27292d
var(--background-color-interactive-subtle--active, #dadde3) #dadde3 #404244
var(--background-color-disabled, #dadde3) #dadde3 #404244 Couleur pour les boutons ou checkboxes désactivés.
var(--background-color-disabled-subtle, #eaecf0) #eaecf0 #404244
var(--background-color-inverted, #101418) #101418 #f8f9fa Fond sombre en mode clair et inversement.
var(--background-color-progressive, #36c) #36c #36c
var(--background-color-progressive--hover, #3056a9) #3056a9 #3056a9
var(--background-color-progressive--active, #233566) #233566 #233566
var(--background-color-progressive--focus, #36c) #36c #6485d1
var(--background-color-progressive-subtle, #f1f4fd) #f1f4fd #233566
var(--background-color-destructive, #bf3c2c) #bf3c2c #bf3c2c
var(--background-color-destructive--hover, #9f3526) #9f3526 #9f3526
var(--background-color-destructive--active, #612419) #612419 #612419
var(--background-color-destructive--focus, #36c) #36c #6485d1
var(--background-color-destructive-subtle, #ffe9e5) #ffe9e5 #612419
var(--background-color-error, #f54739) #f54739 #f54739
var(--background-color-error--hover, #d74032) #d74032 #d74032
var(--background-color-error--active, #bf3c2c) #bf3c2c #bf3c2c
var(--background-color-error-subtle, #ffe9e5) #ffe9e5 #612419
var(--background-color-error-subtle--hover, #ffdad3) #ffdad3 #9f3526
var(--background-color-error-subtle--active, #ffc8bd) #ffc8bd #bf3c2c
var(--background-color-warning-subtle, #fdf2d5) #fdf2d5 #453217
var(--background-color-success-subtle, #dff2eb) #dff2eb #153d31
var(--background-color-notice-subtle, #eaecf0) #eaecf0 #27292d
var(--background-color-content-added, #a3d3ff) #a3d3ff #233566
var(--background-color-content-removed, #ffe49c) #ffe49c #453217
var(--background-color-transparent, transparent) transparent transparent transparent est la couleur de fond par défaut d'un élément dont la couleur n'est pas précisé. Elle permet de rendre visible les éléments derrière l'élément transparent. L'application manuelle de cette couleur est utile lorsqu'un sélecteur large applique une couleur de fond à un élément et que l'on souhaite retirer cette couleur.
var(--background-color-backdrop-light, rgba( 255, 255, 255, 0.65 )) rgba(255,255,255,0.65) rgba(0,0,0,0.65) Backdrop is the term used by CSS Fullscreen API and is used to dim the background when a modal Dialog is open. Also known as overlay mask.
var(--background-color-backdrop-dark, rgba( 0, 0, 0, 0.65 )) rgba(0,0,0,0.65) rgba(255,255,255,0.65)
var(--background-color-button-quiet--hover, rgba( 0, 24, 73, 0.027 )) rgba(0,24,73,0.027) rgba(0,24,73,0.027)
var(--background-color-button-quiet--active, rgba( 0, 24, 73, 0.082 )) rgba(0,24,73,0.082) rgba(0,24,73,0.082)
var(--background-color-input-binary--checked, #36c) #36c #36c
var(--background-color-tab-list-item-framed--hover, rgba( 255, 255, 255, 0.3 )) rgba(255,255,255,0.3) rgba(255,255,255,0.3)
var(--background-color-tab-list-item-framed--active, rgba( 255, 255, 255, 0.65 )) rgba(255,255,255,0.65) rgba(255,255,255,0.65)
Couleurs d'accentuation (Codex)
Code à utiliser Mode clair Mode sombre Rendu sans fallback Commentaire
var(--accent-color-base, #36c) #36c #36c texte
Couleurs de bordure (Codex)
Code à utiliser Mode clair Mode sombre Rendu sans fallback Commentaire
var(--border-color-base, #a2a9b1)
#a2a9b1
#72777d
 
var(--border-color-inverted, #fff)
#fff
#101418
 
var(--border-color-interactive, #72777d)
#72777d
#a2a9b1
 
var(--border-color-disabled, #c8ccd1)
#c8ccd1
#54595d
 
var(--border-color-subtle, #c8ccd1)
#c8ccd1
#54595d
 
var(--border-color-muted, #dadde3)
#dadde3
#404244
 
var(--border-color-progressive, #36c)
#36c
#36c
 
var(--border-color-progressive--hover, #4b77d6)
#4b77d6
#4b77d6
 
var(--border-color-progressive--active, #233566)
#2a4b8d
#2a4b8d
 
var(--border-color-progressive--focus, #36c)
#36c
#36c
 
var(--border-color-destructive, #d73333)
#d73333
#d73333
 
var(--border-color-destructive--hover, #fc493b)
#fc493b
#fc493b
 
var(--border-color-destructive--active, #9f3526)
#9f3526
#9f3526
 
var(--border-color-destructive--focus, #36c)
#36c
#36c
 
var(--border-color-error, #9f3526)
#9f3526
#ff4242
 
var(--border-color-error--hover, #fc493b)
#fc493b
#ef8174
 
var(--border-color-warning, #987027)
#987027
#fc3
 
var(--border-color-success, #196551)
#196551
#00af89
 
var(--border-color-notice, #54595d)
#54595d
#c8ccd1
 
var(--border-color-content-added, #a3d3ff)
#a3d3ff
#2a4b8d
 
var(--border-color-content-removed, #ffe49c)
#ffe49c
#a66200
 
var(--border-color-transparent, transparent)
transparent
transparent
 
var(--border-color-divider, #a2a9b1)
#a2a9b1
#a2a9b1
 
Couleurs d'ombre (Codex)
Code à utiliser Mode clair Mode sombre Rendu sans fallback Commentaire
var(--box-shadow-color-base, #000)
#000
#fff
 
var(--box-shadow-color-inverted, #fff)
#fff
#000
 
var(--box-shadow-color-progressive--active, #233566)
#233566
#233566
 
var(--box-shadow-color-progressive--focus, #36c)
#36c
#36c
 
var(--box-shadow-color-progressive-selected, #36c)
#36c
#36c
 
var(--box-shadow-color-progressive-selected--hover, #4b77d6)
#4b77d6
#4b77d6
 
var(--box-shadow-color-progressive-selected--active, #233566)
#233566
#233566
 
var(--box-shadow-color-destructive--focus, #36c)
#36c
#36c
 
var(--box-shadow-color-transparent, transparent)
transparent
transparent
 

Voir aussi

[modifier | modifier le code]

Une table de couleurs très détaillée est disponible sur Aide:Couleurs/table détaillée. Attention cette page excède les 170 ko !

Articles connexes

[modifier | modifier le code]
v · m
Aide
Débuter
Règles
Consultation de Wikipédia
Ressources et listes
Création et modification
Suivi des changements
Liens et références
Images et médias
Gestion du compte utilisateur
Informations techniques
Moyens de communication
Communauté de Wikipédia


Ce document provient de « https://fr.wikipedia.org/w/index.php?title=Aide:Couleurs&oldid=216933408 ».