適切なコントラストでウェブサイトの可読性とユーザーエクスペリエンスを向上させる
コントラストは、ウェブサイトのデザインの成功に重要な役割を果たします。 そのサイトのタイポグラフィから、 サイト全体で使用されている画像から、前景の要素と背景色との対比まで、十分に設計されたサイトでは、高品質のユーザーエクスペリエンスと長期的なサイトの成功を確実にするために、
コントラストが低く、読書の経験が少ない
コントラストがあまりにも低いウェブサイトは、読み込みと使用が難しく、サイトの成功に悪影響を及ぼします。 貧弱な色のコントラストの問題は、しばしば識別しやすい。 通常は、Webブラウザでレンダリングされるページを探して、色の選択肢が悪いためにテキストが読みにくいかどうかを確認するだけです。 それでも、どのカラーがうまく機能しないかを判断するのは簡単ですが、他のカラーとは対照的に、どのカラーがうまく機能するかを判断することは、実際には非常に困難です。 あなたはうまくいかないかもしれませんが、何がうまくいくのかはどうやって決めるのですか？ この記事の画像は、さまざまな色と、前景色と背景色とのコントラストの違いを示すのに役立ちます。 いくつかの「良い」ペアリングといくつかの「貧弱な」ペアリングを見ることができます。これは、プロジェクトで適切な色を選択するのに役立ちます。
コントラストについて
注意すべき点の1つは、コントラストとは、背景と比較して色がどの程度明るいかということだけではありません。 そのようなイメージで見られるように、これらの色のいくつかは非常に明るく、背景色（黒色の青色など）で鮮やかに表示されますが、まだコントラストが悪いとラベル付けされています。 私はこれをしました、それは明るいかもしれませんが、色の組み合わせはまだテキストを読みにくくするためです。 あなたが黒い背景のすべての青いテキストでページを作成する場合、あなたの読者は非常に素早く目の疲れを感じるでしょう。 これが、コントラストが単なる白黒ではない理由です（はい、その言い伝えが意図されていました）。 コントラストにはルールとベストプラクティスがありますが、デザイナーは常にそれらのルールを評価して特定のインスタンスで機能することを確認する必要があります。
色の選択
コントラストは、ウェブサイトのデザインに色を選択する際に考慮する要素の1つに過ぎませんが、重要なものです。 色を選択するときは、会社のブランド基準に留意するだけでなく、組織のブランドガイドラインと一致する可能性がありますが、オンラインではうまく機能しないカラーパレットに対処する意欲があります。 たとえば、私はいつもウェブサイトで効果的に使うために黄色で明るい緑が大変難しいと感じています。 これらの色が会社のブランドガイドラインにある場合は、いずれかとよく対比する色を見つけるのが難しいため、アクセントの色としてのみ使用する必要があります。
同様に、あなたのブランドの色が白黒である場合、これは大きなコントラストを意味しますが、長いテキスト量のサイトがある場合、黒い背景に白いテキストがあると、読みにくくなります。 黒と白のコントラストが大きくても、黒い背景に白いテキストがあると、長いパッセージに目が疲れます。 この場合、白い背景に黒い文字を使用するように色を反転させます。 それは視覚的に興味のあるものではないかもしれませんが、あなたはそれ以上のコントラストを見つけることはできません！
オンラインツール
独自のデザインセンスに加えて、サイトの色の選択をテストするために使用できるオンラインツールがいくつかあります。
CheckMyColors.comはサイトのすべての色をテストし、ページ上の要素間のコントラスト比をレポートします。
さらに、色の選択について考えるときは、ウェブサイトのアクセシビリティと色覚障害の人々も考慮する必要があります。 ContrastChecker.comのようにWebAIM.orgがこれを手助けすることができ、WCAGのガイドラインに対する選択肢をテストします。