HTMLカラーコード・配色ツール｜HueRoll
補色・類似色の配色やコントラストを確認できる無料カラーパレット

HueRollで文字と背景のコントラストを確認する方法

文字色と背景色を決めるとき、「何となく読めそう」だけで判断すると、利用する人や画面の状態によっては読みにくくなることがあります。HueRollでは、選択した色と白・黒のコントラスト比を確認できます。ここでは、数値の意味、WCAG 2.2の目安、HueRollを使った調整手順を、実際のWeb制作で使える形に整理します。

HueRollでこの例を表示する

HueRollのカラーパレットで色を1つ選び、詳細パネルのHEX入力欄に#3B82F6を入れて「適用」を押します。「コントラスト」にある白・黒の比率を確認したら、#1D4ED8へ入力し直して、白との比率の変化を比べてください。

コントラスト比で分かること

コントラスト比は、前景色と背景色の相対的な明るさの差を表す数値です。同じ色同士は1:1、白と黒は最大の21:1になります。数値が高いほど常に美しいという意味ではありませんが、文字を読み取るための明暗差を判断する客観的な手掛かりになります。

ここで大切なのは、色相の違いとコントラスト比を分けて考えることです。赤と緑のように別の色に見えても、相対的な明るさが近ければ、文字と背景の組み合わせとしては読みにくい場合があります。反対に、同じ色相でも明るいティントと暗いシェードを組み合わせると、十分な差を作れることがあります。

WCAG 2.2で確認する目安

Web Content Accessibility Guidelines（WCAG）2.2の達成基準1.4.3（レベルAA）と1.4.6（レベルAAA）では、文字の大きさに応じて、次のコントラスト比を求めています。

  • 通常文字のレベルAA：4.5:1以上
  • 大きな文字のレベルAA：3:1以上
  • 通常文字のレベルAAA：7:1以上
  • 大きな文字のレベルAAA：4.5:1以上

WCAGでいう大きな文字は、18pt以上の通常ウェイト、または14pt以上の太字が基準で、通常ウェイトなら24 CSS pxに相当します。日本語などでは、同等の大きさの文字を考慮します。ただし、文字の大きさだけを理由に低い比率を選ぶのではなく、実際のフォント、太さ、表示環境も確認してください。また、4.499:1は表示上4.50に丸められても4.5:1を満たしません。境界値ぎりぎりではなく、余裕のある組み合わせを選ぶ方が安全です。

この基準には、無効な操作部品の文字、純粋な装飾、ロゴなどの例外があります。以下の例では、通常の本文や操作できるボタンの文字を想定します。文字のコントラスト条件を満たしても、それだけでページ全体がWCAGのレベルAA・AAAに適合するとは判断できません。

HueRollで確認できる範囲

HueRollは、選択した色を背景として使った場合の白と黒のコントラスト比を表示します。白文字と黒文字のどちらを候補にするかを素早く比べるための機能です。現在のHueRollは、任意の2色を入力して比較する機能や、AA・AAAの合否ラベルを表示する機能を備えていません。表示された比率を、使用する文字の条件に応じて上記の基準と照らし合わせます。

青い背景で比べてみる

例として、青の#3B82F6を選ぶと、HueRollでは白との比率が約3.68:1、黒との比率が約5.71:1と表示されます。通常サイズの文字でレベルAAを目指す場合、黒文字は4.5:1以上ですが、白文字は届きません。「青いボタンには白文字」という慣れた組み合わせでも、この色では通常文字に十分とは限らないことが分かります。

白文字を使いたい場合は、同じ青系統の暗い色へ調整します。たとえば#1D4ED8では白との比率が約6.70:1になり、通常文字のレベルAAを満たします。ただし7:1には届かないため、通常文字のレベルAAAを満たすとは判断できません。このように、合格か不合格かを感覚で決めず、使用条件と数値を一緒に確認します。

3つの組み合わせを比較する

背景色の見本文字色比率・通常文字のAA基準
#3B82F6白 #FFFFFF約3.68:1・基準未満
#3B82F6黒 #000000約5.71:1・基準以上
#1D4ED8白 #FFFFFF約6.70:1・基準以上

背景を変えられない場合は文字色を、白文字を使いたい場合は背景色を調整する、という2つの方向を比較できます。この表の判定は説明用です。HueRollの画面には比率が表示され、合否ラベルは表示されません。

HueRollを使った確認手順

  1. 256色パレット、カラーピッカー、またはHEX入力から背景候補を選びます。
  2. 詳細パネルの「コントラスト」で、白と黒の比率を確認します。
  3. 実際に使う文字が通常文字か大きな文字かを決め、必要な基準と比較します。
  4. 比率が足りない場合は、ティント、シェード、またはカラーピッカーで色を調整します。
  5. 候補色をMy Paletteへ保存し、実際のページ上で文字サイズ、太さ、ホバー、フォーカス、押下中、無効状態、エラー表示なども確認します。
  6. 入力欄の境界やアイコンなどは、非テキスト要素の達成基準に沿って確認します。
  7. 成功と失敗などの意味は、文字、形、アイコンなども併用して伝えます。

背景色を調整できない場合は、白か黒のうち比率が高い方を試す、文字の周囲に十分な単色背景を確保する、別の文字配置を検討する、といった方法があります。文字へ影を付けるだけで基準を満たしたと考えず、実際に接する背景との比率を確認してください。

配色候補と読みやすさは別に確認する

補色、類似色、トライアディック、60–30–10などは、色の役割やバランスを考えるための出発点です。それらの候補が、自動的に文字のコントラスト基準を満たすわけではありません。背景候補を選んだら、その色をHueRollで選択し直し、白と黒の比率を個別に確認してください。

HueRollの数値は、単色同士を比較するための参考情報です。背景画像、グラデーション、透明度、文字の縁取りなどを使う場合は、実際の表示箇所によって背景色が変わります。完成した画面でも確認し、HueRollだけでアクセシビリティへの適合を保証するものではないことを理解して利用してください。

配色の候補も見直す場合

補色と類似色のガイドでは色相の違い、60–30–10のガイドでは色の役割を確認できます。候補を変えた後は、HueRollでその色を選び直し、文字との比率も再確認してください。

参考資料