カラーコントラスト を評価するための最良の方法

カラーコントラストチェッカーを使用することで、視覚障害者にとってより魅力的で利用しやすいデザインにすることができます。世界には約3億人の色覚異常者がいます。また、約22億人の人々が視覚に問題を抱えており、デジタル製品の使用が困難になっている可能性があります。

色の組み合わせによるプラスとマイナスの効果を理解することで、ウェブやアプリのデザインをより多くの人に届けることができるようになります。

 カラーコントラスト がデジタル製品をより良くする理由

カラーコントラストチェッカーは、少なくとも2つの重要な点でデジタル製品をより良いものにします。

WCAG 2のガイドラインに沿って製品をよりアクセシブルにする

WCAG 2.1（ウェブコンテンツ・アクセシビリティ・ガイドライン）と成功基準には、幅広い視覚障がい者が製品にアクセスできるようにするためのルールが定められています。

文字色と調和する背景色を使用すると、製品を使用できない人が出てきます。また、色弱の方は、一般的な色とは異なる色を選択した場合、文字や画像が見えにくくなることがあります。

そのような場合には、色を変えるだけで認識しやすくなることがあります：

• ユーザー・インターフェース・コンポーネント
• ウェブページのコンテンツ
• ナビゲーショナル・メニュー
• ロゴマーク

アクセシビリティに配慮したカラーピッカーを使えば、より多くの人に使ってもらえるデザインを簡単に作ることができます。WCAG 2ガイドラインのすべてに準拠したデザインを、内蔵の色覚異常シミュレータやコントラストチェッカーでチェックできます。

このテーマについては、「アクセシビリティについてデザイナーが知っておくべきこと」を読むと、より詳しく知ることができます。この記事では、大きな文字やその他の機能を使用してユーザーを支援する方法について説明しています。

カラーコントラストでより多くのユーザーにアピール

デザインをよりアクセシブルにすることで、より多くの人に製品を使ってもらえるようになります。倫理的には、できるだけ多くの人に製品を使ってもらいたいと思うでしょう。経済的にも、より多くの人に製品を使ってもらうことは、ビジネスの収益向上につながります。

色のコントラストを使うことで、より多くのユーザーを惹きつけることができ、それが広告収入の増加や売り上げの増加につながります。倫理的にもビジネス的にも理にかなっていると思います。

おすすめの読み物: New e-book: Web UI Design for the Human Eye (Colors, Space, Contrast)

WCAGの3つのレベルを知る

WCAGには3つのレベルがあります。最高レベルを目指すことで、デザインを可能な限りアクセシブルにすることができます。

以下の説明では、視覚に基づくアクセシビリティのみを取り上げています。他のアクセシビリティ制限のある人に対応するには、他の機能について考える必要があります。

Level A (Beginner)

色だけに頼らないプレゼンテーションです。

Level AA (Intermediate)

テキストと背景色の間のカラーコントラスト比が4.5対1以上である。

ユーザーインターフェースの構成要素、グラフィックス、および周辺色のコントラスト比が3対1以上である。

文字の大きさが2倍になっても、機能や文脈を損なわない。

Level AAA (Advanced)

テキストと背景の間のカラーコントラスト比が7対1以上である。

カラーコントラストチェックツールのご紹介

色を識別できないような視覚障がいがなければ、カラーコントラストチェッカーを使わなければ、最低限のコントラストに達しているかどうかを確認することはできないでしょう。以下のツールは、より多くの人にとってアクセシビリティが向上する色を選択するのに役立ちます。

カラーコントラストアナライザー (CCA)

Colour Contrast Analyserは、コンピュータにダウンロードできる無料のツールです。16進コードやCSSカラーフォーマットを入力したり、カラーピッカーツールを使ってコントラスト比を求め、AAまたはAAA規格に合格しているかどうかを判断します。

内蔵のコントラストチェックツール 

お使いのデザインツールにコントラストチェッカーが内蔵されているかどうかを確認すると、使用した色を簡単に評価することができます。UXPinでは、それを助けてくれるプラグインを探す必要はありません。エディターの中にすでに備わっているからです。

カラー・コントラスト・チェック

 カラーコントラストチェックは、あなたのデザインがWCAG 2 AAまたはWCAG AAAに準拠しているかどうかを簡単に知ることができます。背景色と前景色の16進数を入力してください。結果として、コントラスト比が表示され、準拠しているかどうかを簡単に「はい」「いいえ」で表示します。

アクセシブルカラージェネレーター

 アクセシブルカラージェネレーターでは、色を16進数で入力したり、カラーパレットを使って入力することができます。入力された色を分析し、AAまたはAAAガイドラインに準拠したコントラストの高い色を、小さい文字サイズ、大きい文字サイズ、通常の文字サイズで提供します。

カラーラボ

カラーラボラトリーツールでは、色を選択して隣り合う色の見え方を確認することができます。また、選択した色を増強して、色弱の人が見るのと同じように見えるようにします。これにより、色弱者が製品をどのように感じるかについて、かなりの洞察を得ることができます。

カラーセーフ

カラーセーフは、WCAGガイドラインに基づいてカラーパレットを生成します。色、テキストサイズ、フォントファミリーを選択すると、WCAG基準に準拠したカラーパレットが作成されます。

APCAコントラスト計算機

APCAコントラスト計算機は、American College Personnel Associationが策定したガイドラインに準拠するように設計されたツールです。APCA Contrast Calculatorの特徴は、シンプルかつフルフォントマトリックスバージョンのツールを提供していることです。文字サイズと色のコントラストがAPCAの基準を満たしているかどうかだけを知りたい場合は、シンプルなバージョンを使用できます。より多くの変数を加えたい場合は、フルフォントマトリックスバージョンをお試しください。

UXPinで適切なカラーコントラストを確保する

UXPinでは、最終製品と同様の外観と性能を持つプロトタイプを作成することができます。そのため、プロトタイピングと製品リリースの段階でカラーコントラストが変わることを心配する必要はありません。

14日間の無料トライアルでは、コントラクトチェッカーを内蔵したエディターやその他多くの機能をお試しいただけます。ご登録はこちらから。クレジットカードは不要です。