sensu-docs icon indicating copy to clipboard operation
sensu-docs copied to clipboard

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

Open hillaryfraley opened this issue 2 years ago • 1 comments

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.

hillaryfraley avatar Nov 08 '22 21:11 hillaryfraley

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.

hillaryfraley avatar Nov 11 '22 20:11 hillaryfraley