色のアクセシビリティをチェックするツールまとめ(2016年版)

色のアクセシビリティをチェックするツールまとめ(2016年版)

本記事は2015年1月7日にefoナビで投稿された「色のアクセシビリティをチェックするツールまとめ」を転載し、筆者本人による加筆を加えたものです。

色のアクセシビリティとは

色のアクセシビリティとは、”利用者がテキストを読めるように、テキストとその背景とのコントラストを十分に確保すること”を指します。

重要なのはコントラストであり、W3Cの「より十分なコントラスト」を準拠することが望ましいと言えます。

コントラスト比は4.5:1が望ましいが、文字の大きさやフォントの太さによってコントラスト比を高める必要があります。

以下に紹介するツールは主として、このコントラスト比を最適化させるためのツールです。

色のアクセシビリティを実際にチェックするツールのまとめ

Colors

http://clrs.cc/

スクリーンショット 2016-05-18 17.32.47

優れたツール群を提供しています。CSSキットPhotoshop/Illustrator用のswathes、90パターンの事例(コントラスト比付き)などです。

スクリーンショット 2016-05-18 17.33.59

90パターンの中からコントラスト比を確認することもできるので便利です。

snook.ca

20140101502
http://www.snook.ca/technical/colour_contrast/colour.html
WebサービスなのでOSの制約を受けず、様々な端末で使用できます。ボタンが無いので分かりにくいですが、色(Colour)に16進数(0~F)のカラーコードを入れて「Enter/Return」を押すと反映されます。

ColorTester

スクリーンショット 2016-05-18 17.41.22
http://alfasado.net/apps/colortester-ja.html
Mac版/Win版が揃っている。UIはシンプルでわかりやすく、実用に耐えうる設計。基本無料のドネーション(寄付)ソフト。
良ツール。

アクセシビリティ・カラー・ホイール

2014101503
http://gmazzocato.altervista.org/ja/colorwheel/wheel.php
色のアクセシビリティチェックツールはUIが分かりにくいという矛盾が多いのですが、こちらも良いツールなのに操作が分かりにくいですね。

Colour Contrast Analyser(Windows/Mac)

cca1
http://www.paciellogroup.com/resources/contrastanalyser/
こちらは専用ソフトウェアになります。Windows版とMac版(いずれも英語版)があります。

カラー・コントラスト・アナライザー 2013J(Windows)

screenshot-cca-2013j-default
http://weba11y.jp/tools/cca/

上記、Colour Contrast Analyser(Windows)の日本語ローカライズバージョンです。機能は英語版とほぼ同様です。

miChecker Ver.2.0(Windows)

20110602
http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/michecker.html

若干、古いツールで残念ながら更新はWindows7で止まっているようです。(総務省)

Windows 7,Windows 8.1,Windows 10に対応したver.2.0がダウンロードできます。

情報提供:AccSell様
http://accsell.net/

Sim Daltonism(Mac)

https://michelf.ca/projects/sim-daltonism/

画面を色覚に合わせてリアルタイムに表示する。使い勝手は今ひとつ。Macのみ。

色のシミュレーター(iOS)

screen568x568
https://itunes.apple.com/jp/app/senoshimyureta/id389310222?mt=8

iPhoneアプリという、変わったアクセシビリティツール。カメラ経由で確認できるので他のツールとは棲み分けされている。

No Coffee Vision(Chromeツールバー)

スクリーンショット-2014-10-15-17.29.07
https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl

Chrome用のエクステンション。Webページのアクセシビリティを確認するのに便利

Checkmycolours

スクリーンショット-2014-10-15-17.31.38
http://www.checkmycolours.com

URLを入力するとチェックしてくれるWebサービス。ただし、HTMLとCSSのチェック&スコアなので視覚的に理解しにくく、直接デザインに関わらない所もチェックするため、正しい評価が判別しにくい欠点もある。

その他、参考文献や解説サイトなど

「Web Content Accessibility Guidelines (WCAG) 2.0」
http://waic.jp/docs/WCAG20/Overview.html

「あなたの作ったサイトは大丈夫?Webアクセシビリティの観点からチェックすべき「色」のこと。」
http://meglog.net/useful-tools/color-of-the-web-accessibility.html

「アクセシビリティを高めるために知って欲しい色の知識」
http://barrierfree.nict.go.jp/accessibility/proof/report/color/

「富士通ウェブ・アクセシビリティ指針」
http://jp.fujitsu.com/webaccessibility/v2/10.html

※気づいたことや新しい情報があれば随時追記していきます。

コメント