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)?
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.
Sure All the best with your projects.
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: https://webaim.org/resources/contrastchecker/
Additionally, I use the "Accessible Web Helper" Chrome extension to check all the WCAG requirements:
https://chrome.google.com/webstore/detail/accessible-web-helper/gdnpkbipbholkoaggmlblpbmgemddbgb?hl=en-US
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.