色覚シミュレーター

シミュレーターは何のためにあるのか

色覚シミュレーターは設計の道具であって、診断の道具ではありません。画像を渡すと、ある色覚特性を 経てどの色の区別が残り、どれが崩れるかの近似が返ってきます。価値があるのは崩れるほうです。イン ターフェース上の二つのものが違う意味を持つのに、シミュレーションがそれらを同じ色で描くなら、利用 者のかなりの割合に影響する欠陥を見つけたことになります。

この出力が何ではないかも正確に述べておく価値があります。これは誰かの主観的体験をのぞく窓ではあ りません。生まれつき第二色弱のある人は生まれてからずっとこの世界を見ており、その色知覚はその人 にとってごく当たり前で、特定の弁別課題では三色覚者を上回ることさえあります。シミュレーションを 彼らに見えているものとして提示するのは不正確であり、この状態を欠落として枠づけるなら有益でもあ りません。

シミュレーションが本当に教えてくれるのは、あなたの設計が、相当数の少数派の利用者には届かない情 報にどこで依存しているか、ということです。これは対処できる技術的事実です。

変換の背後にあるモデル

素朴なシミュレーターは、画像を二色覚者が区別できる色の直線に押しつぶします。二色覚にはそれで足 りますが、はるかに多い異常三色覚には誤りです。そこでは影響を受けた錐体が分光感度をずらして存在 し、色情報は消えるのではなく圧縮されます。

このシミュレーターはマチャド、オリヴェイラ、フェルナンデスの生理学に基づく手法に従い、錐体感度 のずれを直接モデル化します。このずれは連続的な媒介変数なので、同じモデルが正常色覚から軽度の異 常を経て完全な二色覚までの全域を、無関係な事例として扱うことなく覆います。

この区別を理解すると設計の仕方が変わります。中波長錐体が欠ける第二色覚は厳しいほうの場合です。 その錐体が存在しつつずれている第二色弱はありふれた場合で、はるかに多くの人が該当し、より微妙な 失敗を生みます。技術的には区別可能なままでも、密な図表や小さなUI要素では一目で分離しなくなる色 です。

出力をうまく使う

色を通じて本当に意味を運んでいる画像を読み込んでください。ダッシュボード、色分けした凡例のある 図表、地図、赤いエラー状態のあるフォーム、案内図などです。各シミュレーションを元画像と比べ、色 で区別しているすべての要素に一つだけ問いかけてください。これは今も、利用者が知る必要のあること を伝えているか。

探す価値のあるよくある失敗は次のとおりです。

• 赤と緑の状態表示が同じくすんだ色になること。ソフトウェアで最も広く見られるアクセシビリティ 上の欠陥です。
• 図表のカテゴリ配色で隣り合う系列が溶け合うこと。とくに知覚的な分離ではなく見た目の多様さで 選ばれた定性的配色で起きます。
• 連続的なヒートマップが赤と緑を通り、順序を失うこと。
• 色だけで本文と区別されたリンクが完全に消えること。
• 必須項目やエラーの表示が赤い枠線だけで担われていること。

修正はほとんどの場合、別の色を使うことではありません。第二の、色以外の手がかりを足すことです。 テキストのラベル、アイコン、形、塗りの模様、位置、下線。そうすれば色は意味の唯一の担い手ではな く補強になります。それが WCAGの色の使用に関する達成基準 の求めるところです。

シミュレーションが当てにならなくなるところ

変換は画像のsRGB値に適用されるため、その正確さは、画面がsRGBをどれだけ忠実に再現するか、そして元 画像がその色空間で作られていたかどうかに縛られます。広色域の素材、HDRコンテンツ、色管理の重い制 作工程は、いずれも結果をずらします。

このモデルは先天性の色覚特性を記述するものでもあります。緑内障、糖尿病網膜症、視神経疾患、白内 障、薬剤による後天性の色覚の低下は、しばしば挙動が異なり、両眼で程度が不均等なことも多く、どんな 色変換も捉えない視力やコントラスト感度の低下を伴うのが普通です。

最後に、シミュレーションは一つのレンズにすぎないことを忘れないでください。どの色相が溶け合うかは 教えてくれますが、そもそも本文に読めるだけの輝度コントラストがあるかは何も教えません。 コントラストチェッカーと組み合わせてください。

より広い指針としては、色覚異常に配慮した設計と 図表をアクセシブルにするをご覧ください。