テキストと背景のカラーがアクセシブルかチェックし、適した組み合わせに調整できる便利ツール -Contrast Ratio

Post on:2013年4月10日

sponsors

テキストと背景のカラーの組み合わせで、視覚的にどのくらい読めるか数値化するオンラインツールを紹介します。
いまいち読みにくい時には、ツールで最適な組み合わせに調整することもできます。

Contrast Ratioの使い方は、簡単です。
入力欄の左に背景、右にテキストのカラーを入力するだけで、すぐに反映されます。
カラーは、hsla, rgb, 16進数などに対応しています。

当サイトの背景とテキストのカラーを入力してみます。

入力したカラーはすぐに背景とテキストに反映され、WCAGの識別可能レベルが表示されます。

AAAでました

AAAが最高で、点数が低い時は組み合わせを検討した方がよいでしょう。

カラーを調整したい時はいきなりカラーコードを入力してもよいですが、背景・テキストのカラーの入力欄にカーソルを合わせ、キーボードの矢印キーで少しずつ変更することもできます。

上下キーで1ずつ、+Shiftキーで10ずつ

※16進数でも増減できますが、桁が変わる時にうまくいかないため、hslaやrgbなどの10進法の値がよいです。