コントラスト比チェック
背景色と文字色のコントラスト比を計算し、ウェブアクセシビリティの基準(WCAG AA・AAA)を満たすかを判定します。実際の文字プレビューも出るので目でも確かめられます。
🎨 すべてブラウザ内で動きます。インストールも登録も不要です。
大きな見出しはこう見えます
本文サイズの文字はこのくらいの読みやすさです。
キャプションのような小さな文字はここまで小さくなります — 対比が足りないと、まずここで分かります。
コントラスト比
3.68 : 1
大きい文字にだけ使えます
不足
AA 本文
4.5:1
合格
AA 大きい文字
3:1
不足
AAA 本文
7:1
不足
AAA 大きい文字
4.5:1
基準が意味すること
- · AA 4.5:1 — ウェブアクセシビリティの基本線です。本文はここを超える必要があります。
- · 3:1 — 18pt(太字なら14pt)以上では基準が下がります。
- · AAA 7:1 — より厳しい基準で、公共サイトで求められることもあります。
- コントラストは色ではなく明るさの差で決まります。だから黄色の上の白い文字は、色が違っても読めません。
このツールでできること
- コントラスト比 1〜21
- AA・AAAの合否
- 大きい文字は別基準で判定
- 合格するまで明度を自動調整
ほかのカラーツール
画面とそのカラープロファイルによって、色は少し違って見えることがあります。