実行できるCSSドキュメント: CSS 文字色

Q: HTML で文字色を変えるには？

スタイルシートか style 属性で CSS の color プロパティを使います: Blue text 。古い タグは廃止されています。

Q: 1 つの単語だけ色を変えるには？

単語を で囲んで色を指定します: This is red .。その単語が重要だったり強調したかったりするなら、 の代わりに や を使いましょう。

Q: 親に color を指定してもリンクの色が変わらないのはなぜですか？

リンクはブラウザのスタイルシートから独自の色を受け取るので、親の色を継承しません。リンク自体に指定する (a { color: #2563eb; }) か、a { color: inherit; } で親に従わせましょう。

Q: CSS では font-color と color のどちらですか？

color です。font-color や text-color というプロパティはなく、ブラウザに無視されます。

HTML で文字色を変える方法

CSS の color プロパティを使います。要素のテキストの色を指定し、中にあるすべての要素は、自分で指定しない限り同じ色を継承します。

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

プロパティ名は color で、font-color や text-color ではありません。これらの名前は CSS に存在せず、黙って無視されます。

font タグを使わない理由

古いチュートリアルでは  が紹介されています。このタグは何年も前に HTML から削除されました。バリデーターはエラーとして指摘しますし、見た目がマークアップに混ざるので、色を変えるにはすべてのタグを手で直す必要があります。ブラウザが互換性のために今も表示しているので、動いているように見えるだけです。

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

色の書き方

color にはすべての CSS の色の形式が使えます。よく使う 4 つは次のとおりです:

形式	例	補足
色の名前	`color: tomato;`	148 色の名前があり、手早く試すのに便利
16 進数	`color: #2563eb;`	デザインファイルでいちばんよく使われる
rgb()	`color: rgb(37 99 235);`	赤、緑、青を 0 から 255 で
hsl()	`color: hsl(221 83% 53%);`	色相、彩度、明度。明るくしたり暗くしたりしやすい

16 進数、rgb()、hsl() にはアルファチャンネルを付けて、#2563eb80 や rgb(37 99 235 / 50%) のように半透明の文字にできます。すべての形式は CSS の色のページで解説しています。

ページ全体、見出し、セクションの色を変える

body に一度だけ色を指定して継承に任せ、必要な場所で上書きします:

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

白い背景には、純粋な #000000 より #111827 や #374151 のような柔らかい黒に近い色のほうが目に優しく、それでも黒に見えます。

リンクの色

リンクは継承の例外です。ブラウザが独自の青 (訪問済みなら紫) を付けるので、親の色は届きません。リンクに指定するか、リンクに継承させます:

<!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、:focus-visible を使えば状態ごとに色を変えられます。詳しくは hover のページで解説しています。リンクが周りのテキストと同じ色なら、リンクだとわかるように下線を残しましょう。

読みやすい文字にする: コントラスト

文字色は組み合わせの半分にすぎず、もう半分は背景です。WCAG は、通常のテキストで 4.5:1 以上、大きなテキスト (約 24px、太字なら 19px) で 3:1 以上のコントラスト比を求めています。

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

いちばん多い失敗は、プレースホルダーのような薄い灰色の文字です。Chrome と Firefox の開発者ツールでは、文字色を調べるとコントラスト比が表示されます。

currentColor: 文字色を使い回す

currentColor は要素の color と同じ値になるキーワードです。枠線、アウトライン、インライン SVG のアイコンで使えるので、color を 1 か所変えるだけで文字と装飾の色がまとめて変わります:

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

よくある間違い

font-color や text-color と書く。 プロパティは color です。
 タグを使う。 廃止されています。CSS を使いましょう。
リンクが継承すると思う。 a { color: ... } か color: inherit を指定しましょう。
色だけで情報を伝える。 「赤い欄は必須です」は、赤を見分けられない読み手には伝わりません。テキストかアイコンを添えましょう。
コントラストの低い灰色の文字。 比率を確認しましょう。本文は 4.5:1 以上です。
文字を薄くするのに opacity を使う。 背景や子要素も含めて要素全体が薄くなります。薄い色かアルファ付きの色を使いましょう。

よくある質問

HTML で文字色を変えるには？

スタイルシートか style 属性で CSS の color プロパティを使います: Blue text。古い  タグは廃止されています。

タグはまだ使えますか？

とても古いページが動き続けるように、ブラウザは今も表示します。しかし HTML では廃止されていて、バリデーターはエラーとして報告します。代わりに CSS の color を使いましょう。

1 つの単語だけ色を変えるには？

単語を  で囲んで色を指定します: This is red.。その単語が重要だったり強調したかったりするなら、 の代わりに  や  を使いましょう。

親に color を指定してもリンクの色が変わらないのはなぜですか？

リンクはブラウザのスタイルシートから独自の色を受け取るので、親の色を継承しません。リンク自体に指定する (a { color: #2563eb; }) か、a { color: inherit; } で親に従わせましょう。

CSS では font-color と color のどちらですか？

color です。font-color や text-color というプロパティはなく、ブラウザに無視されます。

HTML と CSS で文字色を変える方法: color プロパティ