カラーコントラストチェッカー
テキストが誰にとっても読みやすいかを確認し、読みにくい場合は改善案を受け取りましょう。
このデバイス内で封印済み
ブラウザ内で動作します。何もアップロードされません。
封印済み
色
- コントラスト比
- 通常のテキスト
- AA · 4.5:1
- AAA · 7:1
- 大きなテキスト
- AA · 3:1
- AAA · 4.5:1
- UI要素とアイコン
- AA · 3:1
- APCAコントラスト（参考）
APCAは、将来のアクセシビリティガイドライン向けに検討されている新しい方式です。現在の基準はWCAG 2.2です。
プレビュー
大きなテキストはこのように表示されます
通常のテキストは、ロービジョンの方を含め、明るい日差しの下のスマートフォンや古い画面でも、誰にとっても読みやすくあるべきです。
小さな注記やキャプションには、最も高いコントラストが必要です。
改善案
使い方
-
2つの色を入力
文字色と背景色を入力または選択します。HEX、RGB、HSL、CSSの色名など、どの形式でも使えます。
-
結果を確認
コントラスト比と、通常のテキスト、大きなテキスト、UI要素のそれぞれでWCAG 2.2のAA・AAAを満たすかを確認します。
-
必要に応じて修正
基準を満たさない場合は、提案された色を使いましょう。同じ色相で基準を満たす、最も近い色です。
よくある質問
どれくらいのコントラスト比が必要ですか？
WCAG 2.2のレベルAAでは、通常のテキストで4.5:1以上、大きなテキストで3:1以上が求められます。レベルAAAでは7:1と4.5:1です。アイコンや入力欄の枠線などのUI要素には、隣接する色に対して3:1以上が必要です。
「大きなテキスト」とは？
18ポイント（CSSで24ピクセル）以上、または太字で14ポイント（CSSで約18.7ピクセル）以上のテキストです。それより小さいものは通常のテキストになります。
4.49:1は4.5:1にとても近いのに、なぜ不合格なのですか？
WCAGの基準値は厳密な最低値で、比率を切り上げてはいけません。そのため、このツールでは比率を切り捨てて表示しています。合格に見える値は、本当に合格です。
APCAとは何ですか？
APCA（Accessible Perceptual Contrast Algorithm）は、明るい背景に暗い文字か、暗い背景に明るい文字かを考慮する、新しいコントラストの測り方です。ガイドラインの将来のバージョン向けに検討されています。ここでは参考として表示しているだけで、現在の法的要件や監査ではWCAG 2のコントラスト比が基準です。
提案される色はどのように選ばれますか？
知覚に基づく色空間OKLCHで、元の色の色相と鮮やかさを保ったまま明度だけを変え、レベルを満たす最も近い値を探します。元の色の印象はそのままで、少し明るく、または暗くなるだけです。
半透明の色にも対応していますか？
文字色は対応しています。半透明の文字色は、実際に目に見える色になるよう、先に背景色と合成されます。背景色は不透明として扱われます。