Live Demo: Try this and other plugins live — no installation, no risk: demo.markus-michalski.net
The widget applies CSS classes to the <html> element based on the user's selection:
| Setting | CSS Classes |
|---|---|
| Font Size | a11y-font-small, a11y-font-large |
| Contrast | a11y-contrast-high, a11y-contrast-inverted |
| Color Filter | a11y-filter-protanopia, a11y-filter-deuteranopia, a11y-filter-tritanopia |
| Blue Light | a11y-blue-light |
| Animations | a11y-reduce-motion |
Settings are stored under the mmd-accessibility-settings key:
{
"fontSize": "large",
"contrast": "high",
"colorFilter": "none",
"blueLight": false,
"reduceMotion": true
}
The color vision deficiency filters are SVG filters with fixed 3×3 color matrices (feColorMatrix) for protanopia, deuteranopia and tritanopia. They approximate how people with the respective color vision deficiency perceive colors, helping designers and shop owners assess the impact on their content. This is an approximation, not an exact simulation.
The filters act on the #a11y-content-wrapper container that wraps the page content. Elements outside this container are not affected.
You can customize the widget colors by overriding SCSS variables in your own theme:
// In your theme's base.scss, before importing the plugin styles
$a11y-color-primary: #your-brand-color;
$a11y-color-primary-dark: darken(#your-brand-color, 10%);
$a11y-color-bg: #ffffff;
$a11y-color-text: #1f2937;
$a11y-color-border: #e5e7eb;
$a11y-color-hover: #f3f4f6;
The plugin provides the following Twig blocks for customization:
| Block | Purpose |
|---|---|
a11y_widget |
Entire widget container |
a11y_widget_trigger |
Floating button |
a11y_widget_panel |
Settings panel |
a11y_widget_panel_header |
Panel header with title and close button |
a11y_widget_panel_body |
Panel body with all options |
a11y_widget_panel_footer |
Panel footer with reset button |
a11y_widget_option_fontsize |
Font size option group |
a11y_widget_option_contrast |
Contrast option group |
a11y_widget_option_colorfilter |
Color filter option group |
a11y_widget_option_bluelight |
Blue light toggle |
a11y_widget_option_animations |
Animations toggle |