色のコントラスト比チェッカー

「なんとなく薄いグレーの文字がおしゃれ」——Webサイトでよく見る配色ですが、その文字が読めない人が一定数います。日本人男性の約5%、女性の約0.2%が色覚に特性を持ち、加えて加齢による見え方の変化、屋外の明るい場所、安価な液晶といった条件も重なります。

そこで基準になるのがコントラスト比です。文字色と背景色の明るさの差を1:1から21:1の数値で表したもので、W3Cのアクセシビリティ指針（WCAG 2.1）が具体的な合格ラインを定めています。このツールは、2色を入れるだけで比率と合否を出し、足りない場合は基準を満たす最も近い色まで提案します。

色のコントラスト比チェッカー（WCAG判定つき）

文字色と背景色のコントラスト比を計算し、アクセシビリティ基準を満たしているかを判定します。基準を満たす近い色も提案します

文字色

背景色

CONTRAST RATIO: —

AA 通常テキスト
（4.5:1以上）—

AA 大きい文字
（3:1以上）—

AAA 通常テキスト
（7:1以上）—

UI部品・図形
（3:1以上）—

見出しのサンプル（22px相当）

本文のサンプルです。この組み合わせで長い文章を読んだときに、目が疲れないかどうかを確認してください。実際の閲覧環境では、画面の明るさや周囲の照明によっても見え方が変わります。

覚えるべき数字は3つだけ

対象	必要なコントラスト比	該当する等級
通常サイズの本文	4.5 : 1 以上	AA（実務上の必須ライン）
大きい文字（18pt / 太字14pt 以上）	3 : 1 以上	AA
ボタンの枠線・アイコン・グラフ	3 : 1 以上	AA
より確実に読ませたい本文	7 : 1 以上	AAA（推奨）

実務では本文4.5:1、大きい文字と部品は3:1だけ覚えておけば大半の場面に対応できます。日本のJIS X 8341-3もWCAGと同じ基準を採用しているため、公共系の案件でもこの数字がそのまま使われます。

「18pt以上」は日本語だと何px？

WCAGの18ptはCSSでは約24px、太字14ptは約18.66pxに相当します。ただしこの基準は欧文フォントを前提にした値です。日本語は同じサイズでも字画が多く潰れやすいため、24pxだからと3:1で済ませず、本文と同じ4.5:1を確保しておくほうが安全です。

やりがちな不合格パターン

白背景に薄いグレー（#999999）

コントラスト比は2.85:1。AAの4.5:1どころか、大きい文字の3:1にも届きません。上のツールのプリセット「よくある薄いグレー」で確認できます。白背景でグレー文字を使うなら、#767676 が4.54:1でぎりぎり合格のラインです。これより明るいグレーは本文に使えません。

薄い色の背景に白抜き文字

淡いブルーやパステルカラーのボタンに白い文字を載せると、ほぼ確実に不合格になります。白抜きにするなら背景をしっかり暗くする必要があります。

プレースホルダーの文字色

入力欄の薄いグレーの説明文も、WCAGでは通常のテキストとして扱われます。既定のスタイルのまま使うと不合格になっていることが多い箇所です。

画像の上に直接テキスト

写真の上に文字を置く場合、コントラスト比は場所によって変わります。半透明の黒いレイヤーを1枚重ねる、文字の背後だけを暗くする、といった対策が必要です。

色だけで情報を伝えないこと

コントラスト比を満たしていても、それとは別に守るべき原則があります。色の違いだけで意味を区別しないことです。

グラフの凡例を色分けだけで済ませず、模様やラベルも添える
必須項目を赤文字だけで示さず「必須」の文字や記号も置く
リンクを色だけで示さず、下線も残す
エラーを赤枠だけで示さず、テキストで何が問題かを書く

赤と緑の区別がつきにくい人にとって、「赤が必須、緑が任意」という設計は情報が伝わりません。色は補助として使い、意味は必ず文字や形でも表す。これだけで多くの問題が防げます。

このサイトの配色でどうなるか

参考までに、情報の匠で実際に使っている和紙の配色を上のツールで測った実測値です。上のツールのプリセットからも試せます。

組み合わせ	比率	判定
墨 #16161a × 生成り #f2eee4	15.57 : 1	AAA 適合
淡墨 #63605a × 生成り #f2eee4	5.41 : 1	AA 適合
朱 #c1362b × 生成り #f2eee4	4.73 : 1	AA 適合

紙色を白（#ffffff）ではなく生成り（#f2eee4）にすると、背景の明るさが少し落ちるぶんコントラスト比も下がります。落ち着いた色味を選ぶときは、必ず一度測ってから決めてください。

