search

carbon-design-system / carbon-for-ibm-dotcom

Carbon for IBM.com is based on the Carbon Design System for IBM
https://www.ibm.com/standards/carbon/
Apache License 2.0
268 stars 156 forks source link

[a11y]: color contrast is less than the WCAG AA minimum requirements #8007

Closed ariellalgilmore closed 1 year ago

ariellalgilmore commented 2 years ago

Description

When running yarn test:a11y multiple stories are recieving an example of the following contrast error:

Screen Shot 2022-01-12 at 11 55 13 AM

Example output of all accessibility errors: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/runs/4779749308?check_suite_focus=true#step:7:2065

Component(s) impacted

Browser

No response

Carbon for IBM.com version

Canary

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

Carbon for IBM.com web components

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://github.com/carbon-design-system/carbon-for-ibm-dotcom/runs/4779749308?check_suite_focus=true#step:7:2065

Steps to reproduce the issue (if applicable)

View the actions tab and look under Run a11y compliance tests for web components

To run locally go to packages/web-components and yarn test:a11y

Release date (if applicable)

No response

Code of Conduct

proeung commented 2 years ago

@oliviaflory @RichKummer Any guidance on how we should tackle this color contrast issue for the components that @ariellalgilmore outlined above?

oliviaflory commented 2 years ago

@proeung I need to take a further look on this one, going to assign myself so I don't lost it for now!

proeung commented 2 years ago

@oliviaflory Sounds good! We'll hold off on working on this ticket until we have some guidance/direction from you.

oliviaflory commented 2 years ago

@ariellalgilmore @proeung

I did an audit on the Callout with media and Callout quote components, and I'm not quite sure why the accessibility checker is finding errors. According to the Color contrast ratio guidance on IDL, the tokens we are using all achieve a 4:5:1 contrast ratio.

Link to audit

Also copying below:

Callout quote

element color token color token hex value white theme background token background hex value white theme number of steps
source heading $inverse-01 white #ffffff $inverse-02 gray 80 #393939 8
source copy $inverse-01 white #ffffff $inverse-02 gray 80 #393939 8
link with icon $inverse-link Blue 40 #78a9ff $inverse-02 gray 80 #393939 4

Callout with media

element color token color token hex value white theme background token background hex value white theme number of steps
source heading $inverse-01 white #ffffff $inverse-02 gray 80 #393939 8
source copy $inverse-01 white #ffffff $inverse-02 gray 80 #393939 8
proeung commented 2 years ago

@oliviaflory Thanks for conducting an audit of the components with the color contract issue. Feels like the errors that we're seeing within the test:a11y test might be false positives, especially if the colors that we're using are within the IDL's 4:5:1 contrast guideline.

I think we can ignore these contrast errors from the karma accessibility checker or figure out some way to adjust the configurations or maybe reach out to IBM Accessibility? @ariellalgilmore @jeffchew Let me know what you both think.

ariellalgilmore commented 2 years ago

Thanks @oliviaflory and @proeung! Also, wondering if we should report an issue to the accessibility team then? I don't see anything in the docs about being able to hide issues

oliviaflory commented 2 years ago

Thanks @oliviaflory and @proeung! Also, wondering if we should report an issue to the accessibility team then? I don't see anything in the docs about being able to hide issues

I think checking in with or reporting an issue to the Accessibility team would be great! Feel free to tag me in the issue too so I can chime in if needed.

ariellalgilmore commented 2 years ago

Issue opened in the Equal Access Toolkit here: https://github.com/IBMa/equal-access/issues/687

andy-blum commented 1 year ago

The equal-access ticket was closed on August 1. I tried running yarn test:a11y on main, but it errored out for me. @ariellalgilmore can you re-test?

ariellalgilmore commented 1 year ago

@andy-blum confirming i don't see the color contrast error anymore