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