CSS Tips | 超実務コアCSSテクニック：カラー・背景 － アクセシブル配色設計

Web APP CSS
スポンサーリンク
スポンサーリンク

アクセシブル配色設計は「誰にとっても読める・分かる色設計」のこと

おしゃれな配色と、アクセシブルな配色は別物です。
アクセシブル配色設計は、
「見えにくい人・色の区別がつきにくい人・小さい画面で見る人」も含めて、
ちゃんと情報が伝わるように色を設計する考え方です。

ここでは、
コントラスト比の考え方
実務でよく使う CSS・Tailwind のパターン
「やりがちなNG」とその直し方
を、初心者向けにかみ砕いて話していきます。

コントラスト比の基本（ここを押さえないと始まらない）

コントラスト比って何？

文字色と背景色の「明るさの差」を数値化したものがコントラスト比です。
WCAG では、
通常のテキストは 4.5:1 以上
大きなテキスト（おおよそ 18px 以上・太字なら 14px 以上）は 3:1 以上
が推奨されています。

実務では「4.5:1 を目安にしておけば安全」と覚えておくと楽です。
実際のチェックは、Web のコントラストチェッカー（ツール）を使うのが前提ですが、
ここでは「どう CSS に落とし込むか」に集中します。

例1：ありがちな“薄すぎるグレー文字”を直す

NG 例（よくあるパターン）

<p class="text-gray-400 text-sm">
  これ、実はかなり読みにくいグレーです。
</p>
HTML

薄いグレーはおしゃれに見えますが、
背景が白だとコントラスト不足になりがちです。

改善例（Tailwind）

<p class="text-gray-700 text-sm">
  コントラストを上げた読みやすいグレー。
</p>
<p class="text-gray-800 text-sm">
  さらに安心したいならこのくらい。
</p>
HTML

改善例（CSS）

.text-muted {
  color: #4b5563; /* Tailwind の gray-700 相当 */
  font-size: 0.875rem;
}
CSS
<p class="text-muted">
  読みやすさを優先したグレー。
</p>
HTML

重要なのは「薄くしすぎない」こと。
特に本文テキストは、
gray-500 より薄い色は基本使わない、くらいのルールにしておくと安全です。

例2：ボタンの配色をアクセシブルにする

NG 例（背景と文字のコントラスト不足）

<button class="bg-yellow-300 text-white px-4 py-2 rounded">
  文字が背景に埋もれがち
</button>
HTML

黄色背景に白文字は、
見た目は柔らかいけれどコントラストが足りないことが多いです。

改善例（Tailwind）

<button class="bg-yellow-400 text-slate-900 px-4 py-2 rounded font-medium">
  コントラストを確保したボタン
</button>
HTML

背景が明るい色のときは、
文字色を「濃いグレー〜黒」に寄せるとコントラストが取りやすくなります。

CSS 版

.btn-primary {
  background: #2563eb;
  color: #ffffff;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
}
CSS
<button class="btn-primary">
  アクセシブルな青ボタン
</button>
HTML

