Guides & tools

A darker page.
Still a usable page.

Check more than the background. A theme should leave text readable, controls identifiable and meaningful colours intact.

By Jerry Liang · AppNuro · Published October 18, 2026
How we write and maintain our guides

Start with the site’s own theme

If the site already offers a usable dark theme, try it before adding another transformation. Two theme systems can interact in unexpected ways. Save the source page and remember its initial appearance so you can compare.

  1. Choose a typical page with body text, navigation, an image and a form.
  2. Use the same browser width and zoom for the comparison.
  3. Enable one theme system at a time. In Dusk Reader, adjust a single setting before checking the result.
  4. Keep settings per site when sites need different treatment.

AppNuro makes Dusk Reader. This is a manual inspection workflow for native themes and extensions, not a product benchmark or a medical claim about eye health.

Look for these specific failures

Element What to inspect If it fails
Body text & links Small text, visited links and inline links remain distinguishable. Adjust contrast; avoid light grey text against another light surface.
Forms Labels, placeholders, typed values, checkbox marks and error messages remain visible. Try the native theme or disable the extension for this site.
Keyboard focus Tab through links, fields and buttons. The current control has a visible indicator. Do not keep a theme that hides the keyboard’s current position.
Images & charts Photos retain their intended colours; legends, axes and status labels remain legible. Compare with the unchanged page. Disable transformations for colour-sensitive work.
Menus & dialogs Open a real menu or modal. Its text and backdrop still separate clearly. Check the open state after changing a setting; the closed page is not enough.

WCAG’s contrast guidance uses at least 4.5:1 for ordinary text and 3:1 for large text. A visual inspection cannot measure that ratio reliably, and meeting the ratio alone does not establish overall accessibility. See the W3C explanation of text contrast.

Try the controls on this page

Use this sample while changing your theme settings. It is a small fixture for manual checks, not an automated accessibility test. Also check the site you actually intend to read.

Reading preference sample

Read this paragraph, follow the baseline link, then use Tab to move through the controls. Every focused control should remain visible.

Open this to check expanded content

This text should stay readable with your chosen theme. Expanding a section can expose colours absent from the initial view.

Sample values stay in this page and are not submitted or stored by AppNuro.

Restore a useful baseline

If a page looks wrong, disable the theme adjustment for that site and reload. Compare the same element, then reintroduce one change at a time. Report an issue with a public example URL, browser version, extension version and the settings used.

Before making a screenshot for design review, turn the transformation off unless you intend to document the transformed appearance. Keep that state consistent between captures.

Check a capture before sharing → · Report a Dusk Reader issue →