INTERACTIVE LAB / 06 INFORMATION DESIGN
色覚シミュレーター
見え方を比べて、色に頼らない伝え方を見つけよう。
PNG・JPEG・WebP（20 MBまで）。画像はサーバーへ送信されません。
ここに画像をドロップ
改善は加えず、現在のデザインを4種類で確認します。
教材を準備しています…
学習のポイント色の組み合わせ・改善の考え方・手法と出典
シミュレーションは見え方の近似です。個人差、色弱の程度、画面環境までは再現できません。同じ色名でも、実際の色・明るさ・面積・周りの色によって見分けやすさは変わります。下の「見え方」はこの教材の配色の例で、型だけで誰かの見え方を決めることはできません。
| 組み合わせ・使用箇所 | 起こりうること | 改善のポイント |
|---|---|---|
| 赤と緑 受付・通行経路 | P・D型の例では、2色が近づいて状態や通行可否を取り違えやすくなります。 | ○・■、×、矢印、破線、直接の文字を併用。凡例と本体の色・記号もそろえます。 |
| 青と紫 体育館・中庭 | 紫の赤みが変わり、P・D型の例では青に近づきます。「赤と緑を避ければ十分」とは限りません。 | 建物の斜線・点・格子や会場名で区別。時刻表でも同じ会場色と名前を使い、色の記憶だけに頼らず照合できるようにします。 |
| 青と緑 混雑予想グラフ | T型の例では、2本の線の色が近づきます。線が接近・交差する場所では追いにくくなります。 | 配色を見直したうえで、実線／破線、丸／四角、直接ラベルを併用。凡例を残し、ラベル同士を重ねません。 |
| 明るい背景と白文字 来場案内 | 背景も文字も明るく、通常表示でも読みにくくなります。この黄色と白は1.32:1です。 | 明るい黄色は保ち、全行を同じ濃い文字へ。比率は9.01:1になり、項目の区別は見出しで伝えます。 |
| 明暗差の小さい文字と背景 お知らせ・注意パネル | 淡い文字や、この例の赤系文字と緑系背景は、文字と背景の境界が分かりにくくなります。 | 文字と背景の明暗差を確保し、「重要」「注意」などの言葉も使います。色名だけで良し悪しを決めません。 |
確認する順番：通常とP・D・T型で比較 → 文字の明暗差を確認 → 色以外の手掛かりを追加 → 小さい画面と実際の利用者でも確認。
文字のコントラスト比は元のsRGB値から計算します。WCAG AAの目安は通常文字4.5:1以上、大きな文字3:1以上、意味を伝える図形と隣接色3:1以上です。シミュレーションだけで適合判定はできず、文字サイズや説明の分かりやすさも確認します。色の使用・文字のコントラスト・図形のコントラスト
シミュレーションの手法・出典と画像の扱い
「通常」は元画像の表示です。P型・D型・T型では、それぞれL・M・S錐体に関わる2色覚の見え方を近似しています。すべての色覚の多様性や、色弱の程度を表すものではありません。
採用した手法
Brettel・Viénot・Mollon（1997）の2投影面モデル。sRGBを線形RGBに変換し、分離面の判定に応じた行列で投影、表示可能範囲にクリップしてsRGBへ戻します。P・D・Tすべてで2投影面を使用します。
係数は、sRGB・Smith–Pokorny（1975）LMSモデル、RGB白を中立軸とするlibDaltonLensの公開実装を使用しています。
結果の読み方
個人差、照明、ディスプレイの色特性などで実際の見え方は変わります。特定の人の見え方の再現や、診断・アクセシビリティ適合の判定には使えません。実際の利用者による確認と組み合わせてください。
画像の扱い
画像の読込・変換・保存はブラウザ内だけで行います。PNG・JPEG・WebPを受け付け、長辺が1,600pxを超える場合は縮小します（4,000万画素まで）。白背景へ合成したsRGB画像を計算・保存します。リロードすると画像は消えます。
出典
- Brettel et al. (1997), Computerized simulation of color appearance for dichromats
- libDaltonLens — Nicolas Burrus（Public domain / Unlicense）
- WCAG 2.2：色の使用 / 文字のコントラスト / 図形のコントラスト
コントラスト比は元のsRGBの相対輝度から計算します。シミュレーション画像の比率で適合判定はしません。文化祭のページは、この教材のために制作した架空の例です。