---
title: "ダークモードで文字が読めないときの対処"
description: "ライトモードでは読めるのにダークモードにすると文字が背景に溶ける現象の仕組みを理解し、どの設定を直せば両モードで読める配色を保てるかを判断したい人向けの解説です。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/dark-mode-unreadable"
markdown: "https://giga-site.com/articles/dark-mode-unreadable/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# ダークモードで文字が読めないときの対処

ライトモードでは読めるのに、端末をダークモードにすると文字が背景に溶けて読めない——という相談が増えています。OSの配色設定が一部だけページに反映され、色の組み合わせが破綻するのが典型的な原因です。この記事では仕組みを押さえ、配色を破綻させずに直す手順を解説します。

> Source HTML: https://giga-site.com/articles/dark-mode-unreadable
> Article index: https://giga-site.com/articles/index.md

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

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

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

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

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

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

## 症状別チェック表

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

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

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

## 配色を整える手順

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

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

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

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

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

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

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

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

## よくある質問

### ダークモードで黒地に黒文字のようになるのはなぜですか。

背景色だけ、または文字色だけがOSのダーク設定に追従し、片方が取り残されるためです。文字色と背景色を必ずセットで指定し、prefers-color-schemeで明暗それぞれの色の組を用意すれば防げます。

### prefers-color-schemeとは何ですか。

利用者のOSやブラウザがダーク・ライトのどちらを選んでいるかをWebページが受け取る仕組みです。これを使うと、設定に応じてダーク用とライト用の配色を切り替えられます。

### コントラストはどのくらい確保すればよいですか。

薄すぎて読みにくい組み合わせを避け、文字と背景に十分な明暗差を持たせるのが基本です。装飾で色を薄くしたい箇所ほどダークモードで埋もれやすいので、実機で両モードを確認してください。

### ライトモード前提のロゴが暗背景で見えません。

透明背景で明るい地を前提にしたロゴは暗背景で沈みます。ダーク時には別バージョンの画像に差し替える、下地や余白を付けるなどで視認性を確保してください。アイコンや図も同様に確認しましょう。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [ダークモードとは？暗い配色に切り替える仕組みの基礎](https://giga-site.com/articles/dark-mode-term/index.md)
- [スマホを横向きにすると崩れるときの原因と対処](https://giga-site.com/articles/landscape-mode-layout-break/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)
- [公開したHTMLのフォームが送信できないときの対処](https://giga-site.com/articles/form-not-submitting/index.md)
- [iframeが表示されないときの原因と対処](https://giga-site.com/articles/iframe-not-showing/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "ダークモードで文字が読めないときの対処",
  "description": "ライトモードでは読めるのにダークモードにすると文字が背景に溶ける現象の仕組みを理解し、どの設定を直せば両モードで読める配色を保てるかを判断したい人向けの解説です。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/dark-mode-unreadable",
  "url": "https://giga-site.com/articles/dark-mode-unreadable",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "ダークモードで黒地に黒文字のようになるのはなぜですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "背景色だけ、または文字色だけがOSのダーク設定に追従し、片方が取り残されるためです。文字色と背景色を必ずセットで指定し、prefers-color-schemeで明暗それぞれの色の組を用意すれば防げます。"
      }
    },
    {
      "@type": "Question",
      "name": "prefers-color-schemeとは何ですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "利用者のOSやブラウザがダーク・ライトのどちらを選んでいるかをWebページが受け取る仕組みです。これを使うと、設定に応じてダーク用とライト用の配色を切り替えられます。"
      }
    },
    {
      "@type": "Question",
      "name": "コントラストはどのくらい確保すればよいですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "薄すぎて読みにくい組み合わせを避け、文字と背景に十分な明暗差を持たせるのが基本です。装飾で色を薄くしたい箇所ほどダークモードで埋もれやすいので、実機で両モードを確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "ライトモード前提のロゴが暗背景で見えません。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "透明背景で明るい地を前提にしたロゴは暗背景で沈みます。ダーク時には別バージョンの画像に差し替える、下地や余白を付けるなどで視認性を確保してください。アイコンや図も同様に確認しましょう。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```