てもとツール

コントラスト比チェッカー｜文字色と背景色のWCAG適合をその場で判定

文字色と背景色のコントラスト比を計算し、WCAGのAA・AAA適合を判定する無料ツール。半透明の色は背景と合成してから判定し、基準に届かないときは色相を保った修正候補を提示します。

ブラウザ内処理 公開
手元で処理しました

コントラスト比

4.54

: 1

この配色の見え方

本文サイズ（16px）の文章です。長めの説明文がこの色で並びます。

大きい文字（24px）

枠線つきのボタン

WCAG の適合判定

  • 通常の文字 AA4.5:1 以上合格本文など、24px 未満の文字
  • 通常の文字 AAA7:1 以上不足通常の文字で、より高い水準を狙うとき
  • 大きい文字 AA3:1 以上合格18pt（約 24px）以上、または太字 14pt（約 18.66px）以上
  • 大きい文字 AAA4.5:1 以上合格大きい文字で、より高い水準を狙うとき
  • 文字以外（枠線・アイコン）3:1 以上合格達成基準 1.4.11。UI 部品の境界やグラフの線

目標 AA（4.5:1） に届かせるには

この配色は目標 AA（4.5:1） を満たしています。

詳細設定

修正候補が目指す水準

判定の一覧は水準にかかわらず 5 行すべて表示します。ここで変えるのは修正候補の目標だけです。

このツールについて

使い方・特徴・補足情報

コントラスト比チェッカーとは

コントラスト比チェッカーは、文字色と背景色の明るさの差を数値にするツールです。WCAG が定める AA・AAA の基準に届いているかを、その場で判定します。

判定は通常の文字だけでなく、大きい文字と、枠線やアイコンなどの文字以外にも分けて出します。どこが足りないのかが 5 行の一覧で分かります。

rgba() のような半透明の色は、背景と混ぜた後の色で計算します。実際に画面へ出る見え方と、数値がずれません。

基準に届かないときは、色相を保ったまま明るさだけを動かした修正候補を出します。ボタンひとつで試せます。

こんな人におすすめ

Web制作・資料作成をする人

楽になること

配色が基準を満たすかの確認

避けたい手間

見づらい配色を出してしまうこと

解決できる困りごと

  • 配色が基準を満たしているかを、目視の勘に頼らず数値で確かめられる
  • 半透明の文字色を使ったとき、実際に見える色で判定し直す手間が減る
  • どこまで濃くすれば基準に届くのか、候補色を手作業で探す試行錯誤を減らせる
  • 文字だけ確認して、ボタンの枠線やアイコンの見えにくさを見落とすのを防げる
  • レビューで指摘された配色を、その場で数値の根拠つきに直せる

使い方

  1. 文字色と背景色を、カラーピッカーか入力欄で指定します。#333333 や rgb(51, 51, 51) の形式で貼り付けられます。
  2. コントラスト比がすぐに表示され、下の一覧で AA・AAA の合否が分かります。
  3. プレビューで、16px の本文と 24px の見出しが実際にどう見えるかを確かめます。
  4. 基準に届かないときは、修正候補の「この色にする」を押して色を差し替えます。
  5. 「入れ替え」で文字色と背景色を交換し、白背景と濃い背景を見比べます。
  6. 「結果をコピー」で、比率と判定をまとめたテキストを持ち出します。

使用例

AA にわずかに届かない灰色文字

薄すぎる灰色の本文が、基準のすぐ手前で落ちている例です。表示は切り捨てなので、4.47 を 4.5 と見せません。

入力

文字色: #777777
背景色: #FFFFFF

出力

コントラスト比: 4.47 : 1
通常の文字 AA（4.5:1）  × 不足
大きい文字 AA（3:1）    ○ 合格
修正候補（文字色）: #767676 → 4.54 : 1

半透明の文字色を見え方どおりに判定

透明度つきの黒文字を白い背景に重ねた例です。合成後の実効色に置き換えてから比率を出します。

入力

文字色: rgba(0, 0, 0, 0.5)
背景色: #FFFFFF

出力

合成後の実効色: #808080
コントラスト比: 3.94 : 1
通常の文字 AA（4.5:1）  × 不足
大きい文字 AA（3:1）    ○ 合格

