この記事は、アクセシビリティ Advent Calendar 2019 - Adventar23日の記事です。
皆さん、CUD（カラーユニバーサルデザイン）、してますか？ 一流のデザイナーならみんなやっているというCUDですが、一つの壁があります。
それが、これ。
左端がもともとの色。中央と右が緑、あるいは赤を検知する細胞が無い人の色の見え方で、判別が困難になる色の組み合わせを示しています。
CUDを身に着けるために、これらの色の組み合わせを丸暗記するのはなかなか面倒であり、忘れてしまう可能性もあります。これを体系的に理解して身に着けることはできないか？というのが今回の記事の目的です。
とりあえず色盲とか色弱について理解しよう
人間の目は、3種類の細胞を使って色を判別しています。
それぞれ、青、緑、赤の光に対して強く反応し、それぞれの反応の強さによって見ているものの色が分かる、という仕組みになっています。
緑と赤を担当している細胞はもともと同じもので、そのせいなのか、緑と赤の細胞が反応する色がほぼ重複してしまうことがあります。これが色弱です。
Photoshopなどに搭載されている色覚シミュレーターは、緑、または赤のいずれかの細胞が無い、「色盲」のシミュレーションとなっています。
ここで一つ不思議なのは、「なぜ、赤と緑の場合のみしかシミュレーションしていないのか？ 青の細胞がない人のパターンがなぜないのか？」ということです。
実は、人間の目は、青を検知する細胞は感度が低く、色の判別の大半を赤と緑の細胞で行っているとのこと。
青の細胞がない人の場合、青や紫色が暗く見えるものの、色の判別自体は3色持ちの人と大きな差がないそうです。
ちなみに色盲・色弱は「異常」ではない
ここまでしれっと「色盲」とか「色弱」と、ネガティブな印象のある言葉を使ってきましたが、これらの特性を「色覚異常」と認識するのは大きな間違いであることは覚えておかなければなりません。
3色色覚持ち（Ｃ型色覚）が多い理由について、よく言われるのが、「熟した果物を見つけやすいので有利だったのではないか」という説ですが、サルの研究により、2色持ちでも明度の差で熟しているかどうか判別できることが分かっています。（参考：「正常色覚」が本当に有利なのか）
Ｃ型色覚は、赤と緑を別のものとして認識できる代わりに、コントラストに対してかなり鈍感になっています。赤や緑で、非Ｃ型色覚の人が全く違う色としてみている色を、Ｃ型色覚の人はほとんど判別できないといった逆転現象もあります。
非Ｃ型色覚者が障害を感じるのは、世の中のものがＣ型色覚者向けに作られているからで、左利きの人が不便を感じるのと同じメカニズムに過ぎません。左利きを「異常」という人がいたらその人の知能レベルが疑われます。同じように、2色色覚に対しても「異常」と呼ぶことはできないと言えます。
CUD対応の配色について
実際のところ、CUDには簡単な対応策があります。
使っている色に明度の違いを持たせる、あるいは破線や網掛けパターンなどの模様による差を設けるといったことで対応できます。しかしこれだと、常に色の明度差を気にしなければならず、表現の幅が狭くなります。
そこで、明度差の少ない配色で色を使いたい場合、どの組み合わせに気を付ければよいか考えましょう。
冒頭のカラーパレットをじっくり眺めると、3つのパターンがあることが分かります。
1つ目は、最上段にある青と紫の組み合わせ。水色とピンクは青と紫の明度を変えたパターンであることが分かります。
2つ目は、2段目にある淡色と灰色の組み合わせ。
3つ目は、赤、緑、茶色と、それらの明度を変えた色の組み合わせです。
色相環で確認しましょう。
この図は、WikipediaでCCライセンスで公開されているマンセル色相環を使い、Photoshopの色覚シミュレーターを通したものを同心円で並べたものです。これを見ると、Ｐ型、Ｄ型の色は、黄色の5Yと10Yの間あたりから、ほぼ対照的に変化していることと、青と紫の色の変化が少なくなることが分かります。
色相環の明度を変えるとこのようになります。
単純に明度を上げた場合がこの図で、対照的な変化は先ほどと同じですが、緑とピンクのあたりから薄い灰色に近いことが分かります。
逆に、明度を下げるとこうなります。
こちらも対照的な変化は同様ですが、緑と赤にこげ茶色っぽさが出てきます。
配色パターンとCUD
これで冒頭の、判別しにくい色の組み合わせパターンが、どのような位置にある色なのかが見えてきました。
補色配色では、緑と赤の配色を避けます。
トライアド配色では、緑・オレンジ、青緑・赤紫の組み合わせを避けます。
類似色配色では、青、紫の組み合わせを避けます。
そして、これらの組み合わせを使いたい場合は、明度に差をつけます。
このパターンを把握しておくと、色覚シミュレーターを起動する前に「この配色だとヤバいな」と予測できるので、デザインの手戻りを減らすことができるはずです。
また、「とりあえず色を塗るときには明度差をつける」というルールよりも表現の幅が広がります。
参考文献
ユニバーサルデザインにおける色覚バリアフリーへの提言(pdf)
宣伝
本記事と、前回の記事の話をひっくるめたウェブグラフィックデザインの講座を、Udemyで公開しています。2020年1月21日まで割引価格で提供しています。
