ノーコードサイトの文字色と背景色、最低限気をつけたいコントラスト

配色にこだわってサイトを作ったのに、できあがったものを見返すと文字が意外と読みにくい——という経験をしたことはないでしょうか。薄いグレーの文字をおしゃれ目的で多用した結果、肝心の文章が読み取りづらくなっているケースはよく見かけます。

この記事では、文字色と背景色のコントラスト（明暗差）について、最低限気をつけたい基本を整理します。

コントラストとは何か

コントラストとは、文字の色と背景の色の明るさの差のことです。この差が小さいほど、文字と背景の境目がぼやけて見え、読み取るのに余分な力が要るようになります。

視力の弱い方や高齢の方だけの問題ではありません。屋外でスマートフォンの画面が見えにくいときや、単純に画面が小さいときなど、誰にとっても影響が出うる部分です。

目安になる考え方

Web業界には、WCAG（Webコンテンツ・アクセシビリティ・ガイドライン）という国際的な指針があり、本文の文字は背景との明るさの差が一定以上あることが望ましいとされています。細かい数値を覚える必要はありませんが、「なんとなく薄い」と感じたら、それは実際に基準を下回っているサインかもしれません。

見落としやすいパターン

• 薄いグレー文字を、おしゃれな印象を狙って多用してしまう
• 背景画像の上に文字を重ねたとき、画像の明るい部分に文字がかかって読みにくくなる
• ボタンの文字色とボタンの背景色の組み合わせが、単体で見ると気づきにくいほど近い
• ホバーしたときだけ色が変わり、その瞬間だけ読みにくくなる

確認する方法

無料で使えるコントラストチェックツールに、文字色と背景色の組み合わせを入力するだけで、読みやすさの目安を確認できます。ツールを使わなくても、画面を白黒（グレースケール）表示に切り替えて眺めてみるだけで、コントラストが低い箇所は意外と見つけやすくなります。

まとめ

配色のおしゃれさと読みやすさは、両立できないものではありません。「薄い色を使う前に、コントラストは足りているか」を一度立ち止まって確認する習慣をつけるだけで、見た目と読みやすさのバランスが整います。Studioでの画像の代替テキストや見出し構造など、他のアクセシビリティ配慮はStudioのアクセシビリティ機能の基本でも扱っているので、あわせてご覧ください。