よりアクセシブルなデザインのためのハイカラーコントラストの使用

カラーコントラストのWeb標準

カラーコントラスト比 2色間のコントラストの差を測定します。値が大きいほど、前景のオブジェクト（テキスト、画像、グラフィック）と背景を区別しやすくなります。.

色は、次のようにさまざまな方法で対比できます。 色相, 値 そして 飽和. カラーコントラスト比は、World Wide Webの主な国際標準化団体であるW3Cによって提供された式によって計算されます。.

それはの間の値を取ることができます 1：1 （全くコントラストがない, 前景と背景の色は同じです） 21：1 （最大コントラスト 白と黒の間にのみ存在します）.

W3Cの最新のWebコンテンツアクセシビリティガイドライン（WCAG）2.0は、Web開発者とコンテンツ作成者に、許容できるカラーコントラスト比の最小値（レベルAA）と拡張値（レベルAAA）のベンチマークを提供します。.

レベルAAは少なくとも必要とします 通常のテキストでは4.5：1の比率, そして 大きなテキストの場合は3：1. 字幕のような大きなテキストを読む方がはるかに簡単なので、色のコントラストを低くする必要があります。.

あなたが強化されたレベルであるレベルAAAに到達したいならば、それは少なくとも必要とするので、あなたはより慎重にあなたの配色をデザインする必要があります。 通常のテキストの7：1のコントラスト比, そして 大きい場合は4.5：1. テキストがロゴまたはブランド名の一部である場合、どちらのWCAGレベルでも最低限のカラーコントラスト要件はありません。.

視覚的にアクセス可能なWebサイトに電話をかけることができるのは、 すべての前景オブジェクトとその背景の間のカラーコントラスト比が少なくともレベルAAに達する.

ハイカラーコントラスト比の利点

読みやすさを向上させることによって、視覚障害のあるユーザーだけでなく、 小さな画面であなたのコンテンツを読む人 スマートフォンやスマートウォッチなど、 悪い照明条件, そして 低品質のモニター.

また、テキストと背景のコントラストが高い場合は読みやすくなるため、サイトのコンテンツに飽きるまでに時間がかかる可能性があります。.

あなたがより高いコントラスト比を適用することがあなたのデザインの美観に悪い影響を与えることを心配するなら、あなたは実際の例で、高いコントラスト比のルールに固執することはまだ結果として生じることを証明する魅力的でクールなデザイン.

カラーコントラストをチェックするためのアプリ

デザイナーが彼らのウェブサイトのカラーコントラスト比をチェックするのを助けることができるウェブ上の至る​​所に多くの素晴らしい無料ツールがあります.

カラーコントラストのためにあなたのデザインをテストする最も簡単な方法は、FirefoxのためにこのようなPhotoshopまたは適切なブラウザ拡張のどちらかでメインカラーを選び、その値を以下のアプリケーションの1つにコピーすることです。.

覚えておくべき最も重要なことはあなたが常にする必要があるということです テキストの色などの前景色を周囲の色と比較する （背景色）.

WebAimカラーコントラストチェッカー

WebAim（Web Accessibility In Mind）は、Waveなどの他の優れたアクセシビリティツールの中でも、シンプルで信頼性の高いカラーコントラストチェッカーを開発者に提供するWebアクセシビリティを推進する組織です。 あなたのサイトのアクセシビリティ問題を素早く評価する.

WebAimのカラーコントラストチェッカーはあなたに告げる あなたの色がWCAG AAとAAAテストに合格するならば, 通常のテキストと大きなテキストの両方.

2.スヌークカラーコントラストチェック

現在Shopifyでリードフロントエンド開発者として働いているJonathan Snookは、彼の便利なカラーコントラストチェックツールを10年以上にわたってホストしてきました。 Snookのアプリはあなたがすることができます HSLとRGBの値を変更する を使用して、前景色と背景色を1つずつ 便利な範囲のスライダー WCAG 2.0ベンチマークに準拠した結果に達するまで.

CheckMyColours

Giovanni Scalaによって作成されたCheckMyColoursを使用すると、すべての前景色と背景色の組み合わせのカラーコントラスト比を確認できます。 ライブウェブサイト上.

計算する 輝度コントラスト比、輝度差, そして 色違い, そして結果に関する完全なレポートを提供します。 CheckMyColoursのレポートは、あなたがあなたのサイトの視覚的なアクセシビリティをどのように向上させることができるかについてのあなたの理解をかなり容易にすることができます。.

配色デザイナー

Color Scheme Designerは特にカラーコントラストチェッカーではなく、 完全な配色のデザイン.

このコレクションには、さまざまな種類の視覚障害を持つ人々が自分の配色をどのように認識しているかを確認できる機能があるため、このコレクションに含めています。あなたはあなたの色をフルカラー失明、protanopy、deuteranopy、および他の多くの視覚障害についてテストすることができます。このアプリにはPalettonという新しいバージョンがあり、これによってさらに洗練されたビジョンシミュレーションが可能になります（お粗末なLEDディスプレイや弱いCRTディスプレイなどのテストも可能です）。.

W3Cは、この便利なアクセシビリティカラーホイールなど、他の多くのカラーコントラストツールを見つけることができる巨大なWebアクセシビリティ評価ツールリストも提供しています。.

視覚的にアクセス可能なWebサイトを作成するためのヒント

視覚的にアクセスしやすいWebサイトを作成したい場合は、それを常にお勧めします。 機能性や意味を伝えるために色だけを使わないようにする. 現在の状態に基づいて色が変わるアイコンは、この典型的な例です。.

可能であれば、いつも 追加の視覚的合図をデザインする 色の見え方が機能を理解するのに役立つ.

忘れないで ボタン、リンク、メニューの色のコントラストに特に注意を払う, それらはあなたのサイトのナビゲーション手段です。ユーザーがあなたのサイトを簡単にナビゲートすることができないならば、あなたはすぐに彼らを失うでしょう. アクションを促すボタンの色 も 優れたコンバージョン率には不可欠.

デザインプロセスの後半でサイトの配色を変更するようにクライアントを説得するのは難しいので、デザインプロセスのできるだけ早い段階でカラーコントラスト比をテストすることは良いワークフローです。.

今読む：ウェブサイトの配色を選択するための実用的なアプローチ