「トランジション採用」でフリーランスの正社員転換を支援 他
- 隔週月曜更新！フリーランス・副業ニュース
色の組み合わせは、デザイナーとして仕事をするうえで避けては通れない課題です。
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選
以下の無料のツールを使用して手軽にカラーコントラストを確認し、コンテンツがアクセシブルかどうかを確かめてみましょう。
- Webaim Contrast Checker – オンラインカラーコントラスト計算ツール
- Contrast Checker – グレースケールにも対応
- WCAG Contrast checker – Firefoxアドオン
- Color Contrast Analyzer – Chrome拡張機能
（著者：Justin Baker 翻訳：Asuka Nakajima）
人気のフリーランス・副業求人
【リモートワークOK】大手からスタートアップまで、幅広い領域でユーザー体験を担うデザイナー/アートディレクター募集！
- #副業OK
- #新規事業
- #スタートアップ
- #急募
- #長期案件
- #スポット案件（1ヶ月）
- #フルリモートOK
職種：デザイナー
時給：2,500円 〜 4,000円
働き方：どちらでも可
エリア：東京都
【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集
- #スタートアップ
職種：デザイナー
時給：2,000円 〜
働き方：どちらでも可
エリア：東京都
【リモートOK】アート・エンタメ×ITでイノベーションを！新規事業のデザイナー募集！
- #スタートアップ
- #土日週末OK
- #急募
- #長期案件
- #正社員募集
- #フルリモートOK
職種：デザイナー
時給：5,000円 〜 8,000円
働き方：どちらでも可
エリア：東京都
All the design inspiration you need. It’s like crack for designers. And good for you too!
この記事はMuzliからの転載です。配信元または著者とコンテンツ契約を結び配信しています。
The Science of Color Contrast — An Expert Designer’s Guide
