tellogs.com

コントラスト確認のよくあるミス

コントラストチェッカー

コントラスト確認で最もよくあるミスは、テキスト色と背景色の組み合わせを部分的にしかチェックしないことです。ヘッダーのテキストは確認したが、サイドバーやフッターのテキストは見落としていた、というケースが頻繁にあります。

画像の上にテキストを配置する場合も注意が必要です。画像の色は場所によって異なるため、テキストが配置される箇所のコントラストが不十分になることがあります。背景画像の上にテキストを置く場合は、半透明のオーバーレイを追加するなどの対策が有効です。

フォーカス状態やホバー状態の色も見落としがちです。リンクテキストの通常状態はコントラスト基準を満たしていても、ホバーやフォーカス時の色が基準を下回るケースがあります。すべてのインタラクティブな状態について、コントラストを確認する習慣をつけましょう。アクセシビリティガイドページもご参照ください。

コントラストチェッカーを使ってみましょう

このページの内容を、コントラストチェッカーで実際に試してみましょう。

コントラストチェッカーを開く