青 (#2563eb) と白の組み合わせは、
コントラスト的にも安定して使いやすい定番です。

例3：リンクの「色だけに頼らない」設計

NG 例（色だけでリンクを区別している）

<p class="text-sm">
  詳しくは <a href="#" class="text-blue-500">こちら</a> をご覧ください。
</p>
HTML

色覚特性によっては、
「青っぽい文字」がリンクだと認識しづらいことがあります。

改善例（下線を足す・ホバーで変化をつける）

<p class="text-sm text-gray-800">
  詳しくは
  <a href="#"
     class="text-blue-600 underline underline-offset-2 hover:text-blue-700">
    こちら
  </a>
  をご覧ください。
</p>
HTML

CSS 版なら

.link {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.link:hover {
  color: #1d4ed8;
}
CSS
<a href="#" class="link">こちら</a>
HTML

「色＋形（下線）」でリンクだと分かるようにするのがポイントです。

例4：背景色とテキスト色の組み合わせテンプレート

ダーク背景 × 明るい文字（Tailwind）

<section class="bg-slate-900 text-slate-50 px-6 py-10">
  <h2 class="text-2xl font-semibold mb-3">ダークセクション</h2>
  <p class="text-slate-200 text-sm">
    背景が暗いときは、文字はほぼ白に近い色を使うと安心です。
  </p>
</section>
HTML

ライト背景 × 濃い文字（Tailwind）

<section class="bg-white text-slate-900 px-6 py-10">
  <h2 class="text-2xl font-semibold mb-3">ライトセクション</h2>
  <p class="text-slate-700 text-sm">
    背景が白のときは、本文は gray-700〜800 あたりが読みやすいです。
  </p>
</section>
HTML

CSS 版なら

.section-dark {
  background: #020617;
  color: #f9fafb;
}

.section-light {
  background: #ffffff;
  color: #0f172a;
}
CSS
<section class="section-dark">…</section>
<section class="section-light">…</section>
HTML

「背景が暗いなら文字はかなり明るく」「背景が明るいなら文字はかなり暗く」
このシンプルな原則を崩さないだけでも、かなりアクセシブルになります。

例5：ステータスカラー（成功・警告・エラー）のアクセシブル設計

よくある NG：薄い色＋白文字

<div class="bg-red-300 text-white text-sm px-3 py-2 rounded">
  エラーですが、コントラストが足りない例
</div>
HTML

改善例（Tailwind）

<div class="bg-red-50 text-red-800 text-sm px-3 py-2 rounded border border-red-200">
  エラーのメッセージ（読みやすい配色）
</div>

<div class="bg-emerald-50 text-emerald-800 text-sm px-3 py-2 rounded border border-emerald-200 mt-2">
  成功メッセージ（読みやすい配色）
</div>
HTML

背景はかなり薄く、文字はかなり濃く。
これが「アクセシブルなステータスカラー」の基本パターンです。

CSS 版なら

.alert-error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}
CSS
<div class="alert-error">
  エラーのメッセージ
</div>
HTML

例6：ダークモードでもコントラストを崩さない

Tailwind での例

<div class="bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-50 px-6 py-8">
  <h2 class="text-xl font-semibold mb-2">ダークモード対応</h2>
  <p class="text-sm text-slate-700 dark:text-slate-200">
    ライトでもダークでも、文字と背景のコントラストが十分になるように色を選びます。
  </p>
</div>
HTML

ダークモードでは、
背景をかなり暗く（ほぼ黒に近く）、
文字をかなり明るく（ほぼ白に近く）することで、
ライトモードと同じくらいの読みやすさを維持できます。

アクセシブル配色設計の「考え方」のまとめ

色は“雰囲気”ではなく“情報”として設計する

このボタンは押せるのか
このテキストは重要なのか
このメッセージはエラーなのか

色は「意味」を伝えるために使うので、
見た目だけで選ぶと、
見えにくい人には情報が届かなくなります。

コントラストを「十分に」取ることを優先する

おしゃれさより、まず読めること。
その上で、
彩度を少し落とす
グレーを混ぜる
余白やタイポグラフィでデザイン性を足す
という順番で考えると、破綻しにくいです。

Tailwind を使うなら「安全な色レンジ」を決めておく

本文は text-gray-700〜800
背景は bg-white / bg-slate-900
ステータスは *-50 + *-800 の組み合わせ

こういう「自分なりの安全パレット」を決めておくと、
毎回コントラストを計算しなくても、
だいたいアクセシブルな配色になります。

そのまま使える「アクセシブルカード」テンプレート（Tailwind）

<div class="max-w-md mx-auto bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-50
            border border-slate-200 dark:border-slate-800
            rounded-2xl p-6">
  <h2 class="text-xl font-semibold mb-2">
    アクセシブルなカード
  </h2>
  <p class="text-sm text-slate-700 dark:text-slate-200 mb-4">
    背景と文字のコントラストを十分に取りつつ、グレーの階調で情報の優先度を表現しています。
  </p>
  <button class="px-4 py-2 rounded-full text-sm font-medium
                 bg-sky-600 text-white hover:bg-sky-500">
    アクション
  </button>
</div>
HTML

この一枚の中に、
背景と文字のコントラスト
本文と補足のグレーの使い分け
ボタンのはっきりした配色
が全部入っています。

さいごに

アクセシブル配色設計は、
「制約」ではなく「デザインの土台」です。

ちゃんと読める・分かる配色を作った上で、
グラデーション・影・アニメーション・装飾を足していくと、
見た目も良くて、誰にとっても使いやすい UI になっていきます。

スポンサーリンク
タイトルとURLをコピーしました