Contrast fails for Vertical/Horizontal orientation switch arrow

qanitah commented 3 years ago

URL: All - eg. https://hcdev.openplus.ca/en/ & https://hcdev.openplus.ca/en/alert-recall/test-craig User Agent: Chrome (as it's not available in Firefox and Edge) Language: Both

Issue Description: The colour contrast for arrow for switching between vertical and horizontal orientation fails. Currently its 1.7:1.

Steps to reproduce: View the page in Chrome.

Expected results: The minimum contrast should be 3:1. The focused or hovered contrast is fine.

echouin commented 2 years ago

From OP: This now passes contrast

hydegeoff commented 2 years ago

Not fixed. The icon is still showing a poor colour contrast when the page is first loaded as shown below, but if you trigger or hover the icon, it goes dark. Colours I have identified as rgb(190, 190, 190) bkgd colour of rgb(245, 245, 245) which has a contrast of 1.7:1 when it should be greater than 3:1. Note: the dark grey colour that appears after being activated has a contrast ratio greater than 3:1

Steps to reproduce:

Login to RSAMS
When on the dashboard, select your name at the top of the page
Problem: This arrow icon at the top right corner is very faint and it is hard to see for users with poor vision.

Note: Only after activating the icon (at least once), it remains in the dark colour contrast

Expected Result: The icon for the Vertical/Horizontal menu orientation should be dark grey colour at all times.

echouin commented 2 years ago

@hydegeoff from OP: I still can't duplicate this. In a nutshell, this icon is 16px X 16px the foreground icon color is #787878 the background color is #f5f5 f5

if you check the contrast here https://webaim.org/resources/contrastchecker/ you will see that this passes wcag 2.1 AA for Graphic elements. This icon comes from Drupal core, while a higher contrast ration would be nice, I can't report back an issue to core that is not an issue. Your team is seeing something different that what I'm seeing. At this point, we need to figure out why. In the screenshot you show, tie icon is #BFBFBF. I don't know where that comes from. Try the following: Have A11y team log out, clear caches, then look again. If they still have the problem, let me know what browser they are using. It would also help to send me the svg and css they are seeing. Below is the code taken from what's being generated on prod The Icon (svg image, fill colour is #787878)

The background (css) (background is #f5f5f5) .toolbar .toolbar-toggle-orientation {

height: 100%;

padding: 0;

background-color: #f5f5f5;

}

mmiron-HC commented 2 years ago

@echouin when the icon is at default (no hover) it shows the following SVG - https://rsams.dev.cloud.openplus.ca/core/misc/icons/bebebe/push-left.svg the SVG fill colour is bebebe which fails against the background

The fill787878 is when the button is hovered.

echouin commented 2 years ago

From OP: Reported to Drupal core toolbar, with a proposed solution here. https://www.drupal.org/project/drupal/issues/3273806

hydegeoff commented 1 year ago

@echouin,

It looks like Drupal has made a fix. Can you please confirm the fix has being applied to RSAMS in Dev environment?

echouin commented 1 year ago

@hydegeoff OP has confirmed that they do keep Drupal up-to-date. Please verify on Prod.

hydegeoff commented 1 year ago

This issue is not fixed in most places. The issue still appears as shown in my comments shown above on March 28, 2022. However, I have noted that the menu icon has been addressed in some places it is fixed. For example, clicking Home and dashboard pages. icon appears in darker state that meets 3:1 contrast ratio.

mmiron-HC / WST-RSAMS

Contrast fails for Vertical/Horizontal orientation switch arrow #17