ホーム·カラーツール·コントラスト比チェック

コントラスト比チェック

背景色と文字色のコントラスト比を計算し、ウェブアクセシビリティの基準(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の合否
  • 大きい文字は別基準で判定
  • 合格するまで明度を自動調整

ほかのカラーツール

画面とそのカラープロファイルによって、色は少し違って見えることがあります。