Web・UI・CSS
文字色は読みやすい？ダークモードでも確認したい
使うツール
作業中の明るいモニターでは読める文字が、別の画面では薄く見えることがあります。説明文だから目立たせたくない、という調整が、説明を読めなくする調整になっていないでしょうか。コントラスト比は、前景と背景の明るさの差を一つの数値へ整理する道具です。好みだけで色を決める前に、まず実際に使っている二色を入力してみましょう。
#777777と白の組合せを測る
コントラスト比で前景を#777777、背景を#FFFFFFにします。結果は約4.478:1で、通常文字のAA基準4.5:1には届きません。見た目では十分そうでも、境界のすぐ下です。前景を#767676へ一段暗くすると約4.542:1になります。たった一段で判定が変わる例ですが、ぎりぎりの値を狙うこと自体が目的ではありません。実際のフォント、太さ、背景の状態も見て、読みやすさに余裕を持たせます。
#777777 / #FFFFFF → 4.478:1
#767676 / #FFFFFF → 4.542:1
#000000 / #FFFFFF → 21:1ツールの比率表示には丸めがありますが、合否判定は丸める前の値で行います。4.499を表示上4.5に丸めて通過したと考えるような使い方は避けます。大きな文字ではAAの基準が3:1ですが、ただ見出しと名付けたから大きな文字に分類されるわけではありません。WCAGの文字サイズ・太さの条件に合わせて判断します。通常文字の基準を満たす配色なら、説明文にも使いやすくなります。
黒でも半透明なら、黒の比率にはならない
前景をrgba(0,0,0,0.5)、背景を白にすると、比率は約3.977:1になります。黒を使ったつもりでも、実際には背景と合成された灰色です。文字色だけをCSSから抜き出し、親要素のopacityや重なった背景を無視すると、実画面より高い値を見てしまうことがあります。ツールへ渡すのは、表示に効いている透明度を含む条件です。
背景にも透明度がある場合は、その後ろの不透明な下地色が必要です。同じ半透明のパネルでも、白いページに置くか暗いページに置くかで文字との関係は変わります。このツールは指定色を合成して比率を計算しますが、ページのDOMや重なりを自動で調べません。画像背景、グラデーション、複数の透明レイヤーは、一組の色を入力するだけでは全域を評価できない点にも注意します。
ダークテーマは、色を反転するだけで終えない
例として#E2E8F0の文字を#0F172Aへ置くと、比率は約14.482:1です。しかし、そのページの補助文字、リンク、選択中の行、ホバー背景まで同じ比率になるわけではありません。テーマごとに実際の前景と背景の組合せを列挙し、通常、ホバー、フォーカス、選択中を確認します。背景だけを暗くした結果、固定された暗い文字が消える、といった不具合もこの手順で見つけやすくなります。
修正するときは、どちらの色を動かせるかを考えます。ブランド色を維持したいなら、その色を小さな本文へ直接使う代わりに、背景や装飾へ使い、文字は読みやすい色へ分ける選択肢があります。リンクなら下線なども使い、色だけが違う状態に頼らないようにします。比率の数字を上げるだけでなく、情報の役割を保ったまま読める構成へ直すことが目的です。
比率が通っても、画面全体の合格ではない
文字が十分濃くても、フォントが小さすぎる、行間が詰まっている、拡大すると切れる、といった問題は残ります。色の判定は一つの確認項目です。実際の文章を入れ、長い翻訳、200%の文字拡大、狭い画面でも読めるかを別に確認します。ツールのプレビューは組合せの確認用で、あなたのページ全体を自動監査するものではありません。
また、エラーを赤、成功を緑で示すだけでは、色を区別しにくい人へ状態が伝わりません。文章やアイコンを併用し、操作できる場所には見えるフォーカスを用意します。文字のコントラスト判定を、ボタン境界、グラフ、フォーカスなど別の対象の判定へそのまま広げないことも大切です。それぞれの条件を確認したうえで、実際の操作を試します。
修正前後は、同じ条件で比べる
修正案を共有するなら、『薄いので濃くしました』より、対象の文字、前景色、背景色、透明度、修正前後の比率を並べると判断しやすくなります。色コードがRGBやHSLで渡された場合はカラーコード変換で整理できますが、変換によって読みやすくなるわけではありません。表記をそろえる作業と、配色を変更する作業を区別します。
最後は画面へ戻り、修正した説明を読むところから操作を完了するところまで試します。数値で問題を見つけ、実画面で読みやすさと操作を確認する、この二つを往復する使い方が効果的です。一つの組合せを直したら、同じ色を使う他の状態やテーマにも目を向けると、局所的な修正で別の箇所を見落としにくくなります。
本文色が通っても、ホバーやエラー表示は別に測る
通常の本文が白背景で読みやすくても、選択中のカード、ホバーしたリンク、エラーの赤文字では別の色の組合せになります。初期状態の一組だけを測って画面全体を確認済みにしないようにします。対象の文字色と、その文字のすぐ後ろに実際に描かれる背景を採ります。透明な面を重ねている場合は、ページの背景色だけを相手にすると違う比率になることがあります。状態ごとに前景、背景、透明度をそろえて測り直すと、どの組合せを直すべきかが分かります。
修正は文字を黒へ近付ける方法だけではありません。背景を明るくする、半透明をやめる、重要な情報を小さな補助文字から通常本文へ移す、といった選択もあります。ただし、比率を通すためだけに文字を大きな文字の基準へ分類し直すのではなく、実際の文字サイズと太さに合う判定を使います。#777777と白の例のように、見た目には近い色でも基準の手前と向こうに分かれることがあります。丸めた4.5という表示だけで境界を判断せず、判定結果を確認します。
結果が良くなったら、実画面で文字が読めるかも戻って確認します。背景画像の上では場所によって色が違い、細いフォントや小さな文字では数値だけでは気付かない読みづらさがあります。エラーを赤だけで表す場合も、コントラストを上げるだけでは状態の区別が十分になりません。文章やアイコンを添え、キーボードのフォーカスなど別の操作状態も見ます。この比率は画面品質を判断する大切な一項目であり、すべてを代わりに採点するものではありません。