デザインのコントラストをチェックして「読みやすさ」を向上させる10のツール
私の日常業務では、ほとんどのお客様のサイト用にグラフィックデザインを作成していますが、すべてのサイト用ではありません。 それらのいくつかは、デザインスタジオの助けを借りてビジュアルデザインを行い、 HTML + CSS + JavaScriptおよびCMSへの移行を任せています。 これが起こると、ほとんどの場合、デザインの色のコントラストが不十分になるという問題が発生します。 これらの問題は非常に二次的で許容される場合もありますが、多くの場合、修正が必要な領域があります。
なぜ私が気にするのか（そしてなぜ気にする必要があるのか）疑問に思っているなら、ウェブサイトの色のコントラストは非常に簡単です。 テキストの背景とのコントラストが十分でない場合、問題が発生します。 色覚異常のある人や、理想的な状態（モニターの不良、窓の反射、太陽のまぶしさ）に満たない状態でWebを閲覧する人は、少なくとも問題なくテキストを読むことができません。
しかし、あなたはこれを望まないでしょう？ 私たちのほとんどがそうであるように、あなたがサイトにテキストを公開するなら、私はあなたが読みたいからだと思う。 したがって、色のコントラストは、あなたが考えているかどうかに関係なく、あなた自身、顧客、そしてエンドユーザーにとって非常に重要です。
私は自分で作ったデザインの助けを借りて、または自分の助けを借りてコントラストをチェックすることに慣れているので、私たち一人一人がすべきことを当たり前だと思っています。 どうやら、これはそうではなく、色のコントラストをチェックするのに役立つツールのリストを共有する必要があるように思えます。 この記事について。
色係数が正しく計算される方法の非常に簡単な説明：いくつかの異なるアルゴリズムがあり、一部のアプリケーションはWCAG 2.0ドラフトで言及されている明度コントラスト比アルゴリズムを使用し、他のアプリケーションは色の明るさと色差のアルゴリズムを使用しますおよび付属のドキュメントWCAG 1.0で言及されている色差アルゴリズム） 。 それらのいくつかは両方を使用します。
私はそれらのどれも（少なくとも今のところ） W3Cによって承認されていないことに注意しますが、テキストの色と背景の組み合わせが色覚異常の人や他の視覚障害のある人に問題を引き起こす可能性があるかどうかを判断するのに非常に適しています。
これらすべてに言及したので、ツール自体に移りましょう。 Web経由で使用できるものもあれば、別個のアプリケーションまたはブラウザーへの追加物もあります。
リストは次のとおりです。
- カラーコントラストチェック ： ジョナサンスヌークが提供する最初の非常に直感的なオンラインツールで、16進形式またはスライダーの助けを借りて、前面と背景の色を追加できます。 ツールは即座に結果を出します-この組み合わせがどのように見えるか、そしてテストに合格するかどうかを示します。
- カラーコントラストアナライザー ：Gez Lemonのカラーコントラストアナライザーは、最初のものと同じアルゴリズムを使用するため、結果は同じになります。 違いは、インスタントエフェクトやスライダーがないことです。 つまり、最初にフォームに値を入力し、それを送信して何が起こったかを確認する必要があります。
- カラーコントラストビジュアライザー ：わずかに異なるアプローチを使用して、Tom Hooperのカラーコントラストビジュアライザーは、カラーパレットに十分なコントラストを与える色を強調表示して、許容可能な色の組み合わせを見つけるのに役立ちます。 Color Contrast VisualiserはFlashとAdobe AIRで利用できます。適切でないアドオン（プラグイン）をインストールして、機能しない場合は動作させます。
- Color Contrast Analyzer Firefox拡張機能 ：手動で色を入力する代わりに、Gez LemonのFirefoxプラグインはドキュメント内のすべてのテキスト要素を検索し、背景とテキストの色の違いを確認します。 彼は結果を新しいタブで開き、色のプレビューを表示します。 少し退屈に思えるかもしれませんが、デザイン内の問題のある場所を見つけるには良い方法です。 残念ながら、このツールは画像を認識しないため、グラフィックのないHTMLドキュメントで使用します 。
- CSSアナライザー ：Gez Lemonのもう1つのツールであるCSSアナライザーは、 CSSの色のコントラストをテストします。 また、CSSを検証し、適切なテキストサイズが相対単位で指定されていることを確認します。
- 輝度コントラスト比アナライザー ：このツールはGez Lemonによって作成されました-Trace R＆D Centerが開発したアルゴリズムに従って前景と背景の色をチェックします。
- Vischeck ：オンラインまたはPhotoshopのアドオンとして使用できるカラーブラインドシミュレーター（[フィルター]メニューに表示されます）。 オンラインバージョンは、アップロードする画像に基づいて効果をシミュレートし、Photoshopプラグインは作業中のドキュメントの色を変更します。
- コントラストアナライザー、バージョン2.0 ：WindowsおよびMac OS Xアプリケーション：Webページを分析する以外にも多くのことができる非常にエレガントなアプリケーション。 前景と背景の色を数字またはスライダーで指定し、適用するアルゴリズム（色/輝度または照明）を指定し、選択した色をさまざまな種類の視覚障害と比較して確認および表示できます。
- Graybit ：オンラインツール、著者：Jona FenocchiおよびMike Cherim。 名前が示すことを行います -WebページへのURLを入力します 。これは灰色の濃淡に変わり、ブラウザーに表示されます。
- Sim Daltonism ：Mac OS Xでのみ利用可能です。このアプリケーションはコントラストを計算しませんが、有用なことを行います。 さまざまなタイプの色覚異常をリアルタイムでシミュレートするため、デザインが問題を引き起こすかどうかを簡単に確認できます。
私がここで言及したすべてのツールは無料ですので、日常の仕事であなたに合ったものを見つけるためにそれらをすべて試してください。 大きな違いはないと思います。コントラスト比を決定し、アプリケーションによって色覚異常をシミュレートするために正確に何を使用しますか。
色覚異常をシミュレートするためのツールを使用すると、この問題に苦しんでいる人が周囲のテキストと色のみが異なるリンクを区別することがどれほど難しいかを知ることができます。
最後に、これらのアプリケーションの結果（または、むしろそれらが使用するアルゴリズム）を盲目的に従うべきではないと思います。 重要ではない大きな見出しとテキストはテストに合格しない場合がありますが、メインテキスト（たとえば、書かれた記事のテキスト）は必須です。
これらの結果をアクションのガイドとして使用し、ここに常識を付ければ、一般的なコントラストと快適な美学のバランスを見つけることができます。
alexbigから：設計後に枠を探しないように、 最初から正しく行います （または、設計者に依存しない場合は、使用方法を設計者に説明します！）。