ウェブデザイナーが従うべき最も効果的なデザイン原則の1つはコントラストです。

ホスピタリティ業界と連邦政府向けの Web 開発を専門とする Ryan Boudreaux 氏は、4 つのデザイン原則に関する一連の記事を執筆しています。この記事は、一連の記事「Web デザイナーのための効果的なデザイン原則: コントラスト」の第 1 弾です。内容は次のとおりです。

デザインの正式なコースを受講したことがあるなら、効果的なデザインの原則について学んだことがあるでしょう。これには、コントラスト、繰り返し、配置、近接という 4 つのよく知られた標準概念が含まれます。多くの人はこれを PARC または略して CRAP と呼んでいます。これら 4 つのデザイン原則は、印刷デザインにおける標準的な知識です。実際、ロビン ウィリアムズ著の『The Non-Designer's Design Book』第 3 版など、このテーマに関する教科書として必須となっている書籍がいくつかあります (非デザイナー向けのデザイン コースを含む)。

この記事では、Web デザインにおける色に関連するコントラストのデザイン原則と、色のマッチングをテストする方法に焦点を当てます。

対比

新たな視点から見ると、コントラストは 2 つ以上の関連する要素が異なる方法で表示されるときに発生します。違いが明白であればあるほど、コントラストも明白になります。 Web ページ上の類似の要素を独自のエンティティ、パーツ、またはコンテナーに変換することが、効果的な比較の鍵となります。対照的な要素を作成する最も一般的な方法は、色などの要素の異なるプロパティを作成することです。これが最も広く使用されているようです。その他の属性には、サイズ、形状、テクスチャ、方向、位置、動きなどがあります。しかし、コントラストの大きい 2 つの要素が必ずしも魅力的な視覚体験につながるわけではありません。

Web ページでは、テキストやタイポグラフィ要素の色の値は「コントラスト」の良い例になります。テストする必要がある前景色はテキスト自体であり、背景色はテキストの下にある画像、グラデーション、RGB カラーなどです。

色を使ってコントラストを出す

優れた色のコントラストは、美観だけでなく Web アクセシビリティの観点からも、Web デザインにおいて非常に重要です。視覚障害や色覚異常のある人のために、応答性とアクセシビリティを向上させるために、Web サイトの色のコントラストが適切に調整されていることを確認してください。したがって、Web サイトの色のコントラストをテストすることは良い選択です。ページの明るさのコントラストを提供できるツールをいくつか紹介します。 W3C の WCAG 2.0 標準に準拠して、4.5:1 以上のコントラスト比が理想的です。

色コントラストテストツール

これらのツールは、Web サイトの前景色と背景色のコントラストが適切になるように Web サイトを設計するのに役立ちます。一部のツールでは、色差と明度差のバランスをチェックし、明度差、色差、カラーマッチング、コントラスト、AA レベルから AAA レベルまでの対応する WCAG 2 値などの結果を表示できます。

Check My Colours は、フリーランスの Web 開発者 Giovanni Scala が提供するツールで、Web ページ内のすべての DOM 要素の前景色と背景色の組み合わせを検出するために使用できます。テストする Web サイトの URL を入力するだけで、ページ内の DOM 要素に視覚障害のある人の閲覧ニーズを満たす十分なコントラストがあるかどうかがツールに表示されます。 Check My Colours のすべての検出結果は、W3C が推奨するアルゴリズムに基づいています。下の図は、単純な Web サイト内の DOM 要素の検出結果を示しています。

カナダの Web 開発者 Jonathan Snook が提供する Colour Contrast Check を使用すると、前景色と背景色を指定して、視覚障害のある人が読み取れるだけのコントラストがあるかどうか、または白黒画面で読むのに適しているかどうかを判断できます。次の図はツールを示しています。

輝度カラーコントラスト比分析は、Web 開発者 Gez Lemon によって提供されています。16 進数のカラー コードを入力すると、前景色と背景色の明るさのコントラストを計算できます。下記の通りです。

WebAIM カラー コントラスト チェッカーは、AA 標準を満たすまで、元の前景色と背景色 (16 進数の RGB 値) を暗くしたり明るくしたりできます。このツールを使用して色を変更したり、明るさを変更したりできます。下記の通りです。

オリジナルリンク: http://www.techrepublic.com/blog/webmaster/effective-design-principles-for-web-designers-contrast/1838

元記事: http://www.csdn.net/article/2012-08-24/2809110-effective-design-principles-contrast

元のタイトル: ウェブデザイナーが従うべき効率的なデザイン原則の1つ: コントラスト

キーワード: Web、デザイナー、従うべき、効率的、設計原則、比較、ホテル業界、連邦政府、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化