悪い色のコントラスト例：比率の計測と改善方法
悪い色のコントラスト例
悪い色のコントラスト例とそれぞれの直し方 | We.Inc
ショップページによくある悪い色のコントラスト例を8つ紹介。それぞれWCAGのコントラスト比、不合格の理由、その場で試せる改善方法を解説します。
悪い色のコントラストとは、文字や操作部品の色が背景の色に近すぎて、多くの訪問者が読みにくくなっている状態です。よくある原因は、薄いグレーの文字、明るいオレンジや緑の上の白文字、プレースホルダーのヒント、写真の上の見出しです。WCAG 2.2では通常の文字に4.5:1を求めています。以下の各例にはその比率を示しています。
各例の改善前と改善後のコントラスト比
ここで取り上げるのは、中小企業のサイトで頻繁に見かけるミスです。数値を確認できるよう、独自の配色で再現しました。各例には違反しているルールを示しており、エディターで改善案を試して比率の変化を確認できます。
- ページ内で最も小さく薄い文字を探します：日付、キャプション、フッター、フォームのヒントなど。
- 色付きのカードやバナーも含め、その文字が実際に置かれている背景と比べて確認します。
- 写真の上の文字は、文字の背後にある画像の最も明るい部分と比べてテストします。
- まず明度を変えて直します。同じ色相のより暗い、またはより明るい色調にすれば、ブランドの印象を保てます。
- 明るいデスクトップモニターだけでコントラストを判断しないでください。屋外でスマートフォンからページを見てみましょう。
- 無効なボタンはWCAGの対象外ですが、有効なボタンが無効に見えることは絶対に避けてください。
- ホバー時やフォーカス時の文字も対象です。W3Cは、ホバーやキーボードフォーカスで表示される文字も対象に含めています。
- セールのバナーに明るいブランドカラーを使う場合は、白ではなく濃い色の文字を載せましょう。
- 3:1から4.5:1の比率は大きな見出しやアイコンには問題ありませんが、段落の文字には不十分です。
よくある質問
オレンジの上の白文字がよく不合格になるのはなぜですか？
オレンジや黄色は明るい色なので、輝度が白に近くなります。例に使ったオレンジ#F5A623と白文字の比率は約2:1しかありません。
プレースホルダーの文字もコントラスト基準を満たす必要がありますか？
はい。達成基準1.4.3に関するW3Cの解説では、対象となる文字にプレースホルダーも含まれています。それでも、入力欄の上に見えるラベルを置くほうが望ましい方法です。
写真の上の文字はどう確認すればよいですか？
文字のすぐ背後にある画像部分と比べて計測し、最も明るい部分を想定してください。W3Cは、十分なコントラストのない背景画像を不合格の例として挙げています。
下線のない色付きリンクはコントラストの不合格になりますか？
これは達成基準1.4.1における色の使用の問題です。この基準は、色を情報を伝える唯一の視覚的手段にしてはならないと定めています。下線を付ければ解決します。
グレーアウトした無効なボタンは問題ですか？
非アクティブなユーザーインターフェース部品の文字には、1.4.3のコントラスト要件はありません。ただし、見た目だけでなく、ボタンが本当に非アクティブであることを確認してください。
これらのミスがよく起こる理由
- デザインは、大きく明るい画面で承認されることがよくあります。そうした画面では薄い文字もくっきり見えます。しかし、明るさを下げた古いスマートフォンで同じページを見ると、まったく違って見えます。
- 残りの原因はブランドカラーです。明るいオレンジやライムは図形としては見栄えがしますが、ブランドカラーの上に白文字というのがよくあるボタンの見た目なので、誰かがそこに白文字を載せてしまいます。
比率とは関係のないルール
- 達成基準1.4.1は比率とは別のもので、色だけを情報の表示手段にしないことを求めています。色だけで示したリンク、赤色だけで示した必須項目、色相だけで区別したグラフは、いずれもこの基準に違反します。
- 色は、下線、アイコン、ラベル、パターンなど、別の手段と組み合わせましょう。
各例の問題点
各例の問題と改善方法
- 薄いグレーの本文
- 薄いグレーはモックアップでは落ち着いて見えますが、日中のスマートフォンでは消えるように見えます。
- グレーを#595959まで暗くすると、白の背景で7:1になります。
- ラベル代わりのプレースホルダー
- 空の入力欄の中のヒントは薄い色であることが多く、WCAGはプレースホルダーの文字もコントラストが必要な文字として扱います。
- 入力欄の上に見えるラベルを置き、ヒントを#6B7280まで暗くします。
- 明るいオレンジのボタンに白文字
- オレンジや黄色のような明るい中間色は明度が高いため、その上の白文字はコントラストがほとんどありません。
- #C2410Cのような焦げたオレンジを使うか、明るいオレンジのまま濃い色の文字を載せます。
- 薄い緑のバッジに白文字
- 成功やセールのバッジには、白文字が映えない明るい緑がよく使われます。
- 白文字の背景には#15803Dのような濃い緑を使います。
- グレーのカードにグレーの文字
- 白の背景で合格するグレーでも、色付きのカードではページより暗いため不合格になることがあります。
- 色付きの面では#4B5563のような、より暗いグレーを使います。
- 暗いパネルにブランドの青文字
- 白の背景で機能する中間の青は、チャコールの上ではくすんで見えます。どちらの色も明るさの中間に位置するためです。
- 暗いパネルでは青を#93C5FDまで明るくします。
- 淡い写真の上の白い見出し
- 写真の上の文字は、その背後にある画像部分と比べて確認されます。明るい空や白い壁の上では、白文字は目立ちようがありません。
- 見出しを単色または十分に暗くした帯の上に置くか、画像の外に移します。
- 色だけで示したリンク
- リンクが周囲の文と色でしか区別されていないと、色の違いを見分けられない人はリンクを見つけられません。
- 本文中のリンクには下線を付けます。色はそのままで構いません。
CSSでの改善方法
写真の上でも読みやすい見出し
文字の背後に暗い帯を置くと、写真の内容にかかわらず白文字に安定した背景ができます。
色に頼らないリンク
段落内のリンクには下線を付け、キーボードフォーカスには分かりやすいアウトラインを付けます。
改善前と改善後のエディター
例を選んでから改善後の色を変更し、ブランドの色調をどこまで調整すると不合格になるかを確認しましょう。
例
文字色
背景色
コントラスト {r}
本文に対するリンク {r}
本文の基準4.5:1を満たしています。
3:1のみ満たしているため、大きな文字かアイコンまでです。
3:1未満です。多くの人にとって読みにくい状態です。
改善後は色をそのままに下線を加えているため、色が唯一の手がかりではなくなります。
16進数のカラーコードではありません
今週は$50以上のご注文で送料無料。
カートに追加
メールアドレス
春のメニュー提供中
ご注文の前に
返品ポリシー
をお読みください。
色はWCAG 2.2の計算式を使い、ブラウザー内でチェックされます。
薄いグレーの本文
ラベル代わりのプレースホルダー
明るいオレンジのボタンに白文字
薄い緑のバッジに白文字
グレーのカードにグレーの文字
暗いパネルにブランドの青文字
色だけで示したリンク
薄いグレーはモックアップでは落ち着いて見えますが、日中のスマートフォンでは消えるように見えます。
空の入力欄の中のヒントは薄い色であることが多く、WCAGはプレースホルダーの文字もコントラストが必要な文字として扱います。
オレンジや黄色のような明るい中間色は明度が高いため、その上の白文字はコントラストがほとんどありません。
成功やセールのバッジには、白文字が映えない明るい緑がよく使われます。
白の背景で合格するグレーでも、色付きのカードではページより暗いため不合格になることがあります。
白の背景で機能する中間の青は、チャコールの上ではくすんで見えます。どちらの色も明るさの中間に位置するためです。
リンクが周囲の文と色でしか区別されていないと、色の違いを見分けられない人はリンクを見つけられません。
グレーを#595959まで暗くすると、白の背景で7:1になります。
入力欄の上に見えるラベルを置き、ヒントを#6B7280まで暗くします。
#C2410Cのような焦げたオレンジを使うか、明るいオレンジのまま濃い色の文字を載せます。
白文字の背景には#15803Dのような濃い緑を使います。
色付きの面では#4B5563のような、より暗いグレーを使います。
暗いパネルでは青を#93C5FDまで明るくします。
本文中のリンクには下線を付けます。色はそのままで構いません。
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る