Border colors for for "do" and "dont" appear very similar to deuteranopic people

[ethanbustad]

Steps to reproduce

1. Install a browser extension or desktop tool that allows you to view a page or site as if you had color blindness
2. Configure the extension or desktop tool to let you view pages with a deuteranopia setting
3. Visit https://liferay.design/lexicon/core-components/actions-definition/
4. Observe that the "do" and "dont" lines look very similar in color (very little contrast)

Migrated from liferay/clay#2362.

[drakonux]

Hi @ethanbustad thanks for contact us!

Reviewing the issue... I've checked it with a chrome extension called "Colorblindly" using Deuteranomaly and Deuteranopia modes and I can't perceive the problem you comment.

Deuteranomaly

Deuteranopia

I found that using Achromatopsia mode, the bars appear very similar:

Achromatopsia

However, I have to say that we are not giving the information of "do" or "don't" using just color (we use also text). You can check the WCAG criteria: Use of Color) (e.g. A form that uses color and text to indicate required fields)

"1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. ( Level A)"

So I'm afraid I can't consider this as a valid issue 🙏

[ethanbustad]

Hi @drakonux ,

I just took a look with the FF extension "Let's get color blind", in Deuteranomaly mode, and I see this:

Maybe it's a matter of a severity setting?

As far as standards I don't disagree -- the existing presentation definitely doesn't violate WCAG criteria. But for a design language (or the docs for a design language), I feel like the goal should be maximal usability for as many people as possible rather than minimal adherence to standards.

Here's an internal Liferay discussion on this for more context: https://loop.liferay.com/home/-/loop/feed/19497103.