色彩検定UC級を受験してみた
はじめに
先日、色彩検定UC級を受験してきたので記事を書きました。
色彩検定UC級とは
色彩検定UC級では、ユニバーサルカラーについて問われます。さまざまな特性を持った人がいることを理解することで、みんながわかりやすい色使いについて学ぶことができます。
なぜ受けようと思ったか
僕は普段、HTMLやCSSを使う時にアクセシビリティを損ねてないかを意識していたりするので実装面の知識は多少持っていると思います。ですが、デザイン面の知識はまだまだ浅いと感じていました。デザイン面の知識も増やすことで、アクセシビリティへの理解をもっと深めたい、さらには実装側からデザイン側へのフィードバックやアクセシビリティの高いデザインを自分で作ったりもできるようになりたくて、そのきっかけとしてちょうどよいと考え、今回受験することしました。
勉強を通して学んだこと
色彩検定UC級のテキストには、章が6つあります。章ごとに振り返り、特に印象に残っていることを書いていきます。
色のユニバーサルデザイン
色には大きく2つの役割があります。1つは印象を生み出す情緒的な役割。もう1つは対象を見つけやすくしたり、区別しやすくしたりする機能的な役割です。
色を検討する時は、どちらの役割を重視するか、どうバランスを取るか、などを考えることが大切です。特に、多くの人が理解できる必要のある情報の場合は、機能的な役割を意識して配色する必要があります。例えば、危険・注意を表すようなものや案内表示、路線図などです。これらはできるだけ多くの人に理解される必要があります。
色が見えるしくみ
光は、テレビや携帯電話などの電波や、レントゲン写真のX線などと同じ「電磁波」の一種です。電磁波のうち、特定の範囲の長さの波長を持つ電磁波は、人が色として感じることができます。色で感じられる電磁波の中にも、短い波長から長い波長まであり、波長の長さによってどんな色に見えるかが変わります。短い波長だと青っぽい色、中くらいの長さの波長だと緑〜黄、長い波長だと赤っぽい色となります。
色の表し方
色は、色の三属性と呼ばれる色相、明度、彩度を使って分類することができます。そのうち色相は、赤、黄、緑、青といった有彩色の色みの性質を表します。赤→黄→緑→青→紫のように変化し、それを環状に示したものが色相環です。
この色相環は色のユニバーサルデザインを考える時にヒントになります。
色覚のタイプによる色の見え方
眼に入った光は眼の奥にある錐体と呼ばれるところに届きます。錐体は3つあり、短い波長(青っぽい色)を捉えるS錐体、中くらいの長さの波長(緑〜黄)を捉えるM錐体、長い波長(赤っぽい色)を捉えるL錐体のそれぞれがはたらくことで色を感じられます。
中には3つの錐体のどこかのはたらきが弱い、または全くはたらかないタイプの人もいます。すると、波長の捉え方が変わり、色の感じ方が変わります。例えば、長い波長を捉えるL錐体のはたらきが弱い場合、赤っぽい色を感じるはたらきが弱いことになるので、赤っぽい色が暗く見えることになります。なので、黒背景に赤い文字が書かれている場合は見えづらい可能性があります。
ただし、3つ錐体それぞれが単独で色を認識しているわけではありません。それぞれの錐体の反応の比較によって色が生じます。例えば、赤と緑を判別する時には、L錐体とM錐体の反応の差を比較しています。それぞれの錐体は協力しあっている関係にあります。
色覚に異常がある時、L錐体もしくはM錐体がうまくはたらかない場合が多いです。ということは、L錐体とM錐体の反応の比較が正常に行えなくなるので、赤と緑を判別しづらくなります。つまり、色覚に異常があり、色が見分けづらい時、赤と緑が判別しづらいことが原因であることが多いです。
ここで、先述した色相環を思い出してみます。
赤と緑は、色相環でほぼ反対の位置にある色となっています。色覚に異常がある時、赤と緑が見分けづらい可能性が高いので、赤と緑の距離が近いと考えることができます。よって、色覚に異常がある場合は正円ではなく、縦に長い楕円形の色相環のように色みを判別することになります。赤と緑のように水平に位置する色同士は見分けづらい可能性があります。水平にある色同士を使う場合は注意が必要です。
高齢者の見え方
年齢を重ねることによっても色の見え方は変化します。例えば、焦点調整を行う水晶体が黄みを増していきます。すると、短い波長（青っぽい色）の捉える力が落ちるため、青っぽい色が暗く見えるようになります。そのため、高齢者は青と黒が見分けづらい可能性があります。
また、白内障や緑内障などの眼疾患になる人の割合も増えていきます。
色のUDの進め方
前章までの内容を総合的に使い、いくつかのテクニックもあわせることで仕事や日常生活で目にする色使いを改善することができるようになります。
例えば、黒背景に赤文字は読みにくい可能性がありますが、赤を橙寄りにすることで見分けがつきやすくなります。色を認識する仕組みを知っているとどんな色に変更すれば見分けやすくなるかがわかります。
もし色を変えられないとしても、セパレーションカラーを使うことで見分けやすくすることもできます。これは、2色の間にそれらとは異なる色を入れてコントラスト感を調整する方法です。
他にも、グラフで情報を伝える時にもテクニックがあります。グラフで使われる情報は色分けされていることが多いですが、色だけ情報を伝えると正確に伝えられない可能性があります。なので、色以外の要素でも情報を伝えられるとよりわかりやすくなります。具体的には、線の種類を変えたり、模様をつけたりすることで別物であることを伝えることができます。
このようなさまざまな知識やテクニックを使うことで実際に自分で改善案を出したり、デザインの意図を理解することができるようになります。
試験を受けた感想
出来としては、8割くらい解けたと思います。過去問題集によると、200点中160点が合格ラインと記載があったので過去と同じボーダーラインであれば受かっているのではないかと思ってます…！（とか言っておいて落ちるかも）
形式はマークシートでした。すぐ解答し終えて最後のほうは暇なのかなと想像していたのですが意外と暇ではなく、全て回答を終えて残り15分くらい。見直しとかをしていたら結構良い時間になりました。
反省点としては、色のUDの進め方の章の問題は雰囲気で解いてしまった感覚があったので、もっと論理的に解けるようにしないと応用が効かないと思いました。知識として知っているだけではなく、実際にみんなが理解できる色使いができるようになりたいと思っているので、たくさんの事例を知ったり、日常生活のなかで「なんでこういう配色なんだろう」と考えるようにしていきたいです。
UC級の知識を活かせること
今回UC級の勉強をしたことでWebアクセシビリティへも活かせそうな部分があります。WCAGというWebのアクセシビリティを高くするために、達成するべき項目がまとめられているガイドラインがあり、その中には色に関係する項目もあります。なぜそれが設定されているのか、少し想像できるようになりました。例として3つの項目を挙げていきます。
達成基準 1.4.1 色の使用
(レベル A)
色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。
例えば、フォームで必須項目を示す時に赤色が使われる場面がありますが、赤色という色の情報だけで必須項目ということを示さないようにしようということです。
人によっては赤色が認識できない可能性があり、認識できない場合に必須項目ということが伝わらなくなってしまいます。なので、「必須」というテキストもあわせて表示することで、文字によっても必須項目ということを伝えるほうがより多くの人が理解できるデザインになります。
また、Trelloというアプリではラベルを色分けすることが可能ですが、色覚バリアフリーモードを有効にするとラベルに模様が表示されます。色のUDの進め方でも書いた「ハッチング」です。色を見分けられない場合は模様によって別のものであることを理解できます。
色が情報を伝える唯一の手段になっていないか、なってしまっているならテキストやハッチングなども手段として用意できないかを考えることで、アクセシビリティの高いデザインに近づけられそうです。
達成基準 1.4.3 コントラスト (最低限)
(レベル AA)
テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の場合は除く:
大きな文字
サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。
付随的
テキスト又は文字画像において、次の場合はコントラストの要件はない。アクティブではないユーザインタフェース コンポーネントの一部である、純粋な装飾である、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。
ロゴタイプ
ロゴ又はブランド名の一部である文字には、最低限のコントラストの要件はない。
コントラストを一定以上に保っていれば、違う色であることを伝えられる可能性が高まります。そのコントラストの基準が4.5:1と定められています。
コントラスト比を調べるためにはツールもいろいろあり、例えばChrome拡張機能のStarkはインストールも操作もシンプルで使いやすそうです。
コントラスト比のチェックツールを日常的に使ってコントラストが一定以上ある色使いをしていきたいと思います。
達成基準 1.4.8 視覚的提示
(レベル AAA)
テキストブロックの視覚的提示において、次を実現するメカニズムが利用できる:利用者が、前景色と背景色を選択できる。
幅が 80 字を越えない (全角文字の場合は、40 字)。
テキストが、均等割り付けされていない (両端揃えではない)。
段落中の行送りは、少なくとも 1.5 文字分ある。そして、段落の間隔は、その行送りの少なくとも 1.5 倍以上ある。
テキストは、支援技術なしで 200％までサイズ変更でき、利用者が全画面表示にしたウィンドウで 1 行のテキストを読むときに横スクロールする必要がない。
この達成基準の色についての項目としては「利用者が、前景色と背景色を選択できる。」があります。UC級の内容では、どのような配色が多くの人にとって見やすいかという話がメインになっていました。ただ、この達成基準を読んでから、一般論がすべてではないという考えも必要だと思いました。なぜなら、一般的には見づらいと思われるような配色が、ある人には適していることがあるからです。
全ての人に適した色使いというのはないおそらく1パターンだけでは網羅できないので、ユーザーが個別に設定できるのが理想なのだと思います。レベルAAAというだけあり達成難易度は高そうな印象ですが、このような基準もあることは頭に入れておきたいと思いました。
Ameba Accessibility Guidelinesに、ヒントになりそうな記述があったのでリンクを載せておきます。
おわりに
UC級の受験を通して、アクセシビリティのデザイン面での理解が深まりました。これはあくまできっかけの1つなので、これからさらに理解を深めていきたいと思います。また、色への抵抗が少なくなったことも収穫の1つでした。今回の知識を活かして、さまざまな色使いについて学んでみたいと思っています。
最後まで読んでいただきありがとうございました！