Guida CSS interattiva: Colore del testo

Q: Come si cambia il colore del testo in HTML?

Usa la proprietà CSS color, in un foglio di stile o in un attributo style: Blue text . Il vecchio tag è obsoleto.

Q: Come cambio il colore di una sola parola?

Racchiudi la parola in uno e dagli un colore: This is red . Usa o al posto di se la parola è anche importante o enfatizzata.

Q: In CSS si scrive font-color o color?

Si scrive color. Non esiste una proprietà font-color o text-color; il browser le ignora.

Come cambiare il colore del testo in HTML

Usa la proprietà CSS color. Imposta il colore del testo di un elemento, e ogni elemento al suo interno eredita lo stesso colore, a meno che non ne imposti uno suo.

<!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 proprietà si chiama color, non font-color o text-color. Quei nomi non esistono in CSS e vengono ignorati in silenzio.

Perché non il tag font

I vecchi tutorial mostrano . Quel tag è stato rimosso da HTML anni fa: i validatori lo segnalano come errore, e mescola lo stile con il markup, quindi cambiare un colore significa modificare a mano ogni tag. I browser lo disegnano ancora per compatibilità, ed è l'unico motivo per cui sembra funzionare.

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

Modi di scrivere il colore

color accetta tutti i formati di colore CSS. I quattro più comuni:

Formato	Esempio	Note
Con nome	`color: tomato;`	148 colori con nome, comodi per prove veloci
Hex	`color: #2563eb;`	Il più comune nei file di design
rgb()	`color: rgb(37 99 235);`	Rosso, verde e blu da 0 a 255
hsl()	`color: hsl(221 83% 53%);`	Tonalità, saturazione, luminosità: facile da schiarire o scurire

Hex, rgb() e hsl() possono avere un canale alfa per un testo semitrasparente, come #2563eb80 o rgb(37 99 235 / 50%). La pagina sui colori CSS spiega ogni formato.

Colorare una pagina intera, un titolo o una sezione

Imposta il colore una volta su body e lascia che l'ereditarietà faccia il resto, poi sovrascrivilo dove serve:

<!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 nero morbido come #111827 o #374151 su bianco affatica meno gli occhi di un #000000 puro e si legge comunque come nero.

Colori dei link

I link sono l'eccezione all'ereditarietà: il browser dà loro un blu tutto loro (e viola dopo la visita), quindi un colore sul genitore non li raggiunge. Impostalo sul link, oppure di' al link di ereditarlo:

<!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 e :focus-visible ti permettono di cambiare il colore per ogni stato; la pagina sull'hover li tratta. Quando un link ha lo stesso colore del testo intorno, mantieni la sottolineatura, così resta riconoscibile come link.

Rendi il testo leggibile: il contrasto

Il colore del testo è solo metà della coppia; l'altra metà è lo sfondo. Le WCAG chiedono un rapporto di contrasto di almeno 4.5:1 per il testo normale e 3:1 per il testo grande (circa 24px, o 19px in grassetto).

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

Il testo grigio chiaro in stile placeholder è l'errore più comune. Gli strumenti per sviluppatori di Chrome e Firefox mostrano il rapporto di contrasto quando ispezioni il colore di un testo.

currentColor: riusa il colore del testo

currentColor è una parola chiave che vale quanto il color dell'elemento. Bordi, contorni e icone SVG inline possono usarla, quindi cambiando un solo color si ricolorano insieme il testo e le sue decorazioni:

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

Errori comuni

Scrivere font-color o text-color. La proprietà è color.
Usare il tag . È obsoleto; usa il CSS.
Aspettarsi che i link ereditino. Imposta a { color: ... } oppure color: inherit.
Il colore come unico segnale. "I campi in rosso sono obbligatori" non funziona per chi non distingue il rosso. Aggiungi un testo o un'icona.
Testo grigio a basso contrasto. Controlla il rapporto: 4.5:1 o più per il testo normale.
Usare opacity per schiarire il testo. Sbiadisce l'intero elemento, sfondo e figli compresi. Usa invece un colore più chiaro o un colore con alfa.

Domande frequenti

Come si cambia il colore del testo in HTML?

Usa la proprietà CSS color, in un foglio di stile o in un attributo style: Blue text. Il vecchio tag  è obsoleto.

Il tag è ancora supportato?

I browser lo disegnano ancora perché le pagine molto vecchie continuino a funzionare, ma in HTML è obsoleto e i validatori lo segnalano come errore. Usa invece color in CSS.

Come cambio il colore di una sola parola?

Racchiudi la parola in uno  e dagli un colore: This is red. Usa  o  al posto di  se la parola è anche importante o enfatizzata.

Perché il mio link non cambia colore quando imposto color sul genitore?

I link hanno un loro colore dal foglio di stile del browser, quindi non ereditano quello del genitore. Impostalo sul link stesso (a { color: #2563eb; }) oppure usa a { color: inherit; } per seguire il genitore.

In CSS si scrive font-color o color?

Si scrive color. Non esiste una proprietà font-color o text-color; il browser le ignora.

Concetti correlati