色とコントラスト講座は 17 レッスンの対話形式チュートリアルです。デザインカードや CSS に出てくるあらゆる色の書き方を読み解き、「この 2 色を並べて読めるかどうか」を測定できる基準で判断できるようにします。各レッスンには 1〜3 個のカラーピッカーと具体的な目標があります。明度をある値にする、コントラスト比を 4.5:1 以上にする、色相が 120° 離れた 3 色を見つける、色覚特性のある人には見分けにくい 1 組を区別できるように直す——スライダーを動かすか色値を入力すると、数値の読み取り、コントラストのバッジ、配色ホイール、色覚シミュレーション表がリアルタイムに更新され、判定がどこで差が出ているかを教えてくれます。

講座は 4 段階です。カラーモデル（RGB、HEX、HSL、HSV、OKLCH の各成分が何を決めるのか、HSL の「明るさ」が目に感じる明るさと一致しない理由）。コントラストと WCAG（相対輝度の式、4.5:1 / 3:1 / 7:1 の 3 つのしきい値がそれぞれ何を規定するのか）。配色（補色・トライアド・類似というカラーホイール上の 3 つの関係）。アクセシビリティと実践（赤緑色覚の人が見ている世界、色覚に安全な配色の選び方、1 つのロゴから主要色を集計する方法）。最終レッスンでは、ここまで学んだことを総合して 3 色を提出し、すべてのチェックを通過させます。

学習時間は約 45 分。フロントエンド開発者、デザイナー、そしてスライドやグラフ、ポスターの色を選ぶ必要があるすべての人に向いています。美術の素養は不要です。

1. 01目標とカラーピッカーを見る練習エリアの上部がこのレッスンの目標です。下に 1〜3 個のカラーピッカーがあり、「固定」と付いたもの（指定された背景色など）は変更できません。それ以外は色見本をクリックするか、#RRGGBB / rgb() / hsl() を直接入力して色を選べます。
2. 02色を調整するカラーピッカーを選ぶとスライダーパネルが現れます。RGB が 3 本、HSL が 3 本、または両方です。「数値の読み取り」パネルは同じ色の HEX、RGB、HSL、HSV、OKLCH の 5 通りの表記を同時に表示します。
3. 03フィードバックを見るコントラストのレッスンでは比と AA / AAA のバッジが表示され、実際の文字でプレビューできます。配色のレッスンではカラーホイール上に現在の色の補色 / トライアド / 類似の位置が示されます。色覚のレッスンでは 4 種類の色覚特性でのシミュレーション色と色差 ΔE が一覧になります。
4. 04判定とクリア目標を満たすと結果バーが緑になり、目次の該当レッスンにチェックが入ります。数値や選択肢を答えるレッスンもあり、答えの欄は操作エリアの下部にあります。
5. 05ヒント・答え・進捗「ヒント」は考え方を示し、「答えを見る」は参考の色値を表示してワンクリックで入力できます。進捗は端末に保存され、再読み込みしても消えません。「このレッスンを共有」は ?lesson=n 付きのリンクをコピーします。

第 8 レッスン「WCAG AA: 本文は 4.5:1 以上」は背景を白に固定し、文字色をコントラスト比 4.5 以上かつ純黒以外に調整させます。以下はある試行の記録です。

背景（固定）  #FFFFFF   相対輝度 L = 1.000
試行 1        #3B82F6   L = 0.228   コントラスト = 1.05 / 0.278 = 3.68:1
  判定        ✓ AA 大文字（≥ 3）   ✕ AA 本文（≥ 4.5）
試行 2        #2563EB   L = 0.153   コントラスト = 1.05 / 0.203 = 5.17:1
  判定        ✓ AA 大文字   ✓ AA 本文   ✕ AAA 本文（≥ 7）   → クリア

第 15 レッスン「色覚に安全」はオレンジ #E76F51 を基準に、初期状態の 2 色目が緑 #8AB17D です。通常の視覚では ΔE ≈ 0.20 でひと目で区別できますが、緑色覚のシミュレーションでは 0.056 まで下がり、ほとんど重なります。2 色目を中程度の明るさの青（例: #2563EB）に変えると、シミュレーション下の ΔE が 0.15 以上に戻り、両色とも白背景に対して ≥ 3:1 となってクリアです。

