Skip to content
Mona Technologies

Dark mode is a feature request. Accessibility is a legal requirement wearing the same clothes

· 6 min read · Mona Technologies

Dark mode and accessibility are frequently built in the same sprint, under the same ticket, by the same designer working from the same color palette. That is a reasonable way to save time, but it quietly conflates two different problems: one is aesthetic preference, the other is whether people using screen readers, low vision, or motor impairments can use your app at all.

Dark mode done properly

  • True black (#000000) backgrounds save battery on OLED screens but reduce perceived contrast — use a dark gray (around #121212) as the base instead
  • Elevation needs to be shown with lighter surface tones in dark mode, since shadows barely read against a dark background
  • Desaturate bright accent colors slightly in dark mode; colors that look fine on white can vibrate uncomfortably on black
  • Test images and icons separately — a logo designed for a white background often needs its own dark-mode variant, not just an inverted filter

What WCAG actually requires

The Web Content Accessibility Guidelines set testable success criteria, not vague good intentions. For app teams, the ones that matter most in practice are text contrast ratios (4.5:1 for normal text under WCAG AA), touch targets of at least 44x44 points, screen-reader labels on every interactive element, and the ability to navigate the entire app without relying on color alone to convey meaning.

  • Contrast ratio 4.5:1 minimum for body text, 3:1 for large text, under WCAG 2.1 AA
  • Every icon-only button needs an accessible label, not just a visual tooltip
  • Form errors must be announced to screen readers, not just shown as a red border
  • Focus order must follow a logical reading sequence for keyboard and switch-control users
  • Never use color alone to indicate state — pair it with an icon or text label

Why this is not optional anymore

Accessibility lawsuits under the Americans with Disabilities Act have moved from websites to apps in the US, and the EU's Accessibility Act extended similar obligations across much of Europe from mid-2025. For apps handling commerce, banking or government services, WCAG conformance is increasingly a procurement requirement, not a nice-to-have — enterprise clients now routinely ask for a VPAT (Voluntary Product Accessibility Template) before signing.

Where the two overlap

Building dark mode with real design tokens rather than a CSS filter forces a team to define contrast ratios explicitly for every color pair — which is most of the WCAG contrast work done as a side effect. Treat them as one project with two checklists, not one ticket, and the accessibility work stops feeling like an afterthought bolted onto a color scheme.

Sources

    Free growth & AI audit

    Get a free 30-minute strategy call — and a written action list

    Bring one problem: an AI workflow you want automated, a search category you are losing, or a build that stalled. You leave the call with a prioritised action list and a straight answer on cost and timeline. No deck, no pressure, no obligation.

    Or reach us directly: WhatsApp +91 7358637362 · +91 7358637362 · arunachalam.skynite@gmail.com
    Typical reply within one business day. We will tell you if we are not the right fit.

    CallWhatsAppFree audit