CSS の基本

HTML と CSS で文字色を設定する方法

HEX、RGB、HSL、カスタムプロパティ、アクセシブルな代替手段を使って、読みやすい文字色を CSS で確実に設定する方法を学びます。

公開日 2026/07/05 更新日 2026/07/29

CSS では color プロパティで文字色を指定します。最も分かりやすいのは、意味のあるセレクターに色を指定し、子要素に継承させる方法です。

body {
  color: #1f2937;
}

.notice {
  color: rgb(185 28 28);
}

HEX と RGB はどちらも正確な sRGB 値を表すのに信頼できます。HSL はデザインシステムで色相、彩度、明度を調整するときに便利です。既存の RGB トークンはRGB から HEX への変換ツールで変換し、コードベースではひとつの形式に統一しましょう。

「HTML の文字色」を調べる人の多くは、次の 3 つのいずれかを求めています。CSS の color プロパティの設定、ブランドの RGB 値を CSS で使える HEX コードに変換すること、そして選んだ文字色が最終的な背景の上で読みやすいかどうかの確認です。

カスタムプロパティでシステム化する

同じ値を何度も直接書くと、全体の変更が難しくなります。見た目ではなく役割で色に名前を付けましょう。

:root {
  --text-primary: #111827;
  --text-muted: #4b5563;
  --text-danger: #b91c1c;
}

.error-message { color: var(--text-danger); }

役割の名前は、dark-gray のような名前よりもリデザインに強く、ダークモードの上書きも簡単になります。

重要な意味を色だけで伝えてはいけません。また、すべての前景色と背景色の組み合わせに十分なコントラストが必要です。WCAG AA では通常のテキストで 4.5:1 以上、大きなテキストで 3:1 以上が求められます。目で判断せず、実際の組み合わせをカラーコントラストチェッカーで確認しましょう。

UI に現れるすべての文字の状態をチェックします。本文、ラベル、補足テキスト、無効状態の文字、リンク、ホバー、フォーカス、エラーメッセージ。白の上で基準を満たすリンク色でも、色付きのカードやダークモードの面では不足することがあります。

力強く落ち着いた文字色にはネイビーのカラー値を、エラーや緊急のラベルにはレッドの濃淡スケールを比較し、想定する面の上で基準を満たす濃淡を選びましょう。

次は、前景色の選択がCSS の背景色とどう関係するかを学びましょう。