リンクテキスト色を修正した話と Colour Contrast Analyser のカラーピッカー機能を発見した話

以前の記事「0045-140827 文字色のコントラスト比を確認したら、リンクテキストの色を修正することになった – mzmjp.net::blog」で書いた通り、リンクテキスト色のコントラスト比が WCAG2.0 の 等級AA にあたる「最低限のコントラスト」すらクリアしていない問題がこのブログでありました。

今回はこの問題を解消したことについてのメモ書きと、上の記事内で Colour Contrast Analyser というアプリケーションについて書いたことの訂正です。

リンクテキスト色を修正した話

ずっとほっぽらかしていたリンクテキスト色修正。なんで放置していたかというと、色の決め手が無かったからです。青系の色にするのは決まっていたのですが、どんな色がいいんだろうと考えていました。

で、リンクテキスト色について参考になるページは無いかなと探していたところ、クリック率の高いテキストリンクの色は?【2013年版】 | ウェブ力学というページにたどり着きました。こちらのページでは、「有名なサイトではリンクテキストにどんな色を使っているのか」が表でまとめられています。

こちらを参考にして、いくつか試した結果、リンクテキスト色は color: #1122cc; にしました。Google の2013年1月時点でのリンクテキスト色です。問題だったコントラスト比は“8.60”になりました。これで問題解決です。

Colour Contrast Analyser でカラーピッカー機能を発見した話

コントラスト比の問題を書いた記事内で、コントラスト比を調べるアプリケーション“Colour Contrast Analyser”のことを書きました。その時は気づかずに「スポイトのアイコンが無いので、カラーピッカー機能が無い」と書いてしまったのですが、数日前にカラーピッカー機能を発見しました。以下に、どうやって色をピックするかを書いておきます。気づいてしまえば、なんてこと無いことでした。。。

Colour Contrast Analyserの初期画面

Foreground(前景色)の Colour select という項目の色を表示している部分をクリックすると、“Colors”というウィンドウが出てきます。

色を調節するためのウィンドウ

このウィンドウの左下の部分にスポイトがありました。そのアイコンをクリックしたら、無事カラーピッカーとして動いてくれました。何で前にさわった時は気づかなかったんだろう。。。