2017 05 ≪  06月 123456789101112131415161718192021222324252627282930  ≫ 2017 07


スポンサーサイト

- --------(--) - 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
この記事のURL | スポンサー広告 | ▲ top

Colour Contrast Analyser - 拡張機能

- 2009-01-18(Sun) - 

今回紹介するFirefox拡張機能はColour Contrast Analyserです。
これは、閲覧ページ内にある各要素のカラーコントラストを調べて、そのページが読みやすいか・見やすいかをかんたんにチェックできます。

ページ内で右クリックしてコンテキストメニューの「カラーコントラストアナライザー」→「全ての検査」を選択すると、新しいタブで結果が一覧表示されます。ページ上部には、

  • 輝度率(文字色の輝度と背景色の輝度との比率)が3:1以下
  • 明度の違い(文字色と背景色の色差)が125以下
  • 色相の違い(文字色と背景色の明度差)が500以下

に該当する要素数が表示されます。Failuresの欄が3つともゼロだと問題ありませんが、そうでない場合は下に表示された一覧から不適合の要素が黄色く強調表示されます。サンプルも表示されるので、不適合な要素はどれくらい読みづらいのかが一目で分かりますね。

ページ下部にはW3CによるWCAG 2.0(Webコンテンツ アクセシビリティ ガイドライン)とAERT(アクセシビリティ評価と修正ツールのためのテクニック文書)で示されている基準値が掲載されています。Colour Contrast Analyserでは輝度率が3:1以下で不適合となりますが、大きな文字(18pt以上もしくは太字で14pt以上)でなければレベル2では4.5:1、レベル3では7:1が基準値となっています。

当ブログをチェックしてみたところ不適合は0でしたが、Wikiでは9つほど不適合となってしまいました。wikiwiki.jpではいつになったらCSSをカスタマイズできるようになるのかなぁ、FirefoxだとCSSの警告も大量にでちゃうし…。Webサイトを管理している方はColour Contrast Analyserで読みづらい色使いになっていないかチェックしてみましょう。

関連記事
スポンサーサイト
この記事のURL | 拡張機能 | コメント(0) | トラックバック(0) | ▲ top
<< | メイン | >>
 
コメント

コメントの投稿















管理者にだけ表示を許可する


▲ top
 
トラックバック
トラックバックURL
→http://fxwiki.blog63.fc2.com/tb.php/182-c640f8a5
| メイン |
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。