Knowledge Base Wiki

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.

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.

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.

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

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.

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

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>

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)
}

Août 2024 : Le contenu de cette liste changera prochainement, voir phab:T371516

• 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 !

• 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