ホーム > Web > 適切なウェブアクセシビリティを!WCAGに基づき背景色とテキストの組み合わせが数値化されるサイト「Color Safe」

適切なウェブアクセシビリティを!WCAGに基づき背景色とテキストの組み合わせが数値化されるサイト「Color Safe」

Color Safe

ウェブアクセシビリティとは、ウェブにおけるアクセシビリティのことで、より多くの人に情報が伝わるようにしているかどうかを指す。たとえば白い画面に白い文字でテキストを書いても読めないですよね。
このサイト「Color Safe」では、World Wide Webすなわちウェブの標準化を目指した指針を策定しているW3Cにより勧告されたWCAG(ウェブコンテンツ・アクセシビリティ・ガイドライン)に基づき、背景色とテキストの色・太さ・フォントの組み合わせを数値化して教えてくれます。

Color Safe
▲トップから「GET STARTED」をクリックするとこの画面になります。背景色、フォント、表示するテキスト、WCAGスタンダード(AAかAAAか)を選べます。

Color Safe
▲選択肢を全部合成したものがこちら。一通り設定したら「GENERATE COLOR PALETTE」をクリック。

Color Safe
▲すると、ページ上部に指定した背景色に指定したテキストが表示されます。その下は背景色に対してWCAGの基準を満たしているカラーパレットが自動生成されています。カラーパレットから任意の色をクリックすると、上部のテキストカラーがそれに変わり、上部右の数値も変化します。右端にはWCAGスタンダードの基準の数値が表示されていますので、この数値より高ければよりアクセシビリティがあると言えます。

Color Safe
▲テキストを濃い赤系にしてみると、先ほどの緑系の数値よりぐんと上がりました。

WEB製作をされている方は

→Color Safe
http://colorsafe.co/

  • 2015-03-16 (月) 8:37
  • Web

ホーム > Web > 適切なウェブアクセシビリティを!WCAGに基づき背景色とテキストの組み合わせが数値化されるサイト「Color Safe」

検索
Popular Entries
Recent Entries
Recent Comments
タグクラウド
ページ
フィード
 subscribe to my RSS
follow us in feedly
このブログをはてなブックマークに追加
Add to Google
My Yahoo!に追加
Subscribe with livedoor Reader
Add goo
Subscribe with Bloglines
メタ情報

Return to page top