chromeで文字のカラーコントラストを確認する超簡単な方法

accessibility-logo Webアクセシビリティ

 

Webアクセシビリティなどでカラーコントラストを検査したいとき、対象がテキストであればchromeを使って簡単に検査できる。

 

やり方

chromeのデベロッパーツールを使う。

  • Windowsの場合:Shift+Ctrl+C
  • Macの場合:⇧⌘C

 

を押下して、対象のテキストにマウスオーバーする。

すると、

 

 

 

chromeのカラーコントラストの画面

上図のような画面がでるので、

「ACCESSIBILITY」の「Contrast」欄をチェックする。

Aaで、緑のチェックマークが付いてれば、AAのカラーコントラストに準拠している。

 

検査対象の文字が、テキストでなく、画像の場合は、ツールを使うと便利。

 

 

 

コメント

タイトルとURLをコピーしました