Web・UI・CSS
黒い文字なのに読みにくい？透明度込みのコントラストを確認したい
使うツール
本文と同じ黒を使っているのに、補足の文字だけ読みにくい。色コードを比べると同じでも、opacityや色のalphaが下がっていれば、白い背景と混ざって灰色になります。逆に白い文字を半透明のカードへ載せた場合は、カードのさらに後ろの色も関係します。コントラスト比ツールで、文字・背景・最終背景を分けて入力し、どの面と比較しているかを確認します。単色の結果を、写真や変化する背景全体の判定へ広げないことも大切です。
黒と白の21:1を、比較の出発点にする
foreground: #000000
background: #FFFFFF
ratio: 21:1前景へ#000000、背景へ#FFFFFFを入れると、比率は21です。文字色と背景色のどちらを入力したかを確認し、透明度なしの基準を作ります。この数値が大きいほど、相対輝度の差が大きい組合せです。フォントや画面の解像度、実際の文字サイズまでをこの数値だけで評価しているわけではありません。
次に前景を#777777へ変えると、白との比率は約4.478です。表示を一桁へ丸めて4.5と書き直しても、通常文字の4.5:1という基準を満たしたことにはなりません。ツールは丸める前の値で判定しています。閾値ぎりぎりの色を使うときは、表示された桁だけを都合よく丸めて合格と判断しないようにします。
半透明の黒は、黒の21:1にはならない
foreground: rgba(0, 0, 0, 0.5)
background: #FFFFFF
composited RGB: 127.5, 127.5, 127.5
ratio: approximately 3.977:1前景をrgba(0, 0, 0, 0.5)へ変えます。黒の成分は同じでも、白と半分ずつ混ざるため、最終的な文字色は灰色です。比率は約3.977で、通常文字のAA基準4.5には届きません。元の色が黒だから十分という判断では、透明度の影響を見落とします。結果のfinalForegroundも確認し、合成後に何色として計算したかを見ます。
同じ前景を黒い背景へ置けば、合成後も黒なので比率は1です。『alphaが0.5なら、このくらい読みやすい』という固定の答えはありません。どの背景と混ざるかが必要です。テーマ変更で背景だけが変わる場合も、文字の透明度を含めた組合せをテーマごとに確認します。
背景まで透明なら、さらに後ろの面が必要
foreground: #FFFFFF
background: rgba(0, 0, 0, 0.5)
backdrop: #FFFFFF → approximately 3.977:1
backdrop: #000000 → 21:1白い文字と半透明の黒いカードを考えます。最終背景が白ならカードは灰色へ合成されますが、最終背景が黒なら黒のままです。文字とカードの二色だけでは結果が決まりません。設定の最終背景を実際の不透明な面に合わせます。このツールは最後の面まで透明な条件を拒否し、何色が後ろにあるか不明なまま確定値を出しません。
実際のページで親要素全体へopacityを掛ける場合は、文字と背景が一つのグループとして合成されることがあります。この画面の『文字のalpha』『背景のalpha』へ同じ数値を入れれば、必ず同じになると考えないでください。どの要素に透明度が掛かるかを確認し、最終画面の色もブラウザーで調べます。
大きい文字の判定を、本文へそのまま使わない
WCAGのAAでは通常文字4.5:1、大きい文字3:1という区別があります。『大きい』は雰囲気ではなく、規定されたサイズや太さの条件です。このツールは文字の実際のサイズやフォントを読み取らず、両方の結果を表示します。大きい文字の欄が合格でも、小さい補足説明へそのまま採用できるわけではありません。利用先の文字サイズと対応する判定を使います。
比率の合格は、ページ全体のアクセシビリティが確認済みという意味でもありません。フォーカス表示、リンクの識別、文字拡大、状態を色だけで伝えていないかなどは別に確認します。合格欄を増やすことより、実際に読んで操作できる状態を保つことが目的です。
写真やグラデーションは、最も読みにくい場所を確認する
背景が写真やグラデーションなら、代表色一つだけでは文字の全体を評価できません。文字が通る領域の色が変わる場所や、ホバー・選択・テーマ変更の状態ごとに確認します。必要なら不透明な面を文字の後ろに置いて背景条件を一定にする方法もあります。この計算機は画像を走査したり、ページの全状態を自動検査したりしないため、結果が適用できる組合せを明確に残します。