High Contrast Option for Rider Theme
The current Ryder theme fails WCAG color contrast guidelines for both the light and dark themes. Are there any plans to also include a high-contrast option (in addition to the current light and dark themes)?
Replies (7)
Sure, I'll share our theme once I create it 
. It's a low-priority task for us right now, so it will probably be a while before we get to it.
You are much better designers than me (and I'm colorblind), but the main change was to darken the primary color in _variables.custom.scss to:
$primary: #006DFF;
This gets the contrast above 4.5 (the minimum for WCAG) when viewed on a white background. I use this online tool to check an individual color contrast value:
Additionally, I use the "Accessible Web Helper" Chrome extension to check all the WCAG requirements:
Ultimately, we will probably create a version of your Rider light theme where all the colors are high-contrast.
I would recommend for future themes to create 3 versions (light/dark/high-contrast) that are selectable through your HTML data-theme property.
Thank you for a great theme!
Thank you for sharing this. We will consider it. Will it be possible to preview your high-contrast version ?
Understood and that is what we are doing to make the theme WCAG compliant. Just thought you should know that your default light/dark themes do not meet the color contrast standards.
Thanks for the suggestion. If you can share a demo link of your imprvoements we would love to have a look
Hi,
Thanks for your feedback. If you have suggestions on specific layout parts and components we will consider improving it in a future update. However, you can fully customize the theme colors globally via sass variables. Please follow the documentation and refer to src/sass/layout/_variables.scss and src/sass/components/_variables.custom.scss to customize the theme colors.
Regards.
