黒文字と白背景は21対1
入力と設定
文字色：#000000 / 背景色：#ffffff
期待する結果
21.00:1 / 表示された4判定はすべて合格
コントラスト比チェック
文字色と背景色のコントラスト比を計算し、WCAG 2.xのAA・AAA基準を確認します。
使い方
以下は操作の例です。入力値は目的に合わせて変更できます。
- 文字色と不透明な背景色を入力します。
- 通常文字と大きな文字の適合表示を確認します。
- 実際の画面でも文字サイズや太さを確認します。
入力
背景色には透明度を指定できません。半透明の文字色は背景色へ合成して計算します。
確認結果
読みやすさの見本 Aa
このツールについて
WCAG 2.xの相対輝度式でコントラスト比を計算し、通常文字と大きな文字のAA・AAA基準を表示します。黒と白は21:1です。
適合表示は文字のコントラスト基準だけです。フォントの太さ、実際の文字サイズ、操作部品など他のアクセシビリティ要件も別途確認してください。
この作業の次に使えるツール
- 影のCSS組み立て — 読みやすい配色を決めたカードに、CSSの影を付けられます。
- ボタンのCSS下ごしらえ — 確認した文字色と背景色で、HTML・CSSのボタンを作れます。
入力例と結果の確認
黒と白、白背景の灰色文字で、比率と通常文字・大きい文字の判定を分けます。
「この例を試す」を押すと、上の入力と設定が例の内容に切り替わり、処理を実行します。「元の入力へ戻す」は1回ごとに直前の入力と設定を復元します。複数の例を試した場合は、戻す操作を繰り返すと最初の入力へ戻れます。ページを閉じるとこの履歴は失われます。
灰色#777の通常文字はAA不合格
入力と設定
文字色：#777777 / 背景色：#ffffff
期待する結果
4.48:1 / AA大きい文字のみ合格 AA通常文字・AAA通常文字・AAA大きい文字は不合格
結果の見方
文字のAA基準は通常4.5以上、大きい文字3以上。AAAは通常7以上、大きい文字4.5以上です。「大きい文字」かどうかは実際のフォント条件で別途判断します。表示比率は小数2桁ですが、合否は丸める前の値で判定するため、4.50と表示されても4.5未満なら不合格です。
対応範囲と注意点
単色の文字色と不透明な背景色を比較します。前景の透明度は指定背景へ合成し、透明な背景は拒否します。画像・グラデーション・実際の文字サイズや太さ、ページ全体のWCAG適合は判定しません。プレビューの見た目だけでなく、元の色と判定条件を確認してください。
検証根拠：W3Cの文字コントラスト基準と未丸め判定を参照し、相対輝度から21と約4.478を独立計算。4.499の境界、透明背景の拒否、日英の判定一覧と復元を照合します。
次の作業に使えるツール
黒と白を基準に、実際の組み合わせを確認
半透明の文字色は背景へ合成してから相対輝度を求めます。文字色そのもののRGB値だけを比べる計算ではありません。
よくある質問
AAとAAAの違いは？
AAAの方が高いコントラストを求める厳しい基準です。
大きな文字とは？
WCAGの定義は文字サイズと太さで決まります。表示中の見本サイズを自動判定するものではありません。
透明色は使えますか？
文字色のalphaは背景色へ合成して計算します。
関連ツール
ツールを紹介
ツール名と公開URLだけを共有します。入力した内容や処理結果は含まれません。
入力と保存について
残したい内容は、先に保管してください。このツールの入力内容・結果は自動保存されません。ページの更新・終了や、入力を消す操作・リセットで失われる場合があります。
お気に入り・表示言語は作業データとは別に保存され、サイトデータの削除で失われる場合があります。端末に保存済みのファイルは、ツールのリセットやサイトデータの削除では消えません。