「この色の組み合わせは読みにくいため…」と出たけど、どうすればいいの？
WordPress（ワードプレス）でホームページやブログを作っているときに、
色を変えたら、画面の上にこんなメッセージが出てきたことはありませんか？
「この色の組み合わせは読みにくいため、より明るい背景色、より暗い文字色を試してください。」
この記事では、この注意書きの意味と、どう対応すればいいか、そして色の見え方をチェックできる無料ツールをご紹介します。
なぜ「見えにくいかもしれない」と言われるの？
このメッセージは、文字の色と背景の色が「見えにくいかもしれない」ときに出る注意です。
たとえば：
- 白い背景に、うすいグレーの文字
- 黒い背景に、くらいグレーの文字
このような色の組み合わせは、目が疲れたり、読みづらかったりします。
また、色の見え方に特性がある方や、視力が弱い方にとっては読みにくくなることもあります。
WordPressでは、そうした「見えにくさ」を防ぐために、アクセシビリティ（＝誰にでも見やすく）を意識して注意メッセージを出しているのです。
「アクセシビリティ（accessibility）」とは、どんな人にとっても使いやすく、わかりやすいようにするという考え方です。
目が見えにくい方、色の区別がつきにくい方、小さい文字が読みづらい方…
そんな方々にも安心してホームページを見てもらえるよう、読みやすい色やデザインにすることが大切とされています。
どうすればいいの？
1. 色を変えて、もっと見やすくする
- 背景が白なら、黒やこいグレーの文字にすると安心です
- 背景が黒なら、白や明るい文字が読みやすいです
2. デザインのイメージを大切にしたいなら、そのままでもOK
この注意は「公開できない」わけではなく、あくまでもアドバイスです。
デザインのこだわりがある場合は、そのまま使っても大丈夫です。
ただし、読みやすさには少し気を配ると親切です◎
色の見え方をチェックできる無料ツール
「色の見え方が、人によって違うってどういうこと？」
「私のホームページ、見づらくなってないかな？」
そんなときに役立つ、無料で使えるチェックツールをご紹介します。
誰でも使えるので、気になったらぜひ試してみてください。
▶ Spectrum（スペクトラム）【色覚の見え方を再現するツール】
Spectrumは、Google Chromeに追加して使える無料の拡張機能です。
色覚タイプ（赤が見えにくい、緑が見えにくい など）の人が、あなたのホームページをどのように見ているかを画面上でそのまま再現できます。
🌟 使い方（かんたん4ステップ）
- Google Chromeで Spectrumのページ を開く
- 「Chrome に追加」をクリックしてインストール
- 自分のホームページを開いた状態で、右上の拡張機能アイコンから Spectrum をクリック
- 表示された一覧から見たいモードを選ぶだけ！
📋 Spectrumで選べるモード一覧
| モード名 | 見え方の特性 |
|---|---|
| Protanopia | 赤が見えにくい |
| Protanomaly | 赤が少し見えにくい |
| Deuteranopia | 緑が見えにくい |
| Deuteranomaly | 緑が少し見えにくい |
| Tritanopia | 青が見えにくい |
| Tritanomaly | 青が少し見えにくい |
| Achromatopsia | 色がまったく見えない（白黒） |
| Normal | 通常の見え方（元に戻す） |
💡特に「Protanopia（赤）」「Deuteranopia（緑）」「Tritanopia（青）」の3つはチェックしておくと安心です。
▶ Accessible Colors（アクセシブルカラーズ）【見やすさの合否を判定＋代替案つき】
Accessible Colorsは、背景色と文字色を入力するだけで、見やすいかどうかを判定してくれる無料サイトです。
もし見づらい組み合わせだった場合は、代わりにおすすめの色も教えてくれます。
🌟 使い方
- サイトにアクセス：https://accessible-colors.com/
- Text color（文字の色）と Background color（背景色）に、使いたい色のコードを入力
- コントラスト比と、AA／AAA の合否が表示されます
- 合格しなかった場合、「この色に変えたら合格できますよ」と代替案が表示されます
💬 AA／AAAってなに？
これは、ウェブサイトやウェブコンテンツができるだけ多くの人に公平に利用されるために設けられた国際的なガイドライン（WCAG-Web Content Accessibility Guidelines）にもとづいた評価です。
つまり、見やすいかどうかのチェックになります。
| レベル | 意味 | どんな場合に必要？ |
|---|---|---|
| AA | 一般的に読みやすいとされる基準 | 通常のWebサイトやブログでOK |
| AAA | とても高い読みやすさの基準 | 高齢者向け・公共サイトなどに推奨 |
たとえば、背景が白で文字がうすいグレーだと「AAに不合格」と表示されることもあります。
Accessible Colorsでは、それを見える色に自動で変換して提案してくれるので、とても便利です！
🌱 見やすいデザインは、やさしさでもある
デザインを考えるとき、「おしゃれに見せたい」「イメージを大事にしたい」と思うことは多いですよね。
でも、見る人のことを考えた「読みやすさ」も、立派なデザインの一部です。
ほんの少しの色の工夫で、誰かにとって「読みやすい＝伝わるデザイン」になります。
見やすさは、思いやりです。
気になる方は、実際の見え方や見やすさをかんたんにチェックしてみてくださいね。
色やデザインに迷ったときは…
「この色で本当にいいのかな？」
「注意は出るけど、どう直せばいいのかわからない…」
そんなときは、単発レッスンでホームページの配色相談も受け付けています😊
ちょっとした工夫で、もっと伝わるデザインにしていきましょう。