Your site already offers a dark theme, and now you need to look it over. The colors were approved and the switch works, but the real question is whether the dark version still carries everything the light one does—its information, its groupings, and the states people rely on.
This guide is about reviewing that finished dark page: logos, images, surfaces, borders, readable text, and states. It does not re-explain how light and dark values are mapped—the design tokens guide covers that, and the palette guide covers color roles. Dark mode is not accessibility on its own, and “dark” does not mean every surface has to be pure black.
In Online Website Previewer you can open the page and compare it across phone, tablet, and desktop, switching to dark mode with the site’s own control. The previewer shows the theme the site already has rather than creating one.
Get Matching Light and Dark Views
Review the same thing in both themes: the same page and version, the same words, size, and state. A homepage alone can miss the dialog or the selected choice that actually matters.
Start by looking and reading. For states you cannot safely reach, like an error or a saved confirmation, ask the team for supplied examples rather than submitting a real form or changing an account.
Check Logos and Images on the Dark Surface
Look at logos, transparent artwork, and photographs against the dark background they now sit on. A dark logo or dark line art can nearly vanish, while a light rectangle behind an image may be an accident—or a deliberate choice to protect the asset.
If the team has supplied an approved theme-specific logo or backing treatment, compare it. Otherwise, note which part of the logo or image becomes hard to see against the dark background. Do not invert photographs or insist every image be transparent. The question is whether each image’s information and intended look survive the dark theme.
Check What Still Looks Separate
Dark backgrounds can quietly erase the lines that group things. A border, divider, or shadow that was enough in light mode may stop showing where one card, panel, or field ends and the next begins.
Look at adjoining surfaces and at the background around a dialog or overlay, and note where grouping is lost so the team can compare a clearer boundary or a different surface shade. Design systems like Carbon use several dark surfaces rather than one flat black, which is a convention worth knowing, not a required architecture for your site.
Check States on Their Real Backgrounds
The default screen is only one pairing. Look at focused controls, selected choices, links, errors, and status messages on the dark surfaces they actually appear on, including a panel’s close control against the panel itself rather than the main page.
Where color carries meaning, keep a text label or another visible cue so the meaning does not depend on hue alone. NN/g documents how imagery, layering, and legibility problems show up in dark mode—useful for knowing what to look for, though its health and battery discussion is outside this review.
Ask for Measurement Where It Matters
A visual review can flag a concern, but it does not measure a pass. Send the exact page, theme, element, state, and the surface beside it to a designer or accessibility reviewer, and keep an image’s informational purpose separate from numeric interface contrast.
For context, WCAG 2.2 asks for at least 4.5:1 for normal text and 3:1 for large-scale text, which means at least 18 pt, or 14 pt bold, or the CJK equivalent. Those thresholds carry exceptions, including incidental text (in an inactive component, pure decoration, or genuinely part of a picture) and logotypes, so a dark logo that disappears may fall outside the number while still being a real, worth-fixing problem. A separate rule, non-text contrast, asks for 3:1 for the visual information needed to identify controls and their states, and for parts of a graphic needed to understand the content—not for every border, divider, or photograph.
Report What You See
You do not need to name a fix to point at a problem. Give the page and theme, the element and its state, and the surface it sits against.
For example: on the account page in the phone view at 390×844 and dark mode, the dialog’s close control blends into the dialog’s own dark surface, so it is hard to see how to dismiss it—please review its visibility and confirm any contrast requirement that applies. Note which checks you could only do visually, so the right reviewer can confirm the rest.
