Dark Mode Color Scheme | mysimulator.uk

Define a cohesive dark mode palette that preserves contrast, clarity,

Background layers: base #0d1728, surface #111c2d, raised #15223a. Text: primary #e5ecf5, secondary #b6c3d7, muted #7f8ba3. Accents use brand greens/blues adjusted for dark contrast.

Maintain AA contrast for text/icons (≥4.5:1). Hover: lighten surfaces subtly; focus: clear outline with 3px ring; active: slight darken; disabled: reduce opacity while keeping legible text.

Accessibility & Testing

Test contrast across all states; verify charts/maps with dark palettes; ensure focus visibility; respect reduced motion; allow user toggle persistence.

live demo · related simulation● LIVE

Base: #0f172a; Raised: #111827; Cards: #131c2b with subtle borders #1f

Use soft shadows with low blur and low alpha to avoid halos.

Apply 1px borders to delineate panels instead of heavy shadows.

Frequently asked questions

What color are links in dark mode – #86efac; hover #a4f3c2; visited #?

Links: #86efac; hover #a4f3c2; visited #6ee7b7.

What are the background and text colors for disabled elements – bg #1f2937; text #4b5563; bord?

Disabled: bg #1f2937; text #4b5563; border #1f2937.

How should I use darker backgrounds (#0f172a) with gridlines #1f2937?

Use darker backgrounds (#0f172a) with gridlines #1f2937 at low alpha. Keep series colors vivid but not neon; ensure 4.5:1 for labels. Provide a high-contrast chart mode for accessibility.

What considerations should I keep in mind regarding accessibility and comfort?

Accessibility and comfort are paramount when designing dark mode, ensuring users can comfortably navigate the interface while maintaining sufficient visual contrast and respecting user preferences for reduced motion.

▶ Try it live

Everything above runs in your browser — open Hash Function Avalanche Visualizer and change the parameters while it is running. Nothing is installed, nothing is uploaded, the whole model lives in one tab.

▶ Open Hash Function Avalanche Visualizer simulation