# Fix invisible text in a dark HTML document

Canonical: https://githtml.com/guides/invisible-text-dark-html
Published: 2026-09-26
Publisher: WaveTech LLC / gitHtml

Inspect the text color and its actual background together, including inherited values and component overrides. A dark page can contain light panels, transparent images, or hard-coded labels that do not share its palette. Repair the specific color pair and verify both appearances; global inversion often damages meaningful visuals.

## Locate the real color pair

Start with one unreadable element and determine which rule supplies its foreground and which surface sits behind it. A paragraph may inherit pale text from the body while its callout retains a white background. The inverse can occur when a component hard-codes dark text on a now-dark panel. Merely changing the body colors will not resolve every nested combination.

Inspect states as well as the default view. Links, selected text, badges, and code tokens can each have separate rules. A syntax-highlighting theme may have been designed exclusively for a light background. If the problem appears only in one component, avoid replacing the entire document stylesheet before understanding that component's overrides.

## Consolidate appearance decisions

Use a small set of shared color roles for text, surfaces, borders, and links. Map those roles to light and dark values, then remove unnecessary hard-coded exceptions. This makes future changes easier to review and reduces the chance that a newly added callout accidentally uses the wrong palette.

Do not use a blanket filter to invert the whole document. Screenshots, logos, photographs, and charts may contain colors with specific meaning. Instead, place a visual on a deliberate neutral surface or export a suitable alternative when required. Preserve a text explanation so a color problem cannot erase the conclusion represented by the image.

## Verify readability, not just visibility

Text can be technically visible yet too faint for comfortable reading. Check the contrast of the actual paired colors and inspect small captions in particular. Avoid declaring accessibility compliance after changing one palette value; contrast is one part of a broader review. Keep links recognizable without relying solely on their hue.

1. Find the computed foreground and background of the affected text.
2. Check whether inheritance or a local override creates the mismatch.
3. Repair the component using shared palette roles.
4. Review code tokens, links, warnings, and table headers in both appearances.
5. Inspect embedded visuals individually rather than inverting them globally.
6. Confirm that status labels and important distinctions remain understandable without color.

## Sources and further reading

- [MDN: prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
- [W3C: understanding contrast minimum](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)

## Related guides

- [Find why an HTML document opens without its styling](https://githtml.com/guides/missing-css-in-html-reader)
- [Troubleshoot broken relative image paths in repository HTML](https://githtml.com/guides/broken-relative-image-paths-html)
- [Distinguish a GitHub file page from an image resource URL](https://githtml.com/guides/github-page-url-versus-image-resource)
- [Find the element making an HTML document scroll sideways](https://githtml.com/guides/html-document-horizontal-overflow)

Editorial approach: https://githtml.com/guides/about