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