ボタンの枠線が薄すぎる場合

文字ではなく枠線の色を確かめた例です。文字以外に必要な 3:1 に届いていないと分かります。

入力

枠線の色: #D0D0D0
背景色: #FFFFFF

出力

コントラスト比: 1.54 : 1
文字以外（枠線・アイコン）3:1  × 不足
修正候補（枠線の色）: #949494 → 3.03 : 1

活用シーン

ボタンの文字色を決める

ブランド色の上に白い文字を置いてよいかを、実装する前に確かめます。落ちていれば候補色に差し替えます。

レビュー指摘に数値で答える

「見づらい」という指摘に、比率と基準値をそえて返します。直した後の値も同じ画面で示せます。

既存サイトの配色を棚卸しする

CSS から色を拾って順に貼り付け、落ちている組み合わせを洗い出します。直す優先順位を決める材料になります。

スライド資料の文字色を選ぶ

薄いグレーの文字が会議室のプロジェクターで読めるかを、投影する前に数値で確認します。

ダークモードの配色を作る

背景を暗くした側でも同じ基準を満たすかを、入れ替えボタンで往復しながら決めます。明暗の両方をそろえます。

グラフやアイコンの色を決める

線やアイコンは 3:1 が目安です。文字と同じ画面で、文字以外の行だけを見て判断します。

技術的な解説

補足: 仕組み

判定は WCAG の相対輝度の式で計算します。各チャンネルを 0〜1 に正規化し、((c+0.055)/1.055)^2.4 に通します。

そこへ 0.2126R + 0.7152G + 0.0722B の重みをかけて輝度にします。緑の重みが最も大きいのは、人の目が緑を明るく感じるためです。

コントラスト比は (L1+0.05)/(L2+0.05) で求めます。半透明の色は背景と合成してから、この式に入れます。

もっと詳しく

なぜ 4.5:1 が基準の値になっているのか

4.5:1 は、視力が落ちた状態でも文字を読み取れる下限として決められた値です。WCAG の解説書では、その根拠が実験の結果として示されています。

大きい文字が 3:1 で足りるのは、太く大きい字ほど輪郭をつかみやすいからです。同じ配色でも、文字のサイズで必要な差が変わります。

半透明の色をそのまま計算すると数値がずれる

opacity や rgba() を使った文字は、画面上では背景と混ざった色で見えています。指定した色のまま計算すると、実際より高い比率が出ます。

このツールは透明度を背景と合成してから比率を出します。背景側が半透明のときは、白いページに置いた前提で先に合成します。

文字が通っても枠線やアイコンが落ちることがある

達成基準 1.4.11 は、ボタンの枠線やアイコン、グラフの線にも 3:1 を求めています。文字色だけを直しても、この 5 行目が落ちたままになりがちです。

薄いグレーの区切り線やアイコンが代表例です。入力欄のプレースホルダは見落としやすい一方で文字なので、5 行目ではなく通常の文字の行（4.5:1）で見てください。

よくある質問

コントラスト比はいくつあれば十分ですか？

本文の文字なら 4.5:1 以上が AA の目安で、見出しのような大きい文字は 3:1 まで下がります。より高い水準を狙うなら、通常の文字で 7:1 を目標にしてください。

半透明の色を入れると数値が変わるのはなぜですか？

画面に出る色は、指定した色と背景が混ざった結果だからです。このツールは合成後の実効色で比率を出すため、指定値のまま計算するツールより低い値になることがあります。

背景が写真やグラデーションのときはどう確認しますか？

文字が重なる範囲から、最も明るい部分と最も暗い部分を色として拾い、それぞれで判定してください。両方が基準を満たせば、その範囲では条件を満たすと判断できます。

他のツールと結果が 0.01 違うのはなぜですか？

小数の丸め方が違うためです。このツールは切り捨てで表示して合否は丸める前の値で判定するので、境界ぎりぎりの配色は少し余裕を持たせた色を選ぶと安全です。

参考・出典

本ツールの計算式・判定基準は上記の公的機関・公式情報源を参考にしています。最新の情報は各リンク先をご確認ください。

関連記事

このツールの使い方や活用例をブログでも紹介しています。

関連ツール

同じカテゴリの他のツールも合わせてどうぞ。