High Contrast Mode Toggle — Free Accessible UI Theme Switch

Dark-mode toggles are everywhere; genuine high-contrast toggles are rarer, and the two are not the same feature. A dark theme optimizes for comfort in low light. A high-contrast theme optimizes for legibility — for users with low vision, certain color-vision deficiencies, or anyone in bright glare — by widening every ratio, thickening borders that would otherwise be a faint 1px line, and making sure status is never communicated by color alone. This snippet builds a working toggle that flips a small dashboard between the two, using the same "one attribute on the root" architecture as a dark-mode switch, applied to a genuinely different design goal.

One data attribute drives everything

Clicking the toggle sets data-contrast="high" (or "normal") on #demoRoot, and every override lives in CSS selectors scoped under .demo-root[data-contrast="high"]. The JavaScript never touches a color value directly — it only flips the attribute, the same separation of concerns used in the dark mode toggle and color mode toggle snippets. That separation matters here specifically because it keeps every contrast decision in one auditable place instead of scattered across component-level JS logic.

What actually changes, and why

Borders go from a subtle 1px translucent line to a solid 2px white border, because a barely-visible card edge is exactly the kind of detail low-vision users lose first. Backgrounds and text collapse to pure black and white rather than the dark theme's softened grays, pushing contrast ratios toward WCAG's stricter AAA target of 7:1 for body text rather than the AA minimum of 4.5:1. Status dots that relied on green/yellow/red alone gain text labels ("OK", "UP", "DOWN") in high-contrast mode, because color-coding without a redundant cue fails WCAG 1.4.1 (Use of Color) for anyone who can't reliably distinguish the hues, not just users who are fully colorblind.

Respecting the OS-level signal too

Beyond the manual toggle, the JS checks window.matchMedia('(prefers-contrast: more)') on load, so a user who has already told their operating system they want more contrast gets it automatically here too, without hunting for an in-app switch — mirroring how a reduced-motion toggle checks prefers-reduced-motion. A saved localStorage preference takes priority over the OS default on repeat visits.

Where this belongs

Any dashboard, admin panel, or data-dense interface benefits from an explicit high-contrast option, since low-vision users are disproportionately concentrated in exactly those data-heavy, small-text contexts. Pair it with a text size adjuster and a color contrast checker for a fuller accessibility toolbar, or with focus-visible styling so keyboard focus rings also widen under high contrast, as this snippet's toggle button itself does.