クリスマスと色覚特性

こんにちは、お疲れ様です。aimaiです。今回は、 Advent Calendar 2024に投稿する記事ということで、クリスマスと聞くと私がいつも思い出す「色覚特性」の話と、色のアクセシビリティの話をしようと思います。

なぜクリスマスと色覚特性？

色覚特性を持った友人がおり、その友人と出かけた時の話です。ふとタクシー乗り場が私の目に入り、緑の行燈と赤のブレーキランプの組み合わせから「クリスマスカラーだ」と呟いたのに対し、友人は「わかんないわそれ」と返しました。色覚特性を持っていることは聞いていたのですが、普段全くそんなことを感じさせない振る舞いを友人はしています。なので私はそれまであまり意識していなかったのですが、この一件から色覚特性について知りたいと思うようになりました。

さて、上の話にも出てきたように、クリスマスといえば、赤と緑の組み合わせですよね。これに加えて白や金も加わると豪華なクリスマス感が出てきます。それぞれ意味もあって、
赤：キリストの血を表している
緑：神の永遠の愛、永遠の命を表している
白：罪や汚れのない純真無垢を表している
金：光や王権を表している
だそうです。話が逸れてしまいましたが、とにかく、赤と緑はクリスマスカラーとされていて、しかしながら、一部の色覚特性の人にはこの２色は全く見分けのつかない色なのです。

参考
赤・緑・金・白のクリスマスカラーに込められた意味とは？|ウェザーニュース

色覚特性の仕組み

色覚特性は女性で500人に1人、男性では20人に1人の割合で現れる、それほど珍しくないものです。さらに色覚特性には3つのタイプがあります。１型・２型特性は赤と緑の区別がつきにくく、３型特性は黄色と青紫の区別がつきにくいと言われ、３型特性の人は非常に少ないそうです。
次の画像は、後述する「色のシュミレーター」というアプリを使って色覚特性の見え方を再現したものです。一枚目が色覚特性なし、二枚目が１型、三枚目が２型、四枚目が３型の見え方です。

どういった仕組みでこのようなことが起こるのでしょうか。人間は色を”光の性質の違い”で捉えています。光は波でもあり、その一つの波の長さを波長と言います。”波長の違い”を人間は”色の違い”と認識しています。虹色を思い浮かべた時の、赤色の方は波長の長い光、紫色の方は波長の短い光なのです。
そんな波長ですが、一つの場所で全ての波長を感じているわけではありません。波長の長い赤色側を受け取るＬ錐体（赤錐体）、まん中あたりの波長の緑あたりの色を受け取るＭ錐体（緑錐体）、波長の短い青色側を受け取るＳ錐体（青錐体）の3つで役割分担しています。このうちいずれか一つの働きが弱かったりなかったりすることによって色覚特性が起こるのです。

参考
色覚の特性：色覚多様性｜安間眼科
色覚の仕組みと呼称｜北海道カラーユニバーサルデザイン機構

色のアクセシビリティを満たすには

さてさて、Webデザイナーを目指す私にとって本題はここからです。色覚特性に対応するには何に気をつければ良いのでしょうか。

コントラスト比に気をつける

文字と背景色の明度差がしっかりとついていると色覚特性があってもしっかりと区別がつきます。コントラスト比は数値で表すことができ、21 : 0 が白と黒の組み合わせで最大、1 : 1 が全く同じ色同士というふうに表されます。アクセシビリティの基準を定めるWCAGは、このコントラスト比を本文のテキストサイズの文字では少なくとも4.5 : 1 以上になるようにと定めています。後述するようなコントラストチェッカーを使用して確かめると数値でコントラスト比が確認できて確実ですし、画面をグレースケール表示にして区別がつくかどうか見る手もあります。

赤の使い方に気をつける

赤は注意を引く色として使いやすい色ですが、１・２型色覚特性を持つ人は赤みは弱く感じられるので目を惹きつける効果も減ってしまいます。赤への感度が低い１型特性は、背景色が黒の場合明度差が小さくなりさらに見にくくなります。

色以外の要素を使用する

色のみで情報を判断させるようなことは避けるべきです。例えば、円グラフの情報を色だけで分けるのではなく模様入りにしたり、注意を引かせたい場所は色を変えるだけなく下線も引くようにするなどしましょう。

参考
色の見え方には多様性がある　知っておきたい「色覚特性」について｜トライペック

確認にお役立ちなツール

色のシュミレーター

こちらはスマホアプリとなります。カメラを通して景色を画面に映すと、三種類の色覚特性での見え方を体感することができます。画像を直接読み込むことも可能です。仕組みはわかっていてもどういうふうに見えるのかは想像しにくいです。これで確認することで見えにくいところがないか、印象はどうなるのかを簡単に確認することができます。

Adobe Color

Adobeが提供しているWebサービスです。無料で使用でき、日本語にも対応しています。同システムで作ったカラーパレットや画像から抽出してできたカラーパレットの色を各色覚特性での見え方で確認することができるほか、ツールからコントラストチェッカーを選んで使うこともできます。

カラーホイールの多彩な色覚対応なカラー｜Adbe Color

ひとくち日記

最初に出てきた友人と一緒にいると色々な知らない世界が見えて本当に面白いです。この間は、「色覚補助メガネ」というものの存在を知りました。知った時は半信半疑でしたが、友人が実際に試してみるとちゃんと効果があったようです。すごいですね。

さて、今回の投稿のアイキャッチ画像は学校のサークル課題で作ったクリスマスカードです。こういうゆるい絵ならまだいけるんですけどね。人間の絵が描けるようになりたいものです。サンタさん、画力をください。