こんにちは、こんばんは。にゃんこ師匠です。「冒頭の挨拶いれろ!」と担当に注意されました。本当に編集の担当っぽくなってきていて、最近怖いです。

さて、今回はアクセシビリティに配慮した注意と警告に最適の色 [1/3]アクセシビリティに配慮した注意と警告に最適の色 [2/3]などで紹介してきた色のアクセシビリティを実際にチェックするツールのまとめです。

snook.ca

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

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

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(Windows)

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

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

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のチェック&スコアなので視覚的に理解しにくく、直接デザインに関わらない所もチェックするため、正しい評価が判別しにくい欠点もある。