背景色から見やすい文字色を数値化して教えてくれるWebサービス 『Color Safe』

背景色から見やすい文字色を

数値化して教えてくれるWebサービス。

Web制作、パンフなど様々な

デザインシーンで役立ちます。

Color Safe リンク先はこちらから

背景色と文字色って意外に悩むシーンが

多くて、白背景なら無難に黒文字が

見やすいと思いますが、

ちょっとダークな背景とかに

文字色って困る場合があります。

そういう時に便利なWebサービスです。

まずは画面上部から

Backround Colorで背景色、

Font-FamilyやFont-Sizeなどから

フォントの設定をします。

Goal Ratioは見やすさ指数の

一定の基準以上だけを表示する項目で

AAやAAAが選択できます。

AAAの方が見やすくなります。

WCAGというアクセシビリティという基準で

数値が決まっているようです。

フォント色に困るような背景色を

選んでみました。

画面上部に設定した背景色に

画面下部から選んだ文字色の

プレビューと共に右側に

Current Ratioで見やすさ数値が

表示されています。

この数値が高い方が見やすくなります。

背景と文字色を同系色にしてみると

数値が3.03となり低くなりました。

ほとんど同じ色だと1まで下がりました。

なるべく数値が高い色を選択すると

見やすさ、アクセシビリティが上がります。

Web制作やデザイン、様々なシーンで

役立つ便利なWebサービスです。