第 1–2 レッスン: RGB と HEX——画面はどう光るか

画面上の各ピクセルは赤・緑・青の 3 つのサブピクセルでできており、rgb(37 99 235) は 3 つの光それぞれの強さです。0 で消灯、255 で最大輝度。3 つとも 0 なら黒、すべて 255 なら白、3 つが等しければ灰色です。HEX は同じ数の組を 16 進数で略記したもので、#2563EB なら 25 = 37、63 = 99、EB = 235 と、2 文字ずつが 1 チャンネルです。#FFF のような 3 文字表記は各文字を繰り返す省略形です。この表現を sRGB と呼び、Web とほとんどのディスプレイの既定の色空間です。数値と物理的な光の強さの間にはガンマ曲線があり、後でコントラスト比を計算するときに使います。

第 3–4 レッスン: HSL——人が理解できる 3 つの量で色を表す

RGB は機械には便利ですが人には直感的ではありません。青を「少し薄く」したいだけでも 3 つのチャンネルを同時に変える必要があります。HSL は別の座標を用意します。色相 H はカラーホイール上の角度（0° が赤、120° が緑、240° が青、360° で赤に戻る）、彩度 S は色がどれだけ「純粋」か（0% で灰、100% で最も鮮やか）、明度 L はどれだけ明るいか（0% で黒、50% で純色、100% で白）です。薄くするなら L を上げ、パステルカラーなら S を下げて L を上げます。講座の第 4 レッスンでは実際に 1 つ作ります。CSS の hsl(221 83% 53%) は #2563EB と同じ色です。

第 5 レッスン: HSV と HSL の違い

HSV（HSB とも呼ばれます）の V は「3 チャンネルの最大値」です。V = 100% のとき色は最も鮮やかか最も明るく、S を 0 にすると灰色ではなく白になります。HSL の L = 100% は常に白です。デザインソフトのカラーピッカーは HSV が多い（四角形と色相バーの組み合わせ）のに対し、CSS が対応するのは HSL だけです。相互変換に損失はありませんが、成分の意味は違うので、HSV の数値をそのまま hsl() に書き込まないでください。

第 6 レッスン: OKLCH——HSL の「明るさ」がなぜ騙すのか

HSL の hsl(60 100% 50%) は純粋な黄色、hsl(240 100% 50%) は純粋な青で、どちらも L は 50% ですが、黄色のほうが明らかに明るく見えます。HSL は RGB の数値を幾何学的に並べ替えただけのもので、人の目の知覚とは関係がないからです。OKLab / OKLCH（Ottosson、2020）は人間の実験データに合わせて作られ、L が等しければ同じ明るさに見えるようにし、C（彩度）と h（色相）の変化もより均等になります。CSS Color 4 は oklch() をすでに標準に取り込み、主要なブラウザーが対応済みです。第 6 レッスンでは OKLCH の読み取り値だけを見て、明度 L が 0.68–0.72、色相がオレンジの範囲に入る色へ調整します。HSL の L の読み取り値とは対応しないことが分かるはずです。グラデーションを作る、同じ色相の明暗の段階を生成する、色相をまたいで「同じ明るさ」を保つ——こうした用途は OKLCH のほうがはるかに安定します。

第 7 レッスン: コントラスト比の式

WCAG が定義するコントラスト比は任意の 2 数の差ではなく、相対輝度の比です。

ただし $L_1 \ge L_2$ で、0.05 は環境光の反射を模したものです。相対輝度 $L$ は sRGB の 3 チャンネルをまずガンマ復号してから加重します。

緑の重みが最も大きい（0.7152）ため、同じ数値でも緑は青よりずっと明るく見えます。白と黒のコントラスト比は 21:1 が上限です。第 7 レッスンでは読み取り値を見ながら手で 1 回計算し、以降のレッスンはページが代わりに計算します。

