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