文字色と背景色のコントラスト比チェック
2 つの色のコントラスト比を計算し、WCAG 2.1 の達成基準 (AA/AAA、通常文字/大きな文字) を満たすか判定します。色コードを入力するだけで結果が即時に更新され、処理はブラウザ内で完結します。
使い方
- 文字色と背景色を、それぞれカラーピッカーまたは HEX の色コード欄 (
#333333など) で入力します。 - プレビュー欄の文字色・背景色が即時に変わり、コントラスト比と 4 つの基準 (AA/AAA × 通常文字/大きな文字) の合否が表示されます。Web ページやアプリの配色が読みやすい組み合わせかどうかを確認するときに使います。
計算の根拠
コントラスト比は W3C Web Content Accessibility Guidelines (WCAG) 2.1 の達成基準 1.4.3・1.4.6 で定義された式で計算します。まず各色の相対輝度 L を、sRGB の各チャンネル値 (0〜255) を 0〜1 に正規化した値 c について、c が 0.03928 以下なら c/12.92、それ以外なら ((c+0.055)/1.055)^2.4 というガンマ補正を赤・緑・青それぞれに適用し、L = 0.2126×R + 0.7152×G + 0.0722×B の重み付け合計で求めます。この重みは人間の目が緑を最も明るく、青を最も暗く感じる特性を反映したものです。2 色の相対輝度のうち明るい方を L1、暗い方を L2 とすると、コントラスト比は (L1 + 0.05) / (L2 + 0.05) で、最小 1:1 (同じ色) から最大 21:1 (黒と白) の範囲を取ります。WCAG 2.1 はこの比率について、レベル AA では通常の文字で 4.5:1 以上・18pt 以上または 14pt 以上の太字などの大きな文字で 3:1 以上、より厳しいレベル AAA では通常の文字で 7:1 以上・大きな文字で 4.5:1 以上を達成基準としています。この基準は装飾目的のロゴやテキストの一部ではない画像、無効化されたUIコンポーネントなどには適用されません。
よくある用途
| 場面 | 目安 |
|---|---|
| Web サイト本文のテキスト色 | AA 通常文字 (4.5:1 以上) を満たす組み合わせを選ぶ |
| 見出しや大きめのボタン文字 | AA 大きな文字 (3:1 以上) で許容されることが多い |
| 公的機関・金融系サービスのUI | より厳しい AAA (7:1 以上) を目標にすることがある |
| ブランドカラーの可読性確認 | 背景色を変えてコントラスト比がどこまで落ちるか確認する |
入力した色コードはサーバーに送信されず、このページを閉じると消えます。