Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

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)?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (7)


Sure, I'll share our theme once I create it happy. It's a low-priority task for us right now, so it will probably be a while before we get to it.



Sure happy 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 happy



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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(