そのグレー文字、読みにくくない？配色のコントラストを確認しよう
日付や注釈を薄いグレーにすると、画面がすっきり見えますよね。でも「自分の画面では読める」だけで決めてしまうと、人や閲覧環境によっては読みにくい配色になります。仕上げに、文字と背景のコントラストを数値でも確認してみましょう。
本文の文字は「4.5:1」をチェック
コントラスト比は、文字と背景の明るさの差を表す数値です。WCAG 2.2のレベルAAでは、通常サイズの文字に4.5:1以上を求めています。大きな文字は3:1以上で、目安は24px以上、または太字で約18.7px以上です。本文や小さな注釈では、まず4.5:1を確認すると分かりやすいです。
白背景なら、こんな違い
背景が白（#fff）の場合、文字色#aaaのコントラスト比は約2.32:1。通常サイズの文字の基準に届きません。一方、#666なら約5.74:1となり、4.5:1を上回ります。この例は、不透明な単色同士で計算した値です。
.body-text {
color: #666;
background-color: #fff;
}上のCSSは白背景にグレーの本文を置く例です。#666を使えばどんな背景でも大丈夫、という意味ではありません。背景色を変えたら、その組み合わせで確認し直します。
配色を決めたら、2色をセットで確認
コントラストチェッカーに文字色と背景色を入力し、通常サイズの文字でAAを満たすか確認します。本文だけでなく、投稿日、フォームの説明、ボタン内の文字なども見ておくと、薄すぎる箇所を見つけやすくなります。
写真やグラデーションの上では、文字のすぐ後ろの色が場所によって変わります。opacityを使った文字も、指定色そのままの比率にはなりません。実際に表示される色で確認し、必要なら文字を濃くする、背景に帯を置くなど調整しましょう。数値を満たしたあとも、文字の細さやサイズを含めて実画面で読むのがおすすめです。