色覚バリアフリーに配慮したカラーデザインのコツ！初心者でもわかるCSSの色と背景の指定
生徒
「先生、色覚バリアフリーってなんですか？Webデザインでも気をつける必要がありますか？」
先生
「色覚バリアフリーとは、色の見え方が人によって違うことを前提に、誰にでも見やすいデザインを作る工夫のことです。Webデザインではとても大切ですよ。」
生徒
「じゃあ、CSSで色をつけるときに、どうやって気をつけたらいいですか？」
先生
「では、色の選び方や、CSSでの設定方法を初心者向けにわかりやすく説明していきましょう。」
1. 色覚バリアフリーとは何かを知ろう
まずは「色覚バリアフリー」という言葉について簡単に説明しましょう。人間の目は、色を感じる細胞を使って色を見ていますが、この色の感じ方は人によって違います。特に「色覚多様性（しきかくたようせい）」と呼ばれる状態の人は、赤と緑、または青と黄色などの色の違いが分かりにくいことがあります。
例えば、「赤い文字に緑の背景」のような配色は、色覚に違いのある人には見づらくなることがあります。こうした見づらさを減らして、誰でも情報が読み取りやすいようにするのが色覚バリアフリーの考え方です。
2. 見やすい色の組み合わせを意識しよう
Webデザインでは色を自由に使えますが、「誰にとっても読みやすい色の組み合わせ」を考えることが大切です。見やすい組み合わせの基本ルールは以下の通りです。
- 背景色と文字色のコントラスト（色の明るさの差）をしっかりつける
- 色だけに頼らず、文字やアイコンの形も使う
- できるだけ赤・緑・青のみに依存しない
例えば、白い背景に黒い文字はとても見やすい組み合わせです。また、色が似ていても、太字にしたり下線をつけることで違いを出せます。
3. CSSでの配色方法を学ぼう
HTMLとCSSを使えば、文字や背景の色を自由に設定することができます。色の設定には、colorとbackground-colorというプロパティ（設定項目）を使います。
<style>
p {
color: #000000;
background-color: #FFFFFF;
}
</style>
<p>この文章は黒文字で、背景は白です。</p>
このように書くことで、黒い文字と白い背景が設定され、視認性が高くなります。
4. 色の指定方法を覚えよう
CSSで色を指定する方法はいくつかあります。
- 色の名前（例：
red、blue、green） - 16進数コード（例：
#FF0000は赤） - RGB（例：
rgb(255,0,0)は赤）
ただし、明確なコントラストを保つためには、16進数コードやRGBを使って調整するのがおすすめです。
5. 色のコントラスト比とは？
「コントラスト比（ひ）」とは、背景と文字の明るさの差を数値で表したものです。これが高いほど、文字が読みやすくなります。
WCAG（ウェブ・コンテンツ・アクセシビリティ・ガイドライン）という国際的な基準では、「通常の文字は4.5:1以上のコントラスト比」が推奨されています。
下の例は、コントラスト比が高くて読みやすいパターンです。
<style>
.high-contrast {
color: #000000;
background-color: #FFFF00;
font-weight: bold;
padding: 10px;
}
</style>
<p class="high-contrast">これは読みやすい高コントラストの例です。</p>
6. 色以外の工夫で視認性を上げよう
色覚バリアフリーでは、色の使い方だけでなく、デザインの工夫も大切です。以下のような方法で見やすさをアップできます。
- 重要な部分は文字サイズを大きくする
- 文字の太さ（太字）を使い分ける
- アイコンや記号を活用する
- ボーダーや枠線をつける
特に、色だけで「違い」を伝えようとすると、色覚の異なる人には伝わりません。太字や下線、アイコンなども組み合わせましょう。
7. 色覚バリアフリーを確認するツール
自分のWebページが色覚バリアフリーに配慮されているかどうかをチェックできる無料ツールもあります。
- Color Oracle（カラーユーザーの見え方を再現）
- Sim Daltonism（Mac用の色覚シミュレーター）
- Chromeの拡張機能（「Spectrum」など）
こうしたツールを使えば、見え方の違いを体験して、デザインの改善に役立てることができます。
8. よくあるNGな配色パターンに注意
以下のような配色は、色覚多様性のある方には非常に見づらくなることがあります。
- 赤文字＋緑背景
- 青文字＋黒背景
- 暗い色同士（濃いグレー＋濃い青など）
意図的に目立たせたいのに、逆に伝わらない結果になることもあるので、注意しましょう。
