WCAG Admin Accessibility Tools
This doc explains how to fully customize your site’s appearance when Dark Mode is enabled using the WCAG Admin Accessibility Tools plugin. Basic CSS knowledge is required.
Initial Setup
Navigate to Tools > WCAG Admin Accessibility Tools > Modes.
- Set Mode Visibility to “Administrators Only” or “Logged-In Only” to restrict access during testing.
- If your logo looks incorrect on dark backgrounds, upload both a default (light mode) and alternative (dark mode) logo. Enter their URLs into the corresponding fields in plugin settings.
- Visit the front end of your site and click the mode toggle until Dark Mode is active. This adds the
wcagaat-dark-modeclass to the<body>element and begins applying basic dark mode styles.
Updating CSS
1. Understand How Targeting Works
When Dark Mode is enabled, the plugin adds:
- A global class:
<body class="wcagaat-dark-mode">- An optional helper class that just sets a
#222222background and#fffffftext color: Example
<div class="dark-mode"> <!-- auto styles applied -->Use the wcagaat-dark-mode class as the parent selector to conditionally apply your styles only in Dark Mode.
2. Override Theme Styles
Use descendant selectors to override specific elements only when Dark Mode is active. Example:
.wcagaat-dark-mode body {
background-color: #222222;
color: #ffffff;
}
.wcagaat-dark-mode a {
color: #85c1ff;
}
.wcagaat-dark-mode a:hover {
color: #ffffff;
}3. Target Specific Components
Dark Mode support must be tailored to your theme. Common areas to update include:
/* Header and nav background */
.wcagaat-dark-mode header,
.wcagaat-dark-mode nav {
background-color: #1a1a1a;
}
/* Widget or sidebar area */
.wcagaat-dark-mode .widget,
.wcagaat-dark-mode .sidebar {
background-color: #2b2b2b;
color: #e0e0e0;
}
/* Form fields */
.wcagaat-dark-mode input,
.wcagaat-dark-mode textarea,
.wcagaat-dark-mode select {
background-color: #333333;
color: #ffffff;
border-color: #555555;
}4. Use Built-In Helper Class for Quick Inversion
Any element with the dark-mode class will automatically receive:
background-color: #222222;
color: #ffffff;You can use this to quickly apply basic dark styling:
<div class="dark-mode">
This section auto-adjusts when dark mode is active.
</div>5. Creating Your Own Helper Class
You can create a custom CSS class that applies dark mode styling to specific elements without rewriting theme styles.
- Define Your Class in CSS:
.wcagaat-dark-mode .custom-dark {
background-color: #222222;
color: #ffffff;
border: 1px solid #444444;
}- Apply It to an Element:
<div class="custom-dark">
This element will have a dark background and light text when Dark Mode is active.
</div>Testing Tips
- Use browser developer tools to inspect your theme and test selectors in real time.
- Test across different screen sizes and themes.
- Be careful with elements that use background images — you may need to darken or swap them for visibility.
- You can use the Color Contrast checker from the admin bar to make sure the elements have proper contrast in Dark Mode, too!
Final Step: Enable for Everyone
Once your Dark Mode styles are complete and tested:
- Return to Tools > WCAG Admin Accessibility Tools > Modes.
- Set Mode Visibility to “Everyone” so your users can benefit from the accessibility options.