こんにちは！Web制作の世界へようこそ。HTMLを書き始めて、`

`でタイトルをつけたり、`

`で文章を並べたりするのはとても楽しいですよね。

でも、ふとブラウザで自分の作ったページを見たとき、「あれ、なんだか文字が読みづらいな…」と感じたことはありませんか？

実はそれ、あなたのセンスのせいではなく、単に「コントラスト」が足りていないだけかもしれません。今日は、Webサイトの「読みやすさ」を決定づける、一番大切なルールについてお話しします。

—

想像してみてください。「白っぽい背景の上に、薄いグレーの文字」で書かれた看板があるお店。あなたはそこに入りたいと思いますか？

きっと、目を細めて頑張って見ようとするけれど、結局「何のお店かわからないから、隣の店に行こう」となってしまいますよね。

Webサイトも同じです。どれだけ素敵なデザインでも、文字が読めなければ、それは「準備中」の看板を掲げているのと同じ。「コントラスト」とは、背景色と文字色の「明暗の差」のこと。この差がしっかりあることで、読者はストレスなく情報をキャッチできるんです。

Webの世界には、世界中の誰もが困らずにサイトを使えるようにするための「WCAG（ウェブ・コンテンツ・アクセシビリティ・ガイドライン）」という基準があります。

ちょっと難しそうな名前ですが、要は「このくらいの差があれば、目が疲れにくいし、視力が弱い人でも読めるよ！」という「おもてなしの基準」だと思ってください。

具体的には、以下の数値がひとつの目安になります。

「比率なんて計算できないよ！」という声が聞こえてきそうですが、大丈夫です。今は便利なツールが全部やってくれます。

—

まずは、基本のHTMLとCSSを書いてみましょう。読みやすさを意識して、色を組み合わせてみます。

ようこそ、私のブログへ

ここは、コントラストを大切にした優しいサイトです。
背景と文字の色の差をしっかりつけるだけで、読み心地は驚くほど変わります。

ここで大切なポイントは、「薄いグレー」を使いすぎないことです。おしゃれに見せようとして薄い色を使いすぎると、真っ先に読めなくなってしまうのはユーザーなのです。

—

「自分の作った色が基準を満たしているか心配…」というときは、Googleが提供している無料ツールを使いましょう。

[WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)

使い方はとてもシンプルです。
1. Foreground Color（文字色）に色のコード（#333など）を入れる。
2. Background Color（背景色）に色のコードを入れる。
3. 画面に「Pass」という緑色の文字が出れば合格です！

もし「Fail（不合格）」と出ても落ち込まないでください。「もう少し文字を濃くしようかな？」「背景を少し暗くしてみようかな？」とパズルを解くように調整するだけで、あなたのサイトはグッとプロっぽく、そして優しく生まれ変わります。

Web制作は、ただHTMLタグを並べる作業ではありません。画面の向こう側にいる「誰か」が、心地よく情報を読めるように整えてあげる「デジタルな接客」です。

最初は色選びに迷うかもしれませんが、少しずつ「読みやすさ」にこだわる癖をつけるだけで、あなたの書くコードは誰にとっても温かいものに変わっていきます。

まずは今作っているページの文字色を、今日ご紹介したツールでチェックしてみてくださいね。きっと、新しい発見があるはずですよ！

応援しています。また一緒に、素敵なWebサイトを作っていきましょう！