Aide:Couleurs

Aide de Wikipédia Insérer une image, une référence, etc. Insérer des caractères spéciaux ou problématiques

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 ?

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

Avec un modèle

Avec le nom de la couleur

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

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

Avec des balises « span »

Avec le nom HTML de la couleur

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

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

Couleur via des modèles et des TemplateStyles

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 , 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

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, #4b77d6)	#4b77d6	#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, #72777d)	#72777d	#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, #447ff5)	#447ff5	#b0c1f0	texte
var(--color-progressive--active, #233566)	#233566	#cbd6f6	texte
var(--color-progressive--focus, #36c)	#36c	#36c	texte
var(--color-destructive, #d73333)	#d73333	#fd7865	texte
var(--color-destructive--hover, #fc493b)	#fc493b	#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, #d73333)	#d73333	#fd7865	texte
var(--color-warning, #eeb533)	#eeb533	#fecc44	texte
var(--color-success, #177860)	#177860	#2cb491	texte
var(--color-notice, #202122)	#202122	#f8f9fa	texte
var(--color-content-added, #006400)	#006400	#80cdb3	texte
var(--color-content-removed, #8b0000)	#8b0000	#fd7865	texte
var(--color-link-red, #d73333)	#d73333	#fd7865	texte
var(--color-link-red--hover, #fc493b)	#fc493b	#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-disabled, #c8ccd1)	#c8ccd1	#54595d
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, #4b77d6)	#4b77d6	#4b77d6
var(--background-color-progressive--active, #233566)	#233566	#233566
var(--background-color-progressive--focus, #36c)	#36c	#36c
var(--background-color-progressive-subtle, #f1f4fd)	#f1f4fd	#233566
var(--background-color-destructive, #d73333)	#d73333	#d73333
var(--background-color-destructive--hover, #fc493b)	#fc493b	#fc493b
var(--background-color-destructive--active, #9f3526)	#9f3526	#9f3526
var(--background-color-destructive--focus, #36c)	#36c	#36c
var(--background-color-destructive-subtle, #ffe9e5)	#ffe9e5	#612419
var(--background-color-error, #d73333)	#d73333	#fc493b
var(--background-color-error--hover, #fc493b)	#fc493b	#fd7865
var(--background-color-error--active, #9f3526)	#9f3526	#fea898
var(--background-color-error-subtle, #ffe9e5)	#ffe9e5	#612419
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

• Modèle:Principales couleurs pour des couleurs avec Saturation maximale de 50 %.

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

• Couleurs du Web
• Wikipédia:Limitez l'usage de la couleur dans les articles
• Aide:Accessibilité des couleurs
• {{Conseil contraste entre couleur hexadécimal et noir ou blanc}}
• {{Conseil contraste entre couleur RVB et noir ou blanc}}
• Utilisation de la couleur concernant les articles sur les transports en commun