carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.74k stars 1.79k forks source link

Styling issues in high contrast mode #7158

Closed mdenby closed 3 years ago

mdenby commented 3 years ago

In Cloud Pak for Applications, we used vanilla carbon code. Recently, we have had this issue:

Checkpoint 1.4.3 Contrast Content must provide enough contrast between text and its background to enable users with moderately low vision to read the text without contrast-enhancing technology. (Users requiring more contrast will often use an assistive technology or platform feature such as Windows High Contrast mode.)

Any help about we fix this would be appreciated!

-->

Environment

Operating system: Windows, OS

Browser: Chrome, though maybe others

Assistive technology used to verify: Chrome High Contrast extension and Windows High Contrast

Detailed description

What version of the Carbon Design System are you using? Vanilla Carbon 10

What WCAG 2.1 checkpoint does the issue violate? Checkpoint 1.4.3 Contrast

Additional information

https://github.ibm.com/IBMCloudPak4Apps/icpa-g11n/issues/46

Screen Shot 2020-10-28 at 3 46 28 PM Screen Shot 2020-10-28 at 3 46 23 PM Screen Shot 2020-10-28 at 3 46 18 PM Screen Shot 2020-10-28 at 3 46 12 PM Screen Shot 2020-10-28 at 3 46 08 PM Screen Shot 2020-10-28 at 3 46 02 PM

tw15egan commented 3 years ago

Hey @mdenby can you break this down to which Carbon components are not working properly in High Contrast mode? i.e I'm not sure which component is not working the example under "Instances expand icon" and "focus is not visible in the pic flash"

Also, what do you mean by "code block style is missing"? I believe by default Windows HCM will remove any backgrounds and rely on outlines to differentiate between blocks.

I know we've fixed the Modal issue, as well as any expandable Tile, so hopefully updating to the latest version will resolve most of these issues. Here's the relevant PR https://github.com/carbon-design-system/carbon/pull/6892 and epic tracking these issues: https://github.com/carbon-design-system/carbon/issues/6869