色のアクセシビリティをチェックするツールまとめ(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)

あなたにおすすめ

ロイヤリティフリーの無料ストックフォト(写真)1+8選... ロイヤリティフリー(ライセンスフリー)の無料写真を集めているサイトも順調に増えてます。全員が発信者となる現在では、こうしたサイトの重要度・便利度は増すばかりですね。 基本的にパブリッックドメイン(商用利用可能・無料・用途の制限なし)で...
リニューアルのケーススタディ、PSDファイルから自動コーディング、ロゴ検索ツール、グラフ用フォント(... こんにちは。 今週の【UX・デザイン】の情報共有です。 UI ・UX アプリのリニューアルのケーススタディ 2年間まったく更新されなかった健康保険アプリのリニューアルの話です。 他社はどのようにしてリニューアルを行...
UI・UXのベストプラクティス、フラットデザインについての実験結果、ATLASSIANの新CI、無料... こんにちは! 今週の【UX・デザイン】の情報共有です。 UI ・UX UI・UXのベストプラクティスまとめ 心理学とマーケティングを双方のスペシャリストであるNick Kolendaさんのサイトです。 彼のサイト内...
「Design Better」ポッドキャスト、CSSでのレスポンシブな端末、無料フォント、日本科学未... お疲れ様です。 今週の【UX・デザイン】の情報共有です。 UI ・UX 「Design Better」のポッドキャスト 他社や海外において、どのようなUI/UXの戦略が実践されているのか、そしてどのような手法がベストプラ...