ワンランク上を目指すデザイナーのための、カラーコントラストガイド＆無料ツール4選

色の組み合わせは、デザイナーとして仕事をするうえで避けては通れない課題です。

UXデザインの目的は、ユーザーにシームレスなエクスペリエンスを提供すること。つまり、色の組み合わせは個人的な好みだけで決めるべきではありません。Webサイトやアプリの美学だけではなく、科学的な原則も考慮して色の組み合わせを決めましょう。

今回はデザイナー向けに、カラーコントラストを軸とした科学的な原則をもとに効果的に色を組み合わせる方法をご紹介します。

カラーコントラストに関する6つのコアコンセプト

まずは基本的なカラーコントラストに関する6つの指標をご紹介します。

1. 輝度

一定方向の単位面積あたりの表面から放出される光の強度。

2. カラーコントラスト

2つの隣接する色、またはオーバーレイされた色のあいだの輝度の差。

3. ダイナミックレンジ

識別可能な最小値と最大値の比率。カラーコントラストの場合、もっとも明るい輝度ともっとも暗い輝度の差を指します。人間の目はさまざまな光のレベルに合わせるのに時間がかかるため、デザイナーはデジタルスクリーンに対する目のダイナミックレンジを考慮する必要があります。

4. グレア

グレア（まぶしさ）は光源との輝度の比率によって引き起こされます。デジタルであってもアナログであっても、明るい反射光は人間の目が隣接するものを識別することを困難にします。パソコンを屋外で使用すると画面は暗く感じますが、この現象にもグレアが関係しています。

5. カラーコントラスト比

もっとも明るい色（白）の輝度と、もっとも暗い色（黒）の輝度の比率で定義されます。あらゆるディスプレイにおいて望ましいのは、コントラストの比率が高い状態、つまりハイコントラストな状態です。

6. 人間の目のダイナミックレンジ

人間の目のダイナミックレンジについてはさまざまな意見がありますが、一説では約20ストップ（1,000,000：1）とされています。人間の目のコントラスト感度は、ディテールフリークエンシー（輪郭の強度）が1度あたり約4サイクルの場合に最大となります（ソースはこちら）。

コントラスト比の計算方法

明るい色の相対輝度を「L1」、暗い色の相対輝度を「L2」とした場合、式は以下のとおりとなります。

（L1 + 0.05）/（L2 + 0.05）

コントラスト比の範囲は1〜21で、通常は「1：1〜21：1」と表記されます。

＞＞カラーコントラスト比計算ができる無料ツールはこちら

Webコンテンツアクセシビリティガイドライン（WCAG）2.0

WCAGは、アクセシブルなWebコンテンツ、およびコントラスト比に関する以下のガイドラインを発表しています。

1. 最小コントラスト基準

▲AAラージテキストの要件しか満たしていない例。文字が太くないと見づらい

1.4.3 コントラスト（最小）

下記の場合を除いて、テキストとその背景は、少なくとも4.5：1のコントラスト比でなければならない。（レベルAA）

ラージテキスト

ラージスケールのテキストとその背景は、少なくとも3：1のコントラスト比でなければならない。

インシデント

装飾などに用いられるテキストとその背景には、コントラスト要件が適用されない。

ロゴタイプ

ロゴまたはブランド名の一部であるテキストとその背景には、最小コントラスト要件が適用されない。

2. 強化コントラスト基準

▲すべての基準を満たしている例。文字がはっきりしていて見やすい

1.4.6コントラスト（強化）

以下の場合除いて、テキストとその背景は、少なくとも7：1のコントラスト比でなければならない：（レベルAAA）

ラージテキスト

ラージスケールのテキストとその背景は、少なくとも4.5：1のコントラスト比でなければならない。

インシデント

装飾などに用いられるテキストとその背景には、コントラスト要件が適用されない。

ロゴタイプ

ロゴまたはブランド名の一部であるテキストとその背景には、最小コントラスト要件が適用されない。

▲基準をまったく満たしていない例。コントラスト比が低いと見づらいことがわかる

カラーコントラスト比計算のできる無料ツール4選

以下の無料のツールを使用して手軽にカラーコントラストを確認し、コンテンツがアクセシブルかどうかを確かめてみましょう。

1. Webaim Contrast Checker – オンラインカラーコントラスト計算ツール
2. Contrast Checker – グレースケールにも対応
3. WCAG Contrast checker – Firefoxアドオン
4. Color Contrast Analyzer – Chrome拡張機能

（著者：Justin Baker　翻訳：Asuka Nakajima）