Insufficient contrast between background and UI elements in dark mode

[danny-andrews]

Describe the bug

The default border color between UI elements (buttons, inputs, cards, etc.) and their background has very poor contrast, and doesn't meet the WCAG requirements for non-text contrast.

Right now, the default border for such elements is --sl-color-neutral-300 = #43434A, and the default background is --sl-color-neutral-0 = #1A1A1E. This amounts to a very low contrast ratio of 1.76:1 using WCAG and Lc -8.3 using APAC:

This doesn't look too bad in isolation, but on a big screen with lots of elements, I find it very difficult to distinguish the boundaries of various elements.

Bumping the border color up to --sl-color-neutral-400 = #56565F gives us a contrast ratio of 2.38:1 in WCAG and Lc -15.4 (just above the bare minimum of 15+) but is at least sufficient to distinguish elements from their background:

Additional information

From #708, I understand full AA contrast compliance may be pursued through a prefers-contrast option. However, I still think the default dark mode should at least have enough contrast to be widely usable out of the box.

Thanks for your thoughts and for the great component library!

[KonnorRogers]

Im going to defer to @lindsaym-fa (our designer) on this one!

[lindsaym-fa]

We are using higher contrast input borders in Web Awesome, and I think it's worth adjusting in Shoelace, too.

I'm on it. ✔️ Thanks, @danny-andrews and @KonnorRogers!

[b-d-m-p]

I've experienced this issue with my project and have been thinking about it for a while. I see that this issue only mentions the UI elements, but the helper text also fails.

I don't want to get off topic, so let me know if I should make another issue. I saw how the PR solves it, which is great (hi lindaym-fm 👋), but I think there is a greater issue here. The PR solves it at the component level (through the theme level) , but If you use the same color palette in your project, and you set a color on an element and it looks good in light mode but not dark mode, you either waffle between which color to use or you do some work around to make it use different colors for different modes, which can take a lot of work.

I noticed that if I design what I want in light mode, it will look hard to see in dark mode, so I have been designing in dark mode, to get that to have enough contrast, but the result is that the elements in light mode look a little less refined.

I have ideas about how to improve this, but it would ultimately mean adjustments to the color palettes, which is a big ask, I know. I'm just curious what you all think and let me know if I should open an issue for this (and the helper text issue). If you all don't think it is an issue, I will let it go. 🙇‍♂️

[lindsaym-fa]

Absolutely valid points, @b-d-m-p. It would be a simple change to bump up the default contrast for help text in dark mode, so I'll take point on that. Thanks for bringing it up!

Regarding the challenges getting colors right between light and dark mode with the current color palettes, I hear you. We've reimagined theming in Web Awesome (both Free and Pro) to make color accessibility easier. Some of that includes redesigning the primitive color palettes to have predictable contrast ratios and introducing a sort of "switch" layer of semantic color tokens that can easily change between (and be specifically tailored for) light and dark modes. The goal is to make component styling more intuitive and require fewer manual overrides. All of that is in alpha testing now.

Because reworking the theming API was a pretty significant breaking change, we have that ready for the transition from Shoelace 2.x to Web Awesome 3.0. It's a bummer that we can't bring those changes to you sooner, but I hope you can rest assured that we understand that pain point and are working to make that experience better.

[b-d-m-p]

@lindsaym-fa Thanks for the detailed explanation! That's great! I'm in no hurry. I just figured fixes here would get added to Web Awesome. That gives me more of a reason to check out the alpha. I'd love to see what approaches you used to accomplish those things. 😃