色のコントラスト・WCAGチェック
ローカル処理文字色と背景色のコントラスト比、WCAG AA・AAAの合否、読みやすい文字色を示します。
使い方と処理基準
文字色と背景色のコントラスト比、WCAG AA・AAAの合否、読みやすい文字色を示します。
ツールの処理はブラウザ内で行われます。計算・変換の共有リンクを作成すると値がURLに含まれます。アカウント・アクセス解析・広告の情報はプライバシーポリシーをご確認ください。
処理制限
- 最大入力文字数: 100,000文字
「作業」でコントラスト比、WCAG AA、WCAG AAA、文字色の提案を選びます。通常テキストはAA 4.5:1・AAA 7:1、大きなテキスト（18pt以上または太字14pt以上）はAA 3:1・AAA 4.5:1が基準です。
WCAGの計算式による数値で、アクセシビリティ認証の代わりにはなりません。
できること
- コントラスト比
- 2色の相対輝度から1:1〜21:1のコントラスト比を計算します。
- AA・AAA判定
- 通常・大きなテキストの基準で合格・不合格を示します。
- 文字色の提案
- 背景に黒・白のどちらが見やすいか選びます。
色のコントラスト・WCAGチェックの使い方
- 1作業を選ぶ計算・判定・提案から選びます。
- 2色を入力文字色（前景）と背景色を選びます。
- 3結果を確認コントラスト比と合否を見ます。
活用例
白背景のグレー文字
入力: #777777 / #ffffff
結果: 4.48:1
AA通常テキスト
入力: #777777 / #ffffff
結果: 不合格（基準 4.5:1）
AAA通常テキスト
入力: #333333 / #ffffff
結果: 12.63:1、合格（基準 7:1）
紺色背景の文字色
入力: #1e3a8a
結果: 提案 #ffffff（白とのコントラスト 10.36:1）
主な利用シーン
- Webアクセシビリティの点検で文字のコントラストを確認するとき
- ブランドカラーの背景に使う文字色を決めるとき
よくある質問 (FAQ)
#777777は4.48:1ですがAAを満たしませんか？
はい。基準は4.5:1以上で、四捨五入して合格にはしません。少し濃い#767676なら4.54:1で合格します。