第 8–10 レッスン: 4.5、3、7 の 3 つのしきい値

WCAG 2.2 の 1.4.3（AA レベル）は本文のコントラスト比を ≥ 4.5:1、大きな文字（約 24px の通常、または 18.5px の太字）を ≥ 3:1 と定めています。1.4.11 はアイコン、枠線、グラフなどの「非テキストコンテンツ」も ≥ 3:1 とします。1.4.6（AAA レベル）は本文を ≥ 7:1 に引き上げます。これらは美意識の基準ではなく、中程度の低視力の利用者でも読めるようにするための経験的なしきい値であり、多くの国の法規の根拠でもあります。

第 9 レッスンはあえて「7:1 を超え、かつ純黒は使わない」を求めます。#000 と #FFF の組み合わせは 21:1 で問題ありませんが、大きな面積の純白と純黒はまぶしさを生みやすいため、デザインでは #1A1A1A、#24292F のような濃い灰色がよく選ばれます。これでも 7:1 を楽に超えます。逆に、薄い灰色のプレースホルダー文字 #9CA3AF は白背景で 2.5:1 しかなく、多くのサイトがここで適合しません。

第 11–13 レッスン: カラーホイール上の 3 つの関係

配色理論のもっとも基礎的な部分は色相どうしの角度の関係です。

• 補色（180° 差）: コントラストが最も強く、強調やボタンに向きます。大きな面積で並べると「けんか」するので、通常は主色 1 つと補助色 1 つにします。
• トライアド（120° 間隔）: 3 色が均等で活気があり、ブランドやイラストでよく使われます。使うときは 2 色の彩度を下げます。
• 類似（20–40° 隣接）: 調和して静かで、背景や階層に向きます。欠点はコントラストが足りないことで、明度で差を付ける必要があります。

講座の配色ホイールは現在の色のこれら 3 組の位置を示します。判定は色相の角度差だけを見て（多少の誤差は許容）、彩度と明度は自由に調整できます。実際の配色では、この 2 つが色相より重要なこともしばしばです。

第 14–15 レッスン: 色覚特性

男性の約 8%、女性の約 0.5% が何らかの色覚特性を持ち、最も多いのは赤緑色覚異常（protanopia は赤、deuteranopia は緑の欠落）です。青黄色覚異常（tritanopia）はまれで、全色覚異常はごくわずかです。講座は Machado ら 2009 年の生理学的モデルでシミュレーションします。色をその特性の錐体細胞の応答へ射影し、sRGB に戻す方法です。同時に OKLab 空間のユークリッド距離 ΔE で 2 色が「どれだけ違うか」を数値化します。≈ 0.02 以内はほとんど区別できず、≥ 0.15 ならひと目で区別できます。

第 14 レッスンでは 3 組の色から緑色覚の人が最も区別しにくい組を探します。オレンジ #E76F51 と緑 #8AB17D はシミュレーション後に ΔE が 0.056 まで下がる一方、赤とシアン、濃い青と黄は明度差が大きいためはっきり残ります。第 15 レッスンでそれを直します。有効な手段は 2 つです。明度を離す（色覚異常では主に色相の情報が失われるが、明度差は常に見える）か、色相を変える（赤 / 緑を青 / オレンジにする）かです。グラフではできるだけ形やテクスチャ、直接の数値ラベルも加え、色だけで情報を伝えないようにしてください。これは WCAG 1.4.1 の要求です。

第 16 レッスン: ブランドカラーの抽出

画像から「主要色を取り出す」素朴な方法はピクセルの集計です。各ピクセルの RGB を各チャンネル 16 段階（4,096 個のバケット）に量子化し、数えて並べ替え、上位いくつかのバケットの平均色を取ります。講座では canvas にサンプルのロゴを描き、集計後に割合順のパレットを提示します。色見本をクリックするか、画像上で直接色を取ることもできます。実際のツール（Vibrant.js、Material You の動的カラー抽出など）はさらにクラスタリングを行い、ほぼ白やほぼ黒を除き、彩度で重み付けしますが、原理は同じです。

第 17 レッスン: 実用できる 3 色

