A standard site with 4.5:1 contrast and default font sizes is a step toward accessibility but doesn't guarantee comfort for users with visual or motor impairments. An accessibility mode solves this comprehensively: it enlarges text, boosts contrast to 7:1, disables animations, and increases clickable areas. We implemented such a solution using CSS variables and a React component.
Why standard accessibility isn't enough?
WCAG 2.1 requirements are the minimum. Text smaller than 18px needs 4.5:1 contrast, but users with low vision often prefer 7:1 or higher. Additionally, standard accessibility doesn't account for individual preferences: some need only large text, others high contrast, and some suffer from animations. Our mode gives choice: users decide which improvements to enable.
How our solutions work?
The foundation is a set of CSS variables that are overridden when a data attribute is set on html. This instantly applies changes across the entire interface. Switching happens without JavaScript — only through CSS.
| Option | CSS Variable | Effect |
|---|---|---|
| High contrast | --color-text, --color-bg, --focus-outline |
Text and background contrast at least 7:1 |
| Enlarged text | --font-size-base |
Base font size increases by 4px |
| Reduced motion | --transition-duration and animation-duration: 0.01ms |
All animations and transitions disabled |
| Larger touch targets | --min-touch-target to 56px |
Buttons and links become larger, easier for motor impairments |
React control component
We wrote a useAccessibilityMode hook that stores selected modes in localStorage and listens to system media queries. If the OS has reduced motion enabled, the reduced-motion mode activates automatically.
type AccessibilityMode = 'high-contrast' | 'large-text' | 'reduced-motion' | 'large-targets';
function useAccessibilityMode() {
const [modes, setModes] = useState<Set<AccessibilityMode>>(() => {
const stored = localStorage.getItem('a11y-modes');
return stored ? new Set(JSON.parse(stored)) : new Set();
});
// Listen to system settings
useEffect(() => {
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mediaQuery.matches) {
setModes(prev => new Set([...prev, 'reduced-motion']));
}
}, []);
const toggle = useCallback((mode: AccessibilityMode) => {
setModes(prev => {
const next = new Set(prev);
next.has(mode) ? next.delete(mode) : next.add(mode);
localStorage.setItem('a11y-modes', JSON.stringify([...next]));
return next;
});
}, []);
// Apply to document.documentElement
useEffect(() => {
document.documentElement.dataset.accessibilityMode = [...modes].join(' ');
}, [modes]);
return { modes, toggle };
}
function AccessibilityPanel() {
const { modes, toggle } = useAccessibilityMode();
const [isOpen, setIsOpen] = useState(false);
const options = [
{ id: 'high-contrast' as const, label: 'High contrast', icon: '◑' },
{ id: 'large-text' as const, label: 'Enlarged text', icon: 'A+' },
{ id: 'reduced-motion' as const, label: 'Less animation', icon: '⏸' },
{ id: 'large-targets' as const, label: 'Large buttons', icon: '⊞' },
];
return (
<div className="accessibility-widget">
<button
aria-expanded={isOpen}
aria-controls="a11y-panel"
onClick={() => setIsOpen(!isOpen)}
aria-label="Accessibility settings"
>
♿
</button>
{isOpen && (
<div id="a11y-panel" role="group" aria-label="Accessibility settings">
{options.map(opt => (
<label key={opt.id} className="a11y-option">
<input
type="checkbox"
checked={modes.has(opt.id)}
onChange={() => toggle(opt.id)}
/>
<span className="icon">{opt.icon}</span>
{opt.label}
</label>
))}
<button
onClick={() => {
localStorage.removeItem('a11y-modes');
setModes(new Set());
}}
>
Reset settings
</button>
</div>
)}
</div>
);
}
Integration with system settings (no JS)
Some improvements apply automatically if the user has configured their OS. CSS media queries override variables for prefers-reduced-motion: reduce, prefers-contrast: more, and prefers-color-scheme: dark. This reduces browser load and saves bandwidth — no extra JS needed.
/* Automatically for users who prefer reduced motion in OS */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* System high contrast theme */
@media (prefers-contrast: more) {
:root {
--color-text: #000;
--color-bg: #fff;
--focus-outline: 3px solid #000;
}
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--color-text: #f0f0f0;
--color-bg: #1a1a1a;
}
}
What's included in the accessibility mode implementation?
Deliverables:
- A set of CSS variables tailored to your design
- React component with a control panel
- Automatic integration with system settings (prefers-*)
- Documentation for maintenance and configuration
- User guide on how to use the mode
We also train your team: we show how to add new options and test accessibility. Our team has over 5 years of experience in web accessibility and has completed more than 30 projects.
Implementation process
| Step | Duration | Description |
|---|---|---|
| Audit current accessibility | 1 day | Check contrast, text size, focus, keyboard operation |
| Design CSS variables | 1 day | Create a system for your design |
| Develop component | 1–2 days | Write React component or adapt to your architecture |
| Testing | 1 day | Check each mode with screen readers (NVDA, VoiceOver) and keyboard |
| Deployment and documentation | 0.5 day | Deliver code and configuration instructions |
Timeline and cost
Implementation takes from 3 to 5 days depending on site complexity. Cost is calculated individually — we'll evaluate your project for free. We guarantee the mode will meet WCAG 2.1 Level AA. Our CSS-variable approach reduces maintenance effort by 2x, making implementation cost-effective.
Common mistakes during implementation
- Ignoring system
prefers-*queries — users should see changes automatically. - Overriding focus only in CSS without a visible indicator — always keep a visible outline.
- No reset option — give users the ability to revert all settings.
- Using only JavaScript for toggling — our CSS-variable solution is 2–3 times faster and more reliable.
How to ensure the mode works in all browsers?
We test on current versions of Chrome, Firefox, Safari, and Edge. CSS variables are supported by all modern browsers, and prefers-reduced-motion and prefers-contrast media queries are available in recent versions. For older browsers (IE11), graceful degradation is in place: the site remains accessible but without extended options.
Conclusion
An accessibility mode is not a luxury but a necessity for sites aimed at all users. Contact us for a consultation and evaluation of your project. We'll help make your site accessible and comfortable for everyone. Get a free accessibility audit and find out how to improve your site.