Skip to content

IT業界への道〜ブラックモードの機能を追加するにはどんな色を使うのがいいのか〜

in IT on

今作っているプロジェクトでブラックモードの機能を入れました💡

例えば白のバックグラウンドでテキストは黒 とても見やすいと思います。

ブラックモードにした時に 黒のバックグラウンド、テキストは白 見やすいと思います。 ただ今私のサイトでボタンがあるんです。黒枠のボタンでボタン内がオフホワイト、テキストが黒

この場合、ブラックモードにしたときにテキストが白になって文字が見えなくなってしまう。


ここで疑問が、、、、🧐

ブラックモードにした場合に、バックグランドに合わせてテキストの色が変わった方が見やすいのか?
もしくは、黒、白のバックグラウンドどちらの色にも見やすいテキストでデザインを決めていった方がいいのか、、、?

教えてください!AI先生!


結論:背景に合わせて色を変えるべき。


ではなぜ背景に合わせてテキスト色も変えるべきなのか?

  1. 人間の視認性の原則 視認性は、背景とのコントラストで決まります。

    黒背景 × 白文字 → 可読性 高

    白背景 × 黒文字 → 可読性 高

    黒背景 × 黒文字 → 見えない

    白背景 × 白文字 → 見えない

    この原則から、背景に合わせて文字色を変えないと、ユーザーにとっての視認性が大幅に低下してしまいます。

  2. 大手サイトの実例 Apple、Google、YouTube、GitHubなどの大手サイトは、ダークモード時にテキスト色を白系・灰色系に切り替えています。これは、「背景色に合わせてユーザーの目への負担を減らす」と「可読性を確保する」ためです。
  3. 「どちらの背景色にも合う色で統一する」は現実的でない 黒背景と白背景の両方で完璧に見やすい色というのは、残念ながら存在しません。特定のアクセントカラー(シアンやオレンジなど)を共通で使うことはできますが、その場合、デザインの自由度が下がり、可読性が完璧には確保されず、UI全体のバランスが崩れる可能性が高まります。

なるほど!今は小さいページだからあんまり感じないけど、ページが何枚もあるようなサイトだと同じ色ばかり使うと見えにくいものになってしまいますよね。

今回の勉強ダークモード、ライトモードで私が一番重要だと思うののが、どんな人でも見やすいサイト作りの”アクセシビリティの確保”
アクセシビリティの確保とは、色覚特性を持つユーザーや、目の疲れを感じやすいユーザーにとって、コントラストが適切に保たれていることは非常に重要です。背景色に合わせてテキストの色を変えることで、より多くのユーザーがストレスなく利用できるようになります。

これからも誰もが使いやすいサイトを作れるように頑張ります!

このブログのダークモードぜひ試してみてください!


Thank you!💕


IT業界への道〜面接の振り返り〜