適切なウェブアクセシビリティを!WCAGに基づき背景色とテキストの組み合わせが数値化されるサイト「Color Safe」
ウェブアクセシビリティとは、ウェブにおけるアクセシビリティのことで、より多くの人に情報が伝わるようにしているかどうかを指す。たとえば白い画面に白い文字でテキストを書いても読めないですよね。
このサイト「Color Safe」では、World Wide Webすなわちウェブの標準化を目指した指針を策定しているW3Cにより勧告されたWCAG(ウェブコンテンツ・アクセシビリティ・ガイドライン)に基づき、背景色とテキストの色・太さ・フォントの組み合わせを数値化して教えてくれます。
▲トップから「GET STARTED」をクリックするとこの画面になります。背景色、フォント、表示するテキスト、WCAGスタンダード(AAかAAAか)を選べます。
▲選択肢を全部合成したものがこちら。一通り設定したら「GENERATE COLOR PALETTE」をクリック。
▲すると、ページ上部に指定した背景色に指定したテキストが表示されます。その下は背景色に対してWCAGの基準を満たしているカラーパレットが自動生成されています。カラーパレットから任意の色をクリックすると、上部のテキストカラーがそれに変わり、上部右の数値も変化します。右端にはWCAGスタンダードの基準の数値が表示されていますので、この数値より高ければよりアクセシビリティがあると言えます。
▲テキストを濃い赤系にしてみると、先ほどの緑系の数値よりぐんと上がりました。
WEB製作をされている方は
→Color Safe
http://colorsafe.co/
- 2015-03-16 (月) 8:37
- Web