コントラスト 比

コントラスト 比で確認できること

コントラスト 比は、文字色と背景色の明るさの差を数値で確認し、本文、見出し、ボタン、フォームラベルなどが読みやすい配色かどうかを判断するための基準です。白い文字を濃い背景に置く場合と、淡い文字を淡い背景に置く場合では、見た目の印象だけでは読みやすさを正確に判断できません。コントラスト 比では、HEXで指定した文字色と背景色をその場で比較し、プレビュー、比率、読みやすさの判定、改善候補を同時に確認できます。

読みやすい配色は、デザインの好みだけでなく、画面の明るさ、表示サイズ、文字の太さ、背景の不透明度にも影響されます。小さな本文や細いラベルでは高い比率が必要になり、大きな見出しでは少し低い比率でも読み取れる場合があります。数値を見ながら色を調整すると、見た目と実際の読みやすさを両方確認しやすくなります。

コントラスト 比の使い方

1. 「文字色」のカラーピッカーまたはHEX入力欄で、テキストに使いたい色を指定します。値はコピー用ボタンで後から取り出せます。
2. 「背景色」のカラーピッカーまたはHEX入力欄で、背景に使いたい色を指定します。入力した色はプレビューに反映されます。
3. 必要に応じて「明度」スライダーを動かし、同じ色相のまま明るさを調整します。文字色と背景色のどちらを動かすかで読みやすさの変化が変わります。
4. 不透明度を下げる配色を検討している場合は、「不透明度」スライダーで実際の見え方を確認します。透明な文字や背景は下地の色に影響されるため、最終比率も変わります。
5. 「色を入れ替え」を使うと、文字色と背景色を逆にした組み合わせをすぐ比較できます。濃淡の向きを変えるだけで合格しやすくなることがあります。
6. 比率、ステータス、読みやすさの判定を確認し、必要なら「コントラスト提案」の候補を使って読みやすい方向へ調整します。
7. 初期状態に戻したい場合は「リセット」を使います。複数色をまとめて比較したい場合は、下部のリンクからコントラストチェッカー プロに進めます。

判定結果の読み方

結果エリアでは、現在の組み合わせに対するコントラスト比が「7.90:1」のような形式で表示されます。数値が大きいほど明暗差が強くなり、本文やUIラベルを読み取りやすくなります。ただし、比率だけで配色の完成度が決まるわけではありません。ブランドカラーの印象、背景の広さ、フォントサイズ、太さ、状態表示の意味も合わせて確認すると、実装後の読みやすさを判断しやすくなります。

読みやすさの判定では、通常文字、大きい文字、より厳しい読みやすさのように、用途ごとに合格または不合格が分かれます。本文やフォーム入力のラベルには通常文字の基準を優先し、ヒーロー見出しや大きな数字には大きい文字の判定を参考にします。ステータスが良好でも、実際のデザインで文字が細い場合や背景に画像が重なる場合は、余裕のある比率を選ぶ方が安全です。

文字色と背景色を調整する考え方

不合格の配色を改善する場合、最初に変えるべきなのは、文字色と背景色のどちらを固定したいかです。ブランドカラーを背景として残したい場合は文字色を白または黒に近づけ、文字色を固定したい場合は背景の明度を上げるか下げます。両方を少しずつ動かすより、どちらか一方を基準にすると、意図した見た目を保ったまま調整しやすくなります。

「明度」スライダーは、色相を大きく変えずに読みやすさを整えたいときに役立ちます。たとえば紫の背景を使いたい場合、彩度や色味を保ったまま背景を少し暗くすると、白い文字の比率が上がります。逆に、濃い文字を使う場合は背景を明るくすると読みやすくなります。不透明度を下げる場合は、下地の色によって見え方が変わるため、実際に置く背景を想定して確認する必要があります。

よく使う場面

• Webサイトの本文、ボタン、ナビゲーション、フォームラベルに使う文字色と背景色を確認する。
• ライトモードとダークモードで同じブランドカラーを使う前に、それぞれの読みやすさを比較する。
• バッジ、通知、エラー、成功メッセージなど、状態を伝えるUIの配色を確認する。
• 画像やグラデーション上に文字を置く前に、代表的な背景色との組み合わせを検証する。
• カラーピッカーで選んだ色を、実際の文字色や背景色として使えるか判断する。

避けたいミス

• 色の印象だけで読みやすさを判断し、比率を確認しないまま公開する。
• 大きな見出しで合格した配色を、小さな本文やフォームラベルにもそのまま使う。
• 不透明度を下げた後の比率を確認せず、元のHEX値だけで安全だと判断する。
• 色だけでエラーや成功を伝え、アイコン、文言、形状などの補助情報を用意しない。
• ブランドカラーを優先しすぎて、実際に読む人に負担の大きい組み合わせを選ぶ。

実装前に確認すること

最終的な配色を選ぶ前に、本文、見出し、ボタン、リンク、フォーム、通知のように、実際に文字が表示される場所を用途ごとに分けて確認します。特に小さな文字、細いフォント、薄い背景、透明度のあるレイヤーは、画面上で想像より読みにくくなることがあります。コントラスト 比で合格した色でも、画像の上に重ねる場合や背景が動く場合は、複数の代表色で再確認すると安全です。