Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Accessibility] Improve contrast in elements with #65b34e background #4121

Open
1 of 2 tasks
hillaryfraley opened this issue Nov 8, 2022 · 1 comment
Open
1 of 2 tasks

Comments

@hillaryfraley
Copy link
Contributor

hillaryfraley commented Nov 8, 2022

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)
  • 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.

@hillaryfraley
Copy link
Contributor Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant