カラーコントラストチェッカー

① このツールの使い方

• •1. テキスト色を入力する：文字の色をHEXコードで入力します。
• •2. 背景色を入力する：その文字が乗る背景の色をHEXコードで入力します。

入力すると同時にコントラスト比が計算され、WCAG（Web Content Accessibility Guidelines）のAA・AAA基準を満たしているかが判定表示されます。「黒/白」「グレー/白」などのプリセットから、よくある組み合わせをワンタップで試すこともできます。

② コントラスト比とは何か

コントラスト比とは、2つの色の「明るさの差」を数値化したものです。真っ黒と真っ白の組み合わせが最もコントラストが強く21:1、同じ色同士では最も弱く1:1になります。数値が大きいほど、2色がはっきり区別しやすい（見やすい）組み合わせであることを意味します。

計算では、まず各色を人間の目に近い明るさの感じ方に変換した相対輝度（relative luminance）を求めます。RGBの各成分をいったん0〜1の比率に変換し、ガンマ補正と呼ばれる非線形な計算を経て、赤・緑・青それぞれの重み（人間の目は緑を最も明るく感じ、青を最も暗く感じる）を掛け合わせて合計します。そのうえで、明るい方の輝度と暗い方の輝度を使い、コントラスト比 ＝ (明るい方の輝度 + 0.05) ÷ (暗い方の輝度 + 0.05)という式で計算しています。

③ WCAGのAA・AAA基準

WCAG（Web Content Accessibility Guidelines）は、Webコンテンツをより多くの人にとってアクセスしやすくするための国際的なガイドラインです。弱視の方や高齢者など、色の区別がつきにくいユーザーにも文字が読めるよう、コントラスト比の達成基準が定められています。

文字が大きいほど、多少コントラストが弱くても人間の目には判別しやすいため、大きな文字の基準はやや緩めに設定されています。多くの企業サイトや公共機関のWebサイトでは、少なくともAA基準を満たすことが推奨・義務化されているケースが増えています。

④ 基準を満たさないときの対処法

コントラスト比が基準を下回っている場合、多くは文字色を背景色に対してより濃く（または薄く）することで解決します。たとえば薄いグレーの文字を白背景に使っている場合、グレーを一段階濃くするだけでAA基準をクリアできることがよくあります。ブランドカラーの都合でどうしても薄い色を使いたい場合は、背景側を少し暗くする、あるいは文字にごく薄い縁取り・影をつけて視認性を補うといった工夫も検討できます。

⑤ 実務での使いどころ

Webサイトやアプリのデザインで配色を決める段階、あるいはコーディング後に「このボタンの文字、少し見えづらいかも」と感じたときに、感覚だけでなく数値で確認できるのがこのツールの強みです。特に薄い色のテキスト（プレースホルダー・キャプションなど）は、デザイン上のアクセントとして意図的に薄くしていることが多いものの、アクセシビリティ基準を大きく下回っていないかの確認に役立ちます。

テキスト色・背景色をHEX・RGB・HSLで相互に変換したい場合はカラーコード変換ツールもあわせてご利用ください。

⑥ 色覚特性への配慮とコントラストの関係

色の見え方は、色覚特性（いわゆる色弱・色盲）によって人それぞれ異なります。たとえば「赤と緑の組み合わせ」は一部の色覚特性を持つ人にとって区別がつきにくいことが知られていますが、コントラスト比（明るさの差）が十分に確保されていれば、色相の違いに頼らなくても文字と背景を区別しやすくなります。つまりコントラストチェックは、色覚の多様性に配慮したデザインを作るうえでも土台になる考え方です。色だけで情報を伝えるのではなく、アイコンや下線など色以外の手がかりを併用することも、あわせて意識するとより多くの人にとって使いやすいデザインになります。

⑦ ボタン・アイコンなど非テキスト要素の基準

WCAGには、文字だけでなく「UIコンポーネント（ボタンの枠線・アイコンなど）」に対する基準もあります。AA基準では、こうした非テキスト要素は背景に対して3:1以上のコントラスト比が推奨されています。ボタンの枠線が背景色に近すぎて輪郭が見えにくい、アイコンが薄すぎてクリックできる場所だとわかりにくい、といった問題も、このツールで文字色の代わりにボタンの色や枠線の色を入力すれば同じように確認できます。フォームの入力欄の枠線など、見落とされがちな箇所ほどコントラストが不足しやすいため、デザインの最終チェックとして一通り確認しておくと安心です。公開前のチェックリストにこのツールでの確認を組み込んでおくと、リリース後の修正対応を減らすことにもつながり、より多くのユーザーにとって使いやすいサイトになります。小さな配色の違いが、サイト全体の読みやすさを大きく左右することを忘れないようにしましょう。

⑧ 判定で見落としやすい落とし穴

判定の数値を読むときは、次の点に気をつけてください。まず、4.49:1のような「ぎりぎり未満」の値を四捨五入して4.5:1とみなすことはできません。基準は数値そのものの比較なので、わずかに下回っていれば不合格です。次に、半透明の文字や背景は、重なった結果の色を使って確認する必要があります。透明度を指定している場合は、背景と混ざったあとの見た目の色をHEXで求めて入力してください。写真やグラデーションの上に文字を置く場合は、いちばん明るい部分と暗い部分の両方で確認すると安心です。また、ロゴや装飾目的の文字、無効状態のボタンはWCAGの基準対象外とされていますが、無効状態でも読めるに越したことはありません。ダークモードを用意しているサイトは、ライトとダークの両方の配色で別々に確認しましょう。