contrast ratio

 

ウェブサイトのテキストカラーって何色がいいのか悩む方も多いかと思います。

白背景に黒字みたいなはっきりした色は読みやすいかもしれないけど、味気ない。

かといって薄いグレーとかにしちゃうと背景に溶け込んじゃって読めなくなったり…。

このあたりは多分デザイナーの主観で決まるんでしょうけど、きちっと数値化されてれば「この組み合わせは読みやすい」「これは読みにくいからだめ」みたいなのが言えるようになるので例えばデザイナーが変な色にしてきたときやクライアントさんが読みにくくなるような組み合わせを望んできた時に説得する材料にもなるんじゃないんでしょうか?

そんな時に利用できそうなのがこのcontrast ratioです。

WCAG(ウェブコンテンツ・アクセシビリティ・ガイドライン)2.0というガイドラインがあるそうで(自分も知らなかったのですが)それをもとに指定した組み合わせがガイドラインに沿っているかどうかを判断してくれるみたいです。

contrast ratio

つかいかた

まずは、サイトにアクセスしましょう。

冒頭のスクリーンショットのページが開きますので、左側のテキストボックスに背景色、右側に文字色を入力するだけです。

contrast ratioの使い方

すると、ページ全体がプレビューになってますので、入力すれば即座に反映されます。

また、中央の丸い部分に1〜21くらいまでの数字が出てきます。この数字が高いほど見やすいということですね。
丸い部分にマウスを乗せると上記画像のように吹き出しでコメントが出てきます。

例えば上の例なら、

8.6:Passes AAA level for any size text (すべての文字サイズでAAAレベルでパス)

もう少し文字色が薄くなってくると、

4.3:Passes AA for large text (avobe 18pt or bold above 14pt)(大きな文字ならAAレベルでパス(18pt以上、または太字なら14pt以上))

ほとんど同じくらい色が近くなってくると、

2:Fails WCAG 2.0 :-((WCAG2.0に失敗(WCAG的には失格ってとこですかね?))

といった具合で、どのくらいのサイズまでなら読めるよといったことも教えてくれます。

また、入力欄の右下にある「Set as background color」をクリックすれば文字色と背景色を入れ替えることができます。

逆のパターンを見てみたい場合なんかには便利ですね。

まずは緑文字になるっぽい4前後を目指して組み合わせを模索してみるのがいいのではないでしょうか?

コメントする