カラーコントラスト確認

二つの色をHEXまたはカラーピッカーで指定すると、相対輝度からコントラスト比を算出します。通常文字・大きな文字それぞれのAA/AAA判定とプレビューを並べ、配色調整の根拠を確認できます。

入力はブラウザ内で処理登録不要最終検証 2026.07.15
1

入力する

見えている項目だけで使えます。

入力例を使う
2

結果を見る

入力すると、すぐに更新されます。

コントラスト比14.51 : 1通常テキストで WCAG AA 合格
AA 通常文字合格 ✓
AA 大きな文字合格 ✓
AAA 通常文字合格 ✓
AAA 大きな文字合格 ✓
読みやすさを、数値で確かめる。

判定には丸め前の比率を使用。AAは通常文字4.5:1以上、大きな文字3:1以上が目安です。

この道具の仕組み

sRGB各成分を線形化して相対輝度Lを求め、(明るい方のL + 0.05) ÷ (暗い方のL + 0.05)で1:1〜21:1の比を算出します。

入力と結果の例

黒と白

入力
文字 #000000、背景 #FFFFFF
結果
21:1、AA/AAA適合

グレーと白

入力
文字 #767676、背景 #FFFFFF
結果
約4.54:1、通常文字AA適合

淡色同士

入力
文字 #A8C7FA、背景 #FFFFFF
結果
約1.7:1、通常文字AA不適合

使う前に知っておくこと

  • 01AA/AAA判定は文字サイズ・太さ・用途によって基準が変わります。
  • 02透明度、グラデーション、背景画像の上にある文字は単純な2色として正確に判定できません。
  • 03色覚特性、フォーカス表示、非文字要素などアクセシビリティ全体は評価しません。
  • 04規格適合はページ全体の監査を必要とし、この結果だけでは保証できません。
道具一覧へ戻る