コントラスト比計算
文字色と背景色のコントラスト比をWCAGのAA・AAA基準で判定し、合格する色へ自動調整もできる。
コントラスト比
14.68:1
相対輝度: #1f2937 = 0.0215 · #ffffff = 1.0000
プレビュー
通常テキスト：吾輩は猫である。名前はまだ無い。
大きなテキストの見本
| 基準 | 必要な比 | 結果 |
|---|---|---|
| AA・通常テキスト | 4.5:1 | 合格 |
| AA・大きなテキスト | 3:1 | 合格 |
| AAA・通常テキスト | 7:1 | 合格 |
| AAA・大きなテキスト | 4.5:1 | 合格 |
使い方
- 文字色（前景）と背景色を選ぶ。入れ替えボタンで前景と背景を交換できる。
- コントラスト比と、WCAG の AA / AAA（通常テキスト・大きなテキスト）の合否が即座に表示される。
- プレビューで実際の見え方を確認する。
- AA に届かない場合は「文字色を調整してAAに合格させる」を押すと、色相と彩度を保ったまま明度だけを動かして合格する最も近い色を探す。
注意事項
コントラスト比は WCAG 2.x の相対輝度の定義に従い、(明るい方の輝度 + 0.05) / (暗い方の輝度 + 0.05) で計算する。AA は通常テキストで 4.5:1、大きなテキスト（18pt 以上、または 14pt 以上の太字）で 3:1 が必要で、AAA はそれぞれ 7:1 と 4.5:1 を要求する。計算はすべてブラウザ内で完結する。
よくある質問
- 自動調整で色が大きく変わることがあるのはなぜ？
- 調整は明度だけを動かすため、背景との輝度差が小さい組み合わせでは、合格に必要なだけ大きく明るく（または暗く）しなければならない場合がある。色相そのものを変えたくない場合の近似解として使ってほしい。
- 大きなテキストの定義は？
- WCAG では 18pt（約24px）以上のテキスト、または 14pt（約18.66px）以上の太字テキストが大きなテキストとされる。