Docs CSS exécutables : Couleur du texte

Q: Comment changer la couleur du texte en HTML ?

Utilisez la propriété CSS color, dans une feuille de style ou un attribut style : Blue text . L'ancienne balise est obsolète.

Q: Comment changer la couleur d'un seul mot ?

Entourez le mot d'un et donnez-lui une couleur : This is red . Utilisez ou au lieu de si le mot est aussi important ou accentué.

Q: En CSS, est-ce font-color ou color ?

C'est color. Il n'existe pas de propriété font-color ni text-color ; le navigateur les ignore.

Comment changer la couleur du texte en HTML

Utilisez la propriété CSS color. Elle définit la couleur du texte d'un élément, et tous les éléments qu'il contient héritent de la même couleur, sauf s'ils définissent la leur.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text color</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .blue { color: #2563eb; }
    .green { color: rgb(22 163 74); }
  </style>
</head>
<body>
  <p class="blue">Blue text from a class in a stylesheet.</p>
  <p class="green">Green text written as rgb().</p>
  <p style="color: darkorange;">Orange text from a style attribute.</p>
  <p>Default text, then <span style="color: #dc2626;">one red word</span> in it.</p>
</body>
</html>

La propriété s'appelle color, pas font-color ni text-color. Ces noms n'existent pas en CSS et sont ignorés sans avertissement.

Pourquoi pas la balise font

Les anciens tutoriels montrent . Cette balise a été retirée du HTML il y a des années : les validateurs la signalent comme une erreur, et elle mélange le style au balisage, si bien que changer une couleur oblige à modifier chaque balise à la main. Les navigateurs l'affichent encore par compatibilité, et c'est la seule raison pour laquelle elle semble fonctionner.

<!-- obsolete -->
<font color="red">Warning</font>

<!-- use this -->
<span style="color: red;">Warning</span>

<!-- or better, a class you can change in one place -->
<span class="warning">Warning</span>

Les façons d'écrire la couleur

color accepte tous les formats de couleur CSS. Les quatre plus courants :

Format	Exemple	Remarques
Nommée	`color: tomato;`	148 couleurs nommées, pratiques pour des tests rapides
Hexadécimal	`color: #2563eb;`	Le plus courant dans les maquettes
rgb()	`color: rgb(37 99 235);`	Rouge, vert et bleu de 0 à 255
hsl()	`color: hsl(221 83% 53%);`	Teinte, saturation, luminosité : facile à éclaircir ou assombrir

L'hexadécimal, rgb() et hsl() acceptent un canal alpha pour un texte semi-transparent, comme #2563eb80 ou rgb(37 99 235 / 50%). La page des couleurs CSS explique chaque format.

Colorer toute une page, un titre ou une section

