Dark website template checklist: contrast, photos and a light option
A dark website template looks dramatic in its own screenshots, where every photo was chosen to glow. With your content it can turn muddy or hard to read. Check four things before you commit: text and muted-text contrast, how ordinary photos sit on the dark ground, whether focus and form states are visible, and whether there's a light theme for the visitors who need one.
Dark template or dark mode?
A dark theme website template is dark by design: the brand lives on a black or charcoal ground and there may be no light version. A dark mode template offers both and switches between them, usually following the visitor's system setting through the prefers-color-scheme media query. They're different promises, so read the description carefully. If you need both, see dark mode website design for how the two palettes should relate.
Check 1: contrast, especially the muted text
Main text in dark templates usually passes easily. The problems are the secondary colours: captions, dates, form hints and footer links set in a mid-grey that measures well below 4.5:1 against the ground, the minimum WCAG sets for normal text at level AA. Measure every text colour in the template, not just the headline.
| Element | What to check |
|---|---|
| Body text | Off-white on charcoal, comfortably above 4.5:1; pure white on pure black can feel harsh for long reading |
| Muted text | Captions, meta and hints still at 4.5:1 or more |
| Accent links | Saturated blues and purples often fail on black; lighter tints usually pass |
| Buttons | Label against fill at 4.5:1, and the button's edge visible against the ground at 3:1 |
| Form fields | The field's outline visible at 3:1 against the page, as WCAG's non-text contrast asks |
| Focus outline | A light or accent outline that shows on every surface, including cards |
Check 2: photo treatment
Demo images in a black website template are usually moody, low-key shots with dark edges that melt into the background. Your own photos may be bright, white-backed product shots or daylight interiors, which can look like holes punched in the page. Before choosing, drop three of your real photos into the template. Look for a template that frames images (a thin border, a slightly lighter surface behind them) or one whose layout can hold light images in contained blocks. Text over photos needs a dark overlay or a scrim strong enough that the text still passes contrast at the photo's brightest point.
Check 3: states and depth
- Depth through lighter surfaces, not shadows. Shadows barely show on black, so cards and menus should sit on slightly lighter greys.
- Hover and focus that change more than opacity. A fade on a dark ground is easy to miss.
- Error colours tuned for dark. A red chosen for white backgrounds is often too dark on charcoal; use a lighter, warmer red for error text.
- Selected and disabled states that differ by more than a shade of grey.
Check 4: is there a light theme?
Some visitors read light-on-dark text less comfortably, including some people with astigmatism, who may see a glow around bright letters. A dark website suits portfolios, music, film, gaming, nightlife and premium products, but if your audience will read long pages or forms, a light alternative is worth having. Even when the brand is dark, check whether the template's colours are defined as tokens you could swap, rather than hard-coded throughout.
Dark themes and templates in Anticode
Any Anticode design-engine build can use the Dark theme, chosen in the visual editor alongside Light and Auto. Each of the seven design systems has its own dark palette, with an off-white text colour on a near-black ground and an accent re-tuned for dark backgrounds: Technical, for example, uses amber at about 9.5:1 on graphite. The Technical and Luxury systems are dark by default under Auto. Auto means the system's own palette; it doesn't switch with the visitor's light or dark setting, so a site has one theme at a time.
In the template gallery, Tallyhaus (a personal finance dashboard in a dark glass style, running on sample data) and Afterglow Run (a synthwave arcade game with a high-score table) are dark templates. Both are apps written by Anticode's model, so they don't have the design systems' Light and Dark switch; ask for a light version in words if you need one. For dark photo choices, see website photography direction.
Questions people ask
Is a black website bad for readability?
Not if contrast is right and body text is a comfortable size. Very long reading is easier for many people on light grounds, so offer a light option where reading matters.
Should a dark template use pure black?
Usually a near-black or charcoal works better, with off-white text. It reduces glare and leaves room for lighter surfaces to show depth.
What accent colours work on dark backgrounds?
Lighter, slightly desaturated tints. Saturated dark blues and purples often fail contrast on black.