Mac版 Colour Contrast Analyserの使い方

  • 公開日:

色のコントラストのチェックツールとしてカラー・コントラスト・アナライザー 2013Jが提供されていますが、今のところWindows版のみです。Mac版は近日公開予定とのことですが、英語版であればColour Contrast Analyser (CCA) | The Paciello Groupからダウンロードできます。

Colour Contrast Analyserのホームページ

「Colour Contrast Analyser 1.5.13 for Mac OS X v10.8/v10.9」となっていますが、私のPC環境(Mac OS X v10.10)でも問題なく動作します。

今回は、当ブログのリンクテキストの色を「等級AA」を達成する色に変更したいと思います。

この記事の目次

Mac版Colour Contrast Analyserの使い方

1. Colour Contrast Analyserを起動する

Mac版のColour Contrast Analyserは、Windows版のものとはインターフェイスと操作方法が少し異なります。起動時にはスポイトが表示されていませんが、後ほど出てきますので安心してください。

起動時のColour Contrast Analyserのインターフェイス

2. 前景の色を選択する

[Foreground]の[Colour Select:]をクリックすると、[Colors]パネルが表示されます。

Colour Contrast AnalyserからColorパネルを表示

[Colors]パネルの左下にスポイトのアイコンが表示されるので、これをクリックして前景色を選択します。

スポイトで前景色を選択

修正前のリンクテキストのコントラスト比は「2.76:1」で、アクセシビリティを高める必要があります。

スポイトで前景色を選択した後の結果

3. 色を調整する

[Colors]パネルにあるスライダーで色を調節することができ、スライダーを動かすと選択している色のコントラスト比と各等級の達成状況が表示されます。このスライダーを使用して「等級AA」を達成する色を作りました。

スライダーは同じ色相で達成基準を満たす色を作りたいときに便利です。実はこの機能は、Windows版のColour Contrast Analyserにはありません。

等級AAを達成する色を作成

リンクテキストの色の修正の結果

修正前と修正後のリンクテキストの色を比較してみました。色を修正したことで文字の可読性が良くなったように思いますが、いかがでしょうか?

修正前と修正後のリンクテキストの色を比較

これを機にアクセシビリティの向上に向けて少しずつ改善をしていきたいと思います。