ダークモードで文字が読めないときの対処

ダークモードで読めなくなる理由

OSやブラウザにはダークモードの設定があり、Webページは prefers-color-scheme という仕組みでその設定を受け取れます。問題が起きやすいのは、文字色だけ、あるいは背景色だけが設定に追従して、片方が取り残されるケースです。たとえば背景が暗くなったのに文字も暗いままだと、黒地に黒文字のような状態になり読めなくなります。

ブラウザが自動で色を反転する機能や、フォームの既定色がダーク向けに変わることも、配色の破綻につながります。色をひとつだけ指定して残りを既定任せにしていると、こうしたずれが起きやすくなります。

読めなくなる典型パターン

ダークモードでの不具合にはよくある型があります。実機をダークモードにして、どれに当たるかを確認しましょう。

• 暗い背景に暗い文字（または明るい背景に明るい文字）でコントラストが足りない
• 文字色だけ指定して背景色を指定しておらず、暗い既定背景に埋もれる
• 入力欄やプレースホルダーの文字が背景と同化して見えない
• 画像やロゴが白背景前提で、暗い地に白フチが浮いてしまう
• 影やボーダーが暗背景で見えなくなり、要素の境界が分からない

症状別チェック表

ダークモードで文字が読めないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

配色を整える手順

ダークモードの読めなさは、明暗どちらでも成立する配色を用意することで解決します。次の順で進めてください。

1. 端末をダークモードに切り替え、どの要素が読めないかを実際に確認する
2. 文字色と背景色は必ずセットで指定し、片方だけ既定任せにしない
3. prefers-color-schemeでダーク時の配色を用意し、明暗それぞれで色の組を決める
4. 文字と背景のコントラストが十分かを確認し、薄すぎる組み合わせを避ける
5. 入力欄・プレースホルダー・ボーダー・影もダーク時の見え方を確認する
6. ライトモードに戻しても破綻していないか、両モードで最終確認する

画像とコントラストの注意点

背景が透明なロゴや図は、明るい地を前提にしていると暗背景で見えにくくなります。ダーク時には別の画像に差し替える、余白や下地を付けるなどで視認性を確保します。アイコンやイラストも、明暗どちらでも判別できるか確認しておくと安心です。

コントラストは「なんとなく読める」ではなく、薄い文字色を避けて十分な明暗差を確保するのが基本です。装飾的に色を薄くしたい箇所ほど、ダークモードで埋もれやすいので注意してください。両モードを切り替えながら確認するのが確実です。

両モードの見え方を確認してもらう

ダークモードの不具合は、自分の端末が常にライトモードだと気づきにくいものです。明暗の設定を変えて見てくれる相手や、普段ダークモードを使っている人に確認してもらうと、見落としを防げます。

ギガサイト便なら、調整したHTMLやZIPをドロップして発行された共有URLを送るだけで、相手は自分の端末でライト・ダーク両方に切り替えて表示を確かめられます。修正後は同じURLのまま差し替えできるので、配色を直しては両モードで見てもらう確認を、リンクを送り直さずに回せます。社外への共有時は認証と公開期限の設定を併用しておくと管理しやすくなります。