白い背景の黒い文字
最も高いコントラストになる、白い背景に黒い文字の例です。比の上限 21:1 を確かめられます。
入力
文字色
#000000
背景色
#ffffff
文字の大きさ(CSS ピクセル)
16
太字
いいえ
結果
エラー 0 件・警告 0 件・情報 1 件
指摘(エラー・警告・情報)
- 情報 判定 コントラスト比 21.00 : 1 は、16 ピクセル(通常の文字)に必要な 4.5:1 以上です(WCAG 2.2 SC 1.4.3 の数値基準を機械的に満たします)。ただし達成基準の適合そのものの判定ではありません。
| 文字色 | #000000 |
|---|---|
| 背景色 | #ffffff |
| 文字色の相対輝度 | 0.0000 |
| 背景色の相対輝度 | 1.0000 |
| コントラスト比 | 21.00 : 1 |
| 入力した大きさでの判定 | 満たす(4.5:1) |
基準ごとの判定
| 文字の区分 | 必要な比 | この色の組 |
|---|---|---|
| 通常の文字 | 4.5 : 1 | 満たす |
| 大きな文字(18pt 以上、太字なら 14pt 以上) | 3 : 1 | 満たす |
検算(この結果になる理由)
黒の相対輝度は 0、白は 1 なので、比は (1 + 0.05) ÷ (0 + 0.05) = 21 です。通常の文字の 4.5:1 を大きく上回るため、エラーは 0 件です。
判定の根拠は仕様と根拠に、仕様の出典とともにまとめています。自分の入力で試すにはツールをお使いください。
このツールの制約
- 画像・写真・グラデーションの背景の上の文字、透明度(アルファ)つきの色は扱いません。重ねた後の不透明な色を入力してください。
- 色の名前(red など)・rgba()・hsl() は読めません。#rrggbb か rgb() に直して入力してください。
- 文字以外のアイコンや枠線のコントラスト(別の達成基準)は判定しません。
- 文字の大きさ・太さは入力された値だけで判断します。実際に描画されるフォントの大きさは確かめません。
ご利用にあたって
- 結果は機械的に判定できる規則だけにもとづく目安で、アクセシビリティの達成基準に「適合している」ことを示すものではありません。適合の判断には、実際の画面での確認と専門家のレビューが必要です。