グラデーション背景のコントラストを確認する方法

グラデーションを背景にしたWEBページでは、左側の白文字は読めても、右側では背景に溶け込むことがあります。背景全体を一色として扱わず、実際に文字が重なる場所ごとに確かめることが大切です。ここではイベント申込みバナーを例に、確認する位置、コントラスト比の読み方、色を直す手順を説明します。

グラデーションは文字の後ろの色を位置ごとに調べる

コントラスト比とは、文字と背景の相対的な明るさを比較する数値です。CSS（WEBページの見た目を指定するルール）のlinear-gradient()は、指定した色の間を連続的に変える背景を作れます。始点だけ、あるいは終点だけを測っても、途中に載る文字の判定にはなりません。

WCAG 2.2（WEBコンテンツを利用しやすくするための国際的な指針）の達成基準1.4.3、レベルAAでは、通常サイズの文字は背景と4.5:1以上、大きな文字は条件を満たす場合に3:1以上のコントラストが必要です。色の境目に文字が重なる場合は、文字の背後にある部分を確認します。見出しだけでなく、小さな開催日時や「申し込む」の文字にも注意しましょう。

確認する範囲は背景の全体ではなく、文字が実際に載る領域です。文字が左側だけに配置されるなら、その領域を重点的に調べます。逆に横幅いっぱいに文章を置くなら、明るい箇所も暗い箇所も確認が必要です。

申込みバナーの左・中央・右で比率を比較する

イベント申込みバナーの背景を、左端の濃紺■#182D48、中央の青灰色■#7288A1、右端の淡い青■#DCE9F5で作るとします。HEX（色を16進数の6桁で表すコード）の各色を、CSSでlinear-gradient(to right, rgb(24 45 72) 0%, rgb(114 136 161) 50%, rgb(220 233 245) 100%)と指定した例です。RGBは赤・緑・青の成分で色を表す方法です。

この3地点に白文字■#FFFFFFを置くと、左端の背景■#182D48とは約13.93:1、中央■#7288A1とは約3.65:1、右端■#DCE9F5とは約1.23:1です。白文字は左側で十分な差がありますが、中央と右側では通常文字の4.5:1に届きません。バナー全体を「白文字なら見やすい」と判断するのは危険です。

では、文字を濃い青■#14283Eにするとどうでしょうか。左端■#182D48では約1.07:1、中央■#7288A1では約4.10:1、右端■#DCE9F5では約12.13:1となります。右端では読めても、左端と中央では通常文字の基準を満たしません。同じ背景の上で文字色だけを白から濃色に替えても、全域の問題は解決しない例です。

文字を横幅いっぱいに置く必要があるなら、背景を暗い青系の範囲に絞る方法があります。たとえば左を深い青■#17324C、右を落ち着いた青■#365A76とした場合、白文字■#FFFFFFとの比率は両端でそれぞれ約13.15:1と約7.29:1です。この例でも、最終的には文字の下の中間部分を実際に確かめます。

直し方と公開前のチェック手順

最初に文字サイズを確かめ、通常文字なら4.5:1以上、大きな文字なら該当条件で3:1以上を目標にします。次に、文字の背後の左・中央・右、色が大きく変わる境目などを調べ、最も差が小さい場所を探します。数値を丸めて基準を超えたと判断せず、少し余裕を持たせましょう。

不足する場所があれば、文字を暗い側だけに配置する、明るすぎる色の停止位置を動かす、あるいは文字の後ろに不透明な単色パネルを敷く、といった方法で調整できます。パネルに深い青■#17324Cを使い、文字を白■#FFFFFFにすれば、その単色部分の比率は約13.15:1です。ただし文字の背後にパネルがない部分まで合格とみなすことはできません。

スマートフォンで改行位置やバナーの横幅が変わると、同じ文字でも背後の色が変わります。PCとスマートフォンの両方で、見出し・補足文・ボタン文字を確認してください。HueRollでは選んだ色と白・黒の比率を確認できますが、グラデーションの全地点や任意の2色の比較、AA・AAAの自動判定はできません。各地点の計算と完成画面の確認は別途行いましょう。