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

ウェブサイトの配色を考える場合、色覚障害を持つ人にとって見やすい色かどうかということが問題になります。たとえば、緑色の背景に赤色の文字を読むのが困難な人もいます。
色覚障害には、赤の視感度がないか弱い「第一色盲」「第一色弱」、緑の視感度がないか弱い「第二色盲」「第二色弱」、青の視感度がないか弱い「第三色盲」「第三色弱」があります。色覚障害は男性に多く、全男性の5%程度は何らかの色覚障害を持っていると言われています。
色覚障害について詳しくは、以下のページをご覧ください。

色覚に障害を持っていたとしたら、あなたのサイトは見えるでしょうか ?

また、白内障などの人も、色のコントラストや配色によっては文字が見えにくくなります。

これらの人にとって見やすいサイトにするためには、文字色と背景色や、画像中の色のコントラストに配慮する必要があります。その支援ツールをご紹介します。

ただ、以下で紹介するツールは、あくまでもシミュレーションツールです。色覚障害、白内障といっても人により見え方、また、見やすい配色が異なります。ツールはあくまでも補助的手段であることは忘れないでいただきたいと思います。

New カラー・コントラスト・アナライザー

画面上の背景色と前景色のコントラストを W3C が提案している計算式で判定、シミュレーションします。

aDesigner

ロービジョンモードで、視力、色覚障害、水晶体透過率(白内障)の程度を指定して、見え方をチェックできます。

ColorAccess

画面の指定範囲を、第1色盲の場合の見え方の推定画像、第2色盲の場合の見え方の推定画像、輝度値画像に変換して表示し、それぞれの見え方をチェックできます。

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

上記のWebページ上で背景色と文字色を指定すると、色覚障害のある人にどのように見えるのかを確認できます。

Vischeck

ウェブページと画像ファイルの場所を指定すると、色が第一色盲の人の見え方、第二色盲の人の見え方、第三色盲の人の見え方がそれぞれ表示されます。このパソコンにインストールして使用できるダウンロード版もあります。

ColorSelector

文字色と背景色をダイアログで指定し、色覚障害、白内障の人にとって見やすいかどうかを判定します。

ColorDoctor

ウェブサイトや動画、プレゼンテーション資料など、画面に表示されるすべてのものが色覚障害者にとってどう見えるのかをリアルタイムでチェックできます。

Colour transformations - Hex (英語)

Webセーフカラー216色が、色覚障害のある人にどのように見えるかの一覧表を掲載しています。

Safe Web Colours for colour-deficient vision: Palette files (英語) 

色覚障害のある人にとって画像中の色がどのように見えるのかをシミュレーションするカラーパレットファイルをダウンロードできます。Paintshop ProまたはPhotoshop上でこれらのカラーパレットに切り替えることで、色覚障害のある人にどのように見えるのかを確認できます。

色々の色

色覚障害者用に、パソコンの画面に表示される文字や画像の色を、色の名前やRGB値で表示するソフトです。