「トランジション採用」でフリーランスの正社員転換を支援 他
- 隔週月曜更新!フリーランス・副業ニュース
色の組み合わせは、デザイナーとして仕事をするうえで避けては通れない課題です。
UXデザインの目的は、ユーザーにシームレスなエクスペリエンスを提供すること。つまり、色の組み合わせは個人的な好みだけで決めるべきではありません。Webサイトやアプリの美学だけではなく、科学的な原則も考慮して色の組み合わせを決めましょう。
今回はデザイナー向けに、カラーコントラストを軸とした科学的な原則をもとに効果的に色を組み合わせる方法をご紹介します。
まずは基本的なカラーコントラストに関する6つの指標をご紹介します。
一定方向の単位面積あたりの表面から放出される光の強度。
2つの隣接する色、またはオーバーレイされた色のあいだの輝度の差。
識別可能な最小値と最大値の比率。カラーコントラストの場合、もっとも明るい輝度ともっとも暗い輝度の差を指します。人間の目はさまざまな光のレベルに合わせるのに時間がかかるため、デザイナーはデジタルスクリーンに対する目のダイナミックレンジを考慮する必要があります。
グレア(まぶしさ)は光源との輝度の比率によって引き起こされます。デジタルであってもアナログであっても、明るい反射光は人間の目が隣接するものを識別することを困難にします。パソコンを屋外で使用すると画面は暗く感じますが、この現象にもグレアが関係しています。
もっとも明るい色(白)の輝度と、もっとも暗い色(黒)の輝度の比率で定義されます。あらゆるディスプレイにおいて望ましいのは、コントラストの比率が高い状態、つまりハイコントラストな状態です。
人間の目のダイナミックレンジについてはさまざまな意見がありますが、一説では約20ストップ(1,000,000:1)とされています。人間の目のコントラスト感度は、ディテールフリークエンシー(輪郭の強度)が1度あたり約4サイクルの場合に最大となります(ソースはこちら)。
明るい色の相対輝度を「L1」、暗い色の相対輝度を「L2」とした場合、式は以下のとおりとなります。
(L1 + 0.05)/(L2 + 0.05)
コントラスト比の範囲は1〜21で、通常は「1:1〜21:1」と表記されます。
WCAGは、アクセシブルなWebコンテンツ、およびコントラスト比に関する以下のガイドラインを発表しています。
▲AAラージテキストの要件しか満たしていない例。文字が太くないと見づらい
下記の場合を除いて、テキストとその背景は、少なくとも4.5:1のコントラスト比でなければならない。(レベルAA)
ラージスケールのテキストとその背景は、少なくとも3:1のコントラスト比でなければならない。
装飾などに用いられるテキストとその背景には、コントラスト要件が適用されない。
ロゴまたはブランド名の一部であるテキストとその背景には、最小コントラスト要件が適用されない。
▲すべての基準を満たしている例。文字がはっきりしていて見やすい
以下の場合除いて、テキストとその背景は、少なくとも7:1のコントラスト比でなければならない:(レベルAAA)
ラージスケールのテキストとその背景は、少なくとも4.5:1のコントラスト比でなければならない。
装飾などに用いられるテキストとその背景には、コントラスト要件が適用されない。
ロゴまたはブランド名の一部であるテキストとその背景には、最小コントラスト要件が適用されない。
▲基準をまったく満たしていない例。コントラスト比が低いと見づらいことがわかる
以下の無料のツールを使用して手軽にカラーコントラストを確認し、コンテンツがアクセシブルかどうかを確かめてみましょう。
(著者:Justin Baker 翻訳:Asuka Nakajima)