最終レッスンはすべての総合です。3 つの色を提出し、それぞれ白背景に対するコントラスト比が ≥ 4.5:1（そのまま本文やボタンの文字に使える）、任意の 2 色の色相差が ≥ 60°（区別できる）で、さらに 3 色の OKLCH の明度を近づける（統一感）ことを推奨します。実際のプロジェクトの配色の意思決定は、おおよそ「読める、区別できる、統一されている」という 3 つの制約の共通部分です。

色空間

sRGB とその派生（HSL、HSV）および OKLCH のみを扱います。Display P3、Rec.2020 などの広色域、CMYK 印刷とスポットカラーは扱いません。

コントラスト比の計算

WCAG 2.x の相対輝度の式を使います。WCAG 3 草案の APCA 知覚コントラストは講座の範囲外です（より正確ですが、まだ標準になっていません）。

色覚シミュレーション

Machado 2009 モデルの完全欠落（severity = 1）の行列を使い、程度を調整できる弱い色覚のシミュレーションは提供しません。

配色の判定

色相の角度関係だけを検証し（多少の誤差を許容）、美しさは評価しません。

ブランドカラーの抽出

講座に組み込まれたサンプル画像だけで動作し、アップロードは受け付けません。自分の画像を処理するときは「カラーツール」を使ってください。

やらないこと

配色案の生成、デザイントークンの書き出し、サイト全体の適合チェックはしません。

• 「HSL の L が同じなら同じ明るさ」: 違います。HSL は知覚と無関係で、黄色の L=50% は青の L=50% よりずっと明るい。同じ明るさに見せたいなら OKLCH の L を比べるか、コントラスト比を直接見てください。
• 「色が離れているほどコントラストが高い」: コントラスト比が見るのは明度だけです。純赤 #F00 と純緑 #0F0 は色相が 120° 離れていてもコントラスト比は 2.9:1 しかなく、赤緑色覚ではほとんど区別できません。
• 「4.5:1 はデザイナーの好み」: WCAG 2.2 AA レベルの測定可能なしきい値で、多くの国のアクセシビリティ法規の根拠です。
• 「透明度はコントラスト比に影響しない」: 半透明の文字を背景に重ねた合成色こそが実際に計算に使われる色です。ツールが計算するのは不透明色なので、重ねた結果を先に求めてください。
• 「色覚異常は赤と緑が分からないだけ」: 青黄色覚異常と全色覚異常もあります。また赤緑色覚異常の人も明度差は分かるので、明度を離す方法は常に有効です。

講座はすべてブラウザー内で動作します。色の変換、コントラスト比、色覚シミュレーション、ピクセルの集計はすべてページ内の純粋な計算で、サーバーへ問い合わせません。サンプルのロゴはページが canvas でその場で描くもので、外部画像を読み込みません。進捗は端末の localStorage に保存されます。

• W3C、Web Content Accessibility Guidelines (WCAG) 2.2、Success Criterion 1.4.3 Contrast (Minimum)、1.4.6 Contrast (Enhanced)、1.4.11 Non-text Contrast、および用語集の relative luminance と contrast ratio の定義: https://www.w3.org/TR/WCAG22/#contrast-minimum（参照日：2026-09-09）
• W3C、CSS Color Module Level 4——sRGB のガンマ曲線、hsl()、oklch() の規範的な定義と相互変換: https://www.w3.org/TR/css-color-4/（参照日：2026-09-09）
• Björn Ottosson、A perceptual color space for image processing（2020）——OKLab の設計目標と変換行列: https://bottosson.github.io/posts/oklab/（参照日：2026-09-09）
• G. M. Machado, M. M. Oliveira, L. A. F. Fernandes、A Physiologically-based Model for Simulation of Color Vision Deficiency、IEEE TVCG 15(6), 2009——講座の色覚シミュレーションが使う行列の出典: https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation/CVD_Simulation.html（参照日：2026-09-09）
• MDN Web Docs、Color contrast（アクセシビリティガイド）——しきい値の実践的な解説とツール一覧: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable/Color_contrast（参照日：2026-09-09）