先駆はアクセシビリティへの対応に力を入れており、Web Content Accessibility Guidelines (WCAG)やJIS X 8341-3:2016に沿った設計や検査が可能です。
これらのガイドラインにおいて、色の表現については、色のみで情報を表現しない、という内容や、コントラスト比をどの程度確保するべきである、コントラスト比が低い場合は文字をどの程度大きくしたり太字にする、など、情報を読み取りやすくするための具体的な内容が記載されています。
こういった規定に記載されているコントラスト比だけでなく、色の違いを読み取ってもらいやすくするために工夫できることがあります。
この記事では、それらの代表的な工夫について具体的な例を挙げながら紹介します。
セパレーションカラーを入れる
わかりやすく言うと、縁取りで分けてしまうということです。
具体例をみてみましょう。
文字の色が#FFD966、背景色が#00CCC9のとき、コントラスト比は1.47 : 1となるため、アクセシビリティの規定では、大きい文字でも、太字にしても、条件を満たしません。実際にセパレーションカラーなしでは、文字は読み取りづらいです。
このときに、文字や背景の色をそのまま使用する場合でも、背景とも文字ともじゅうぶんにコントラスト比が確保できる色で文字に縁取りをすると、文字が読みとりやすくなります。
色の区別がつきやすいように、使う色味を微調整する
色を判断するのは、目の中にある錐体細胞です。光の波長でそれぞれ反応が異なる三種の錐体細胞の、どの細胞がどの程度反応できるかで、個人の色の判別のつきやすさが変わります。
避けたほうが良い色の組み合わせはもちろんありますし、アクセシビリティの規定にもあるコントラスト比は確保したほうがよいですが、少し工夫することで、錐体細胞の反応の具合が異なる人にとっても、別の色であると区別しやすくなる場合があります。
赤や緑に近い色は黄色に少し寄せる、赤と緑で区別しているものについては緑を青に変更するなどです。
具体例をみてみましょう。
調整前と調整後の色の比較です。（モニターによって見え方は変わります）
これらは見た目上は大きな変化はそこまでありませんが、色覚多様性のシミュレーターに掛けると以下のようになります。
P型色覚は、1型2色覚ともいい、緑と青の色を受け取る錐体細胞の情報をもとに色を判断します。
赤と黒、赤と緑、青と紫の区別がしづらくなります。
調整後は、これらの色が並んでいてもある程度区別がつきやすくなります。
ただし、オレンジと緑の見分けがつきにくい状態です。
D型色覚は、2型2色覚ともいい、緑に近い色を判別する錐体細胞が機能せず、赤と青の錐体細胞から色を判別します。並んで使われやすい赤と緑が、緑を明るくすることである程度判別がつきやすくなります。青と緑の区別もつきやすくなります。ただし、調整後はオレンジと緑の区別がつきにくい状態です。
T型色覚は、3型色覚ともいい、青の光を受ける錐体細胞が機能しなくなります。病気などの後天的な原因が多く、病気の回復で色覚も回復することが多いようです。
調整後は、緑と青がある程度区別しやすくなっています。
このように、ある程度どの型であっても見分けがつくように調整することはできますが、この図でもわかるように、赤やオレンジと緑は、調整後であっても判別がつきにくいことが多いです。
たとえば、緑で表現していた個所を青に変更するなど、ある程度判別がつきやすいように工夫をすることはできます。
ただし、工夫をしたとしても、結局のところ色の情報だけで区別することは難しく、色の調整だけでなく、色での情報の表現は文字情報などと組み合わせて、適切に使用していくことが必要です。
色の使い方だけではない、WCAGやJISに記載されていること
WCAGやJISの規定に記載されている内容は、色の使い方やデザイン面だけではありません。
フォームなどの機能を使う際の対応や、読み上げブラウザへの対応、動画を使用する場合に必要な配慮など、誰にとっても必要な情報にアクセスしやすい、使いやすいウェブサイトにしていくための技術的な情報が満載です。
先駆にはウェブアクセシビリティ対応に精通しているスタッフがおりますので、検査だけでなく、設計のタイミングからかかわらせていただくことで、誰にとっても使いやすいウェブサイトにしていくためのお手伝いが可能です。
ぜひご相談ください。
