カラーコントラストチェッカー｜文字色と背景色の読みやすさをWCAG基準で判定

コントラスト比とは

コントラスト比は、2つの色の「明るさの差」を1〜21の数字で表したものです。同じ色同士なら1、白と黒の組み合わせなら最大の21になります。数字が大きいほど、文字が背景からくっきり浮かび上がって読みやすくなります。

この計算方法は、Webのアクセシビリティ（使いやすさ）に関する国際的なガイドライン「WCAG」で定められています。単純に色の数値を比べるのではなく、人の目が緑を明るく、青を暗く感じる性質を反映した「相対輝度」を使って計算するのが特徴です。

判定基準の読み方

「大きな文字」とは、おおむね24px以上の文字、または約18.7px以上の太字を指します。見出しは本文より大きく太いため、少しコントラストが低くても読めるという考え方です。反対に、小さな注釈やボタンの中の文字ほど、しっかりしたコントラストが必要になります。

使い方

1. 「文字色」と「背景色」を、カラーピッカーで選ぶか、#1f2937 のような16進数で入力します。
2. コントラスト比と、各基準の合否が自動で表示されます。下のプレビューで実際の見え方も確認できます。
3. 基準を満たしていない場合は「AAを満たす文字色を提案」を押すと、今の色味をできるだけ保ったまま、明るさだけを調整した文字色を提案します。

提案機能は、色相（赤っぽい、青っぽいなどの色味）と彩度はそのままに、明るさを少しずつ変えて基準に届く色を探しています。ブランドカラーの雰囲気を残しながら読みやすさを上げたいときに便利です。

よくある「読みにくい配色」

• 白背景に薄いグレーの文字：#999999 の文字は、白背景ではコントラスト比が約2.8で、AAの基準に届きません。白背景でAAを満たすには #767676 以上、AAAを満たすには #595959 以上の濃さが目安です。
• 鮮やかな色同士の組み合わせ：赤地に緑の文字などは、色相が違っても明るさが近いと読みにくくなります。色覚の特性によっては区別そのものが難しくなります。
• 写真の上に置いた文字：背景の明るさが場所によって変わるため、一部だけ読めなくなりがちです。文字の下に半透明の帯を敷くと安定します。
• ボタンの白文字：明るいオレンジや水色のボタンに白文字を乗せると、基準を満たさないことが多い組み合わせです。

数字だけに頼らないことも大切

コントラスト比は便利な目安ですが、これだけで読みやすさが決まるわけではありません。文字の太さ、行間、フォントの種類、画面の明るさによっても見え方は変わります。極端に細いフォントは、基準を満たしていても読みにくいことがあります。

また、色だけで情報を伝えない工夫も必要です。「赤字の項目は必須です」のように色だけで区別すると、色の見分けが難しい人には伝わりません。アイコンや「必須」という文字を添えると、誰にとっても分かりやすくなります。