Définissez la couleur une fois sur body et laissez l'héritage faire le reste, puis surchargez là où c'est nécessaire :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inherited color</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #374151; }
    h1 { color: #111827; font-size: 24px; }
    .note { color: #92400e; background: #fef3c7; padding: 8px 12px; }
  </style>
</head>
<body>
  <h1>Heading in near black</h1>
  <p>Body text inherits dark gray from body.</p>
  <div class="note">
    <p>This box sets amber text, and the paragraph inside inherits it.</p>
  </div>
</body>
</html>

Un quasi-noir doux comme #111827 ou #374151 sur fond blanc est plus reposant pour les yeux qu'un #000000 pur, et se lit toujours comme du noir.

Couleurs des liens

Les liens sont l'exception à l'héritage : le navigateur leur donne leur propre bleu (et du violet une fois visités), donc une couleur définie sur le parent ne les atteint pas. Définissez-la sur le lien, ou demandez au lien d'hériter :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link color</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dark { color: #16a34a; }
    .brand a { color: #7c3aed; }
    .brand a:hover { color: #5b21b6; }
    .inherit a { color: inherit; }
  </style>
</head>
<body>
  <p class="dark">Green paragraph, but <a href="#x" id="l1">this link</a> keeps the browser color.</p>
  <p class="dark brand">Green paragraph, <a href="#x" id="l2">this link</a> is set to purple.</p>
  <p class="dark inherit">Green paragraph, <a href="#x" id="l3">this link</a> inherits green.</p>
</body>
</html>

:hover, :visited et :focus-visible permettent de changer la couleur selon l'état ; la page hover les présente. Quand un lien a la même couleur que le texte autour, gardez son soulignement pour qu'il reste reconnaissable comme lien.

Rendre le texte lisible : le contraste

La couleur du texte n'est que la moitié de la paire ; le fond est l'autre moitié. Les WCAG demandent un rapport de contraste d'au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte (environ 24px, ou 19px en gras).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contrast</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    p { padding: 8px 12px; margin: 6px 0; }
    .fail { color: #9ca3af; background: #ffffff; }
    .pass { color: #4b5563; background: #ffffff; border: 1px solid #e5e7eb; }
    .dark { color: #f9fafb; background: #1f2937; }
  </style>
</head>
<body>
  <p class="fail">#9ca3af on white: about 2.5:1, too light</p>
  <p class="pass">#4b5563 on white: about 7.6:1, passes</p>
  <p class="dark">#f9fafb on #1f2937: about 14:1, passes</p>
</body>
</html>

Le texte gris clair façon placeholder est l'échec le plus fréquent. Les outils de développement de Chrome et Firefox affichent le rapport de contraste quand vous inspectez une couleur de texte.

currentColor : réutiliser la couleur du texte

currentColor est un mot-clé égal à la valeur color de l'élément. Les bordures, les contours et les icônes SVG inline peuvent l'utiliser : un seul changement de color recolore alors le texte et sa décoration ensemble.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>currentColor</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tag {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border: 2px solid currentColor; border-radius: 999px;
    }
    .ok { color: #16a34a; }
    .warn { color: #d97706; }
  </style>
</head>
<body>
  <span class="tag ok">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Online
  </span>
  <span class="tag warn" id="warn">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Away
  </span>
</body>
</html>

Erreurs courantes

Écrire font-color ou text-color. La propriété est color.
Utiliser la balise . Elle est obsolète ; utilisez le CSS.
Croire que les liens héritent. Définissez a { color: ... } ou color: inherit.
La couleur comme seul signal. « Les champs en rouge sont obligatoires » ne fonctionne pas pour les lecteurs qui ne distinguent pas le rouge. Ajoutez du texte ou une icône.
Un texte gris peu contrasté. Vérifiez le rapport : 4,5:1 ou plus pour le texte courant.
Utiliser opacity pour éclaircir un texte. Cela estompe tout l'élément, fond et enfants compris. Utilisez plutôt une couleur plus claire ou une couleur avec alpha.

Questions fréquentes

Comment changer la couleur du texte en HTML ?

Utilisez la propriété CSS color, dans une feuille de style ou un attribut style : Blue text. L'ancienne balise  est obsolète.

La balise est-elle encore prise en charge ?

Les navigateurs l'affichent encore pour que les très vieilles pages continuent de fonctionner, mais elle est obsolète en HTML et les validateurs la signalent comme une erreur. Utilisez plutôt color en CSS.

Comment changer la couleur d'un seul mot ?

Entourez le mot d'un  et donnez-lui une couleur : This is red. Utilisez  ou  au lieu de  si le mot est aussi important ou accentué.

Pourquoi mon lien ne change-t-il pas de couleur quand je la définis sur le parent ?

Les liens ont leur propre couleur, issue de la feuille de style du navigateur, et n'héritent donc pas de celle du parent. Définissez-la sur le lien lui-même (a { color: #2563eb; }) ou utilisez a { color: inherit; } pour suivre le parent.

En CSS, est-ce font-color ou color ?

C'est color. Il n'existe pas de propriété font-color ni text-color ; le navigateur les ignore.

Concepts liés