Disabled checkboxes don't look disabled

[elioqoshi]

On Dark theme, disabled Checkboxes don't look really disabled, especially on dark theme:

I'd propose to revisit their styling to make this more evident

[elioqoshi]

Here is a first proposal.

Before	After

After some benchmarking it's clear that most design systems don't change the filling of checkboxes when they are disabled. User expectations are different from that. I tested against a few examples from https://component.gallery/components/checkbox/

Having said that, I used the same color styling we use for checkboxes on Vanilla in light theme with 30% opacity when disabled. 707070 https://vanillaframework.io/docs/base/forms

Similar in dark theme with D9D9D9

I do think the results create better recognition and understanding of the state of checkboxes.

Ideally we should land this in yaru.dart as I think this is beneficial to the wider range of applications. More testing in Yaru upstream would be advisable though. @Jupi007 what do you think about this?

[Jupi007]

Hi @elioqoshi, togglables widgets are our owns and so they ship their own theming in yaru_widgets.dart, and it is there we should change their look 🙂

I agree that the disabled look in the dark theme could be improved a little bit. But I think your proposal enabled border is way too strong. It stand out too much from the visual overall. Btw, on the same screenshot, the disabled select at the left bottom use approximatively the same look as our current disabled checkbox.

[elioqoshi]

@Jupi007 Sorry I missed to reply to this as we had a lot of issues tracked.

I do understand what you mean. I think we can lighten the borders up a bit.

The problem with this is Accessibility mostly. As you might know, the lightest gray on white which fulfills 4.5:1 accessibility requirements (WCAG AA) is #767676

In my example it uses #707070

So my example has a slightly darker tone.

However in this case, we might not require to fulfill 4.5:1 accessibility requirements as this is not text. We just need 3:1 contrast. The W3C clause explains that quite well:

https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

So what is the lightest color we can have with 3:1 contrast? #959595 Ideally we would go a bit darker to offer some room in case the background is not pure white.

So that leaves us with options between #959595 and #767676

It's not a greatly flexible gradient:

But #959595 would be technically still okay.

Can we replace the current color with something #959595 or darker?

I know that it looks stylistically more odd, however we might want to prioritize usability and accessibility and ensure people are able to interact as intended with these elements. What do you think?

[Jupi007]

@elioqoshi No problem :)

I think #959595 is a good compromise, maybe still a little bit too prominent compared with all our other components, but as you said the priority is always the usability. Note that the checkbox background is white on the light theme regardless of the context. We use surface colour which is white in yaru.dart. I suppose it would be enough to justify the usage of the lightest color possible?

It would look like this:

And what do you propose for the dark theme?

Also, offtopic but what is this tool you're using to check colours contrast?

[elioqoshi]

Note that the checkbox background is white on the light theme regardless of the context. We use surface colour which is white in yaru.dart. I suppose it would be enough to justify the usage of the lightest color possible?

WCAG color contrast is applicable to surrounding elements, so it is technically applicable to the exterior of the checkbox as well. I'd be okay to compromise that however and go with #959595

And what do you propose for the dark theme?

On Dark background (#2B2B2B ) the darkest color accessible would be: #757575

That would look like this:

I know it looks a bit off considering all surrounding elements, but I'd recommend that we keep at least these minimum requirements.

If you want to dive deeper into the topic, visual accessibility and WCAG in UI is a great start to get into these topics.

Also, offtopic but what is this tool you're using to check colours contrast?

I use Color Contrast plugin in Figma but there is a bunch of them everywhere. The most popular website is this but it's a simple calculator:

https://webaim.org/resources/contrastchecker/

For what's worth, using the WCAG calculator for Yaru widgets would be helpful to identify these ratios

[Jupi007]

On Dark background (#2B2B2B ) the darkest color accessible would be: #757575

Imo it is fine :+1: Let's try it in yaru_widgets, can you open an issue at?

I know it looks a bit off considering all surrounding elements, but I'd recommend that we keep at least these minimum requirements.

It is totally not off to take in account as much various situations as possible. We aim to provide a good widget toolkit, and accessibility is very important!

For what's worth, using the WCAG calculator for Yaru widgets would be helpful to identify these ratios

Thanks, indeed I had in mind that we should do a global accessibility check of all our widgets. Btw, if you want to take a look, we bundled the example app as a snap: https://snapcraft.io/yaru-widgets-example

[elioqoshi]

Btw, if you want to take a look, we bundled the example app as a snap: https://snapcraft.io/yaru-widgets-example

Yeah I will do have proper testing after the UI freeze for 23.04 as we are in a bit of an intense stage right now improving and fixing a lot of things (mostly non Yaru impacted).

Thanks, indeed I had in mind that we should do a global accessibility check of all our widgets.

It's not an easy task but yeah, at least color-wise we need better tools for improving our color palette, hence I suggested refactoring the color system :)

[elioqoshi]

Let's try it in yaru_widgets, can you open an issue at?

Just did! https://github.com/ubuntu/yaru_widgets.dart/issues/665

[Jupi007]

Thanks, I transferred it because it is 100% related to yaru_widgets :)

[elioqoshi]

Oh sorry, I missed that!

[jpnurmi]

Fixed by:

• https://github.com/ubuntu/yaru_widgets.dart/pull/667