Ausführbare CSS-Docs: Textfarbe

Q: Wie ändere ich die Schriftfarbe in HTML?

Mit der CSS-Eigenschaft color, in einem Stylesheet oder einem style-Attribut: Blue text . Der alte Tag ist veraltet.

Q: Wie ändere ich die Farbe eines einzelnen Wortes?

Pack das Wort in ein und gib ihm eine Farbe: This is red . Nimm oder statt , wenn das Wort auch wichtig oder betont ist.

Q: Heißt es in CSS font-color oder color?

Es heißt color. Eine Eigenschaft font-color oder text-color gibt es nicht; der Browser ignoriert sie.

So änderst du die Textfarbe in HTML

Nimm die CSS-Eigenschaft color. Sie legt die Farbe des Textes eines Elements fest, und jedes Element darin erbt dieselbe Farbe, außer es setzt eine eigene.

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

Die Eigenschaft heißt color, nicht font-color oder text-color. Diese Namen gibt es in CSS nicht, und sie werden stillschweigend ignoriert.

Warum nicht der font-Tag

Alte Tutorials zeigen . Dieser Tag wurde schon vor Jahren aus HTML entfernt: Validatoren melden ihn als Fehler, und er mischt Styling ins Markup, sodass du für eine Farbänderung jeden Tag von Hand bearbeiten musst. Browser stellen ihn aus Kompatibilitätsgründen noch dar, und nur deshalb scheint er zu funktionieren.

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

Wie du die Farbe schreiben kannst

color akzeptiert jedes CSS-Farbformat. Die vier häufigsten:

Format	Beispiel	Hinweise
Name	`color: tomato;`	148 Farbnamen, praktisch für schnelle Tests
Hex	`color: #2563eb;`	Am häufigsten in Design-Dateien
rgb()	`color: rgb(37 99 235);`	Rot, Grün und Blau von 0 bis 255
hsl()	`color: hsl(221 83% 53%);`	Farbton, Sättigung, Helligkeit: leicht heller oder dunkler zu machen

Hex, rgb() und hsl() können einen Alphakanal für halbtransparenten Text haben, etwa #2563eb80 oder rgb(37 99 235 / 50%). Die Seite zu CSS Farben erklärt jedes Format.

Eine ganze Seite, eine Überschrift oder einen Abschnitt einfärben

Setz die Farbe einmal an body, lass die Vererbung den Rest erledigen und überschreib sie, wo nötig:

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

Ein weiches Fast-Schwarz wie #111827 oder #374151 auf Weiß schont die Augen mehr als reines #000000 und wirkt trotzdem schwarz.

Linkfarben

Links sind die Ausnahme von der Vererbung: Der Browser gibt ihnen ein eigenes Blau (und nach dem Besuch Lila), also erreicht sie eine Farbe am Elternelement nicht. Setz sie am Link oder sag dem Link, dass er erben soll:

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

Mit :hover, :visited und :focus-visible änderst du die Farbe je nach Zustand; die Seite zu hover behandelt sie. Hat ein Link dieselbe Farbe wie der Text drumherum, behalte seine Unterstreichung, damit er als Link erkennbar bleibt.

Text lesbar halten: Kontrast

Die Textfarbe ist nur die Hälfte des Paares; der Hintergrund ist die andere. Die WCAG verlangen ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text (etwa 24px oder 19px fett).

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

Hellgrauer Text im Stil eines Platzhalters ist der häufigste Verstoß. Die Entwicklertools von Chrome und Firefox zeigen das Kontrastverhältnis an, wenn du eine Textfarbe untersuchst.

currentColor: die Textfarbe wiederverwenden

currentColor ist ein Schlüsselwort, das der color des Elements entspricht. Rahmen, Outlines und Inline-SVG-Icons können es verwenden, sodass eine einzige Änderung an color den Text und seine Dekoration gemeinsam umfärbt:

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

Häufige Fehler

font-color oder text-color schreiben. Die Eigenschaft heißt color.
Den Tag  verwenden. Er ist veraltet; nimm CSS.
Erwarten, dass Links erben. Setz a { color: ... } oder color: inherit.
Farbe als einziges Signal. „Rote Felder sind Pflichtfelder“ funktioniert nicht für Leser, die Rot nicht unterscheiden können. Ergänze Text oder ein Icon.
Grauer Text mit wenig Kontrast. Prüf das Verhältnis: 4,5:1 oder mehr für Fließtext.
opacity nutzen, um Text heller zu machen. Das blendet das ganze Element aus, Hintergrund und Kinder inklusive. Nimm stattdessen eine hellere Farbe oder eine Farbe mit Alphakanal.

Häufig gestellte Fragen

Wie ändere ich die Schriftfarbe in HTML?

Mit der CSS-Eigenschaft color, in einem Stylesheet oder einem style-Attribut: Blue text. Der alte Tag  ist veraltet.

Wird der Tag noch unterstützt?

Browser stellen ihn noch dar, damit sehr alte Seiten weiter funktionieren, aber er ist in HTML veraltet, und Validatoren melden ihn als Fehler. Nimm stattdessen CSS color.

Wie ändere ich die Farbe eines einzelnen Wortes?

Pack das Wort in ein  und gib ihm eine Farbe: This is red. Nimm  oder  statt , wenn das Wort auch wichtig oder betont ist.

Warum ändert mein Link die Farbe nicht, wenn ich color am Elternelement setze?

Links haben ihre eigene Farbe aus dem Stylesheet des Browsers und erben deshalb nicht die des Elternelements. Setz sie am Link selbst (a { color: #2563eb; }) oder nimm a { color: inherit; }, damit er dem Elternelement folgt.

Heißt es in CSS font-color oder color?

Es heißt color. Eine Eigenschaft font-color oder text-color gibt es nicht; der Browser ignoriert sie.

Verwandte Konzepte