LOGzeudon

名古屋で働いているWebデザイナーのブログです

サッ!とWCAG基準の配色スコア判定ができる有料アプリ Contrast がいい感じだった

サッ!とWCAG基準の配色スコア判定ができる有料アプリ Contrast がいい感じだった

手軽に色のアクセシビリティをチェックできる、Contrast というおしゃれな有料アプリ(現時点で¥840)が話題になっていました。

usecontrast.com

使い方や注意点について、こちらの記事が丁寧にまとめられています。
さらにContrast公式サイトのガイドページ日本語訳も掲載されているので、ぜひ読んでみてください。

parashuto.com

さて、当記事では実際に使ってみた感想を書いてみます。

使い方

購入して起動すると、このようなポップアップが出ます。英語Onlyです。

f:id:rokuzeudon:20180908212138j:plain

早速「Get Started」をクリック。
すると、メニューバーのステータスメニューに追加されていたContrastアイコンにフォーカスします。

f:id:rokuzeudon:20180908212318j:plain

Dockには表示されず、ステータスメニューに常駐するタイプのアプリです。

f:id:rokuzeudon:20180908222353p:plain

表示されたウィンドウ内の左入力欄がForeground(文字)色右がBackground(背景)色です。

カラーコードを入力またはピッカーで選択すると、左端の配色のスコアと右端のコントラスト比の値が変化します。
それぞれ、詳しくはガイドを参照してください。

ウィンドウをドラッグすると、好きな位置に移動できます。
この状態では常に最前面に表示され、アプリを切り替えることなくチェックできます。

f:id:rokuzeudon:20180909010540j:plain

また、このアプリではグローバル・キーボードショートカットを割り振ることができます。 右端にある歯車アイコンからPreferencesへ。

f:id:rokuzeudon:20180908222539p:plain

これによって、素早く前面色と背景色を選択・チェックすることができます。

利点

  • ショートカットキーですぐ使えるのが圧倒的に楽
    • Digital Color Meter.app の代わりにもなる
  • 利用しているデザインツールを問わず、制作中のデザインカンプなりモックなりでチェックができる
  • ブラウザで表示しているページでも気軽にチェックできる

使ってみた

当ブログで試してみました。ショートカットキーは試しに cmd + shift + [ cmd + shift + ] に割り振っています。
Photoshop/Illustrator/XDでよく使うショートカットキーと被っていました、残念…。今はcmd + option + [ cmd + option + ] にしています。オススメのショートカットキー募集中です。。

f:id:rokuzeudon:20180908222930p:plain

本文の文字色 #454545 と背景色 #ffffff。結果、スコアAAAでした。

f:id:rokuzeudon:20180908222940p:plain

カテゴリーリンクは、文字色 #999999 と背景色 #f8f8f8。スコアは Fail!😱
近々調整しようと思います…。

まとめ

ごく手軽にチェックできて非常に良いアプリでした。今後頻繁に使うと思います。
もしより良いチェック方法があれば、ぜひ教えてください。

参考ツイート

おまけ

Contrastが話題になっていたころ、無料で使えるWebサービス「Color Contrast Checker」も話題になっていました。

f:id:rokuzeudon:20180908223420p:plain

こちらはコントラスト比だけチェックできます。
カラーコードの入力が必要ですが、「Lighten」「Darken」ボタンで少しずつ色を変えられるのがユニークです。