sensu-docs
sensu-docs copied to clipboard
[Accessibility] Improve contrast in elements with #65b34e background
Description
The WAVE browser extension and https://webaim.org/resources/contrastchecker/ notes that contrast is insufficient for elements that use the Sensu green (hex code #65b34e), such as the green boxes/buttons on docs.sensu.io and the active menu item in the left/right nav menus.
Category
This is an issue with:
- [ ] bug (bug in site build, layout, or functionality)
- [x] enhancement (add new or updated site functionality)
Affected pages
https://github.com/sensu/sensu-docs/blob/main/static/stylesheets/scss/_nav.scss https://github.com/sensu/sensu-docs/blob/main/layouts/partials/nav.html
Changes needed
May be able to use a slightly darker shade for the active menu items. Unsure if a darker shade will work for the larger boxes/buttons on the landing page.
So far, darker shades of green that meet the WebAIM contrast standards are noticeably darker, don't quite fit into the docs color scheme, and aren't distinct enough from the dark blue used in our menus.
I also tried the purple color that I used for the older/pre-release banner (#7a4595) but it also has the "not distinct enough" problem -- it blends in with the dark blue used in our menus.