文字以外にも基準がある｜3:1のルール

コントラスト比の話は文字だけだと思われがちですが、操作できる部品と、意味を持つ図形にも基準があります。WCAG 2.1で追加された項目です。

対象	必要な比	具体例
通常の文字	4.5:1	本文、リンク、注釈
大きな文字（およそ24px以上、太字なら19px以上）	3:1	見出し、大きなボタンの文字
入力欄の枠線	3:1	どこが入力欄か分かる必要がある
ボタンの境界	3:1	背景と区別できる必要がある
フォーカスの表示	3:1	キーボード操作でどこにいるか分かる必要がある
グラフ・アイコン	3:1	意味を伝える図形。装飾だけなら対象外
装飾・無効化された部品	基準なし	ただし無効であることが分かる必要はある

実務で最も見落とされるのがフォーカス表示です。「見た目が気になる」という理由でブラウザ既定のフォーカスリングを outline: none で消してしまうと、キーボードだけで操作する人がどこにいるか分からなくなります。消すなら、必ず代わりの表示を用意してください。枠線の色を変える、背景色を反転させる、影を付けるなど、3:1を満たす方法であれば形式は問いません。

ダークモードで起きる、別の読みにくさ

暗い背景に明るい文字を置くとコントラスト比は簡単に上がります。しかし、比が高すぎると別の問題が起きます。

組み合わせ	コントラスト比	実際の見え方
純黒(#000000)＋純白(#FFFFFF)	21:1	数値は満点だが、文字がにじんで見える（ハレーション）。長時間の読書に向かない
#121212＋#E8E8E8	約14:1	基準を大きく満たしつつ、目に優しい
#1E1E1E＋#D0D0D0	約10:1	落ち着いた印象。本文向き

つまり、コントラスト比は「高ければ高いほど良い」わけではありません。基準（4.5:1）を満たしたうえで、実際に長文を読んでみて疲れないかを確かめるのが正解です。ダークモードでは、純黒より少し明るいグレーを背景に使うのが定番になっています。

もう1点、暗い背景では細い文字が痩せて見えます。ライトモードで適切だった文字の太さが、ダークモードでは読みにくくなることがあります。フォントウェイトを一段上げるか、文字サイズを少し大きくすると解消します。

実装後に確認する、4つの手順

色を決めた後、実際の画面で確認すべきことをまとめます。数値を満たしていても、実装で崩れることがあります。

確認	やり方	見つかる問題
画像の上の文字	実際の画像を何枚か差し替えて確認する	背景写真の明るさによって、読めたり読めなかったりする
キーボードだけで操作	Tabキーだけでページを最後まで移動する	フォーカス位置が見えない箇所
グレースケール表示	開発者ツールの表示設定でグレースケールにする	色だけで区別していた箇所（グラフの系列、エラー表示）
屋外での実機確認	スマホを明るい場所で見る	薄いグレーの文字が完全に消える

とくに画像の上の文字は事故が起きやすい箇所です。半透明の黒いレイヤーを重ねる、文字に影を付ける、文字の背後だけ帯を敷く、といった方法で、どんな画像でも読める状態を確保してください。

よくある質問

コントラスト比はどうやって計算しているのですか？

WCAG 2.1 が定める式をそのまま使っています。RGB値をsRGBの相対輝度に変換し、明るいほうと暗いほうを (L1 + 0.05) ÷ (L2 + 0.05) で割った値です。人間の目が緑を明るく感じる特性が計算に含まれているため、単純な明度の差とは違う結果になります。

「この色にする」で提案される色はどう決めていますか？

背景が明るければ文字色を黒方向へ、背景が暗ければ白方向へ1%ずつ寄せていき、4.5:1に達した時点で止めています。元の色みをできるだけ保ったまま最小限の調整で基準を満たすため、デザインの印象が大きく変わりません。

透明度（rgba）を使った色も測れますか？

このツールは不透明な2色のみを対象にしています。半透明の色は、背景と合成したあとの実際の色を求めてから入力してください。ブラウザの開発者ツールで要素を選ぶと、合成後の色を確認できます。

ロゴや装飾も基準を満たす必要がありますか？

ロゴタイプは対象外とされています。純粋な装飾で、情報を伝えていない要素も対象外です。ただし「装飾のつもりだが実は意味を持っている」ケースは多いので、迷ったら基準を満たしておくほうが安全です。

色のコントラスト比チェッカー｜WCAG判定と代替色の提案つき（無料）