Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change incompatible template button color #4766

Open
jarekdanielak opened this issue Dec 17, 2024 · 7 comments
Open

Change incompatible template button color #4766

jarekdanielak opened this issue Dec 17, 2024 · 7 comments

Comments

@jarekdanielak
Copy link
Contributor

jarekdanielak commented Dec 17, 2024

What should we do?

The orange button for an incompatible template in properties panel is not meeting the accessibility criteria.

image

Why should we do it?

Change it to a different color, fully accessible (and good looking!).

Extra

Suggestions from this comment could be added along with this.

@jarekdanielak jarekdanielak added element templates good first issue Good for newcomers a11y spring cleaning Could be cleaned up one day labels Dec 17, 2024
@jarekdanielak
Copy link
Contributor Author

@lmbateman can you provide more context?

@lmbateman
Copy link

To be clear, the WCAG contrast success criteria are AA-level, and the Modeler is only required to meet A-level success criteria, so technically, the button meets our contractual requirements. Having said that, fixing it is the right thing to do.

Background: We chose these button colors because:

  • The team felt strongly that the button should convey a warning, rather than an error, so we didn't want to use red.
  • Other buttons in this family have white text, and we didn't want to change just this button.
  • Orange is tricky for accessibility purposes, and the darker oranges tend to read as brown.
  • This orange already existed in the Desktop Modeler colorscape, so would harmonize with existing colors. No accessible orange exists.

Going forward, we have a couple of options:

  • Find an orange that works.
  • Change the text to black or dark gray for just this button (not sure how easy this would be to maintain).

@barmac
Copy link
Collaborator

barmac commented Dec 17, 2024

fixing it is the right thing to do.

I agree completely. We want the tools to be accessible for the benefit of our users, and the low bar of target WCAG level is not a reason to keep insufficient contrast.

Regarding the font color change, I think it works fine in GH labels, so should work for us too.

image

@barmac
Copy link
Collaborator

barmac commented Dec 17, 2024

BTW we may not need to do the CSS magic that GitHub employed though it's tempting ;)
image

@lmbateman
Copy link

Regarding the font color change, I think it works fine in GH labels, so should work for us too.

Plus, users are unlikely to see two of our buttons next to each other, and unlikely to notice/remember the font color from one to the next (and also unlikely to care, I think :) ). My main concern is with ease of implementation, but if that's not an issue, then let's consider changing the font color instead of the button color.

@BDFL669
Copy link

BDFL669 commented Dec 17, 2024

I'd be happy to help with this task as part of my open source contribution

@jarekdanielak
Copy link
Contributor Author

@BDFL669 thanks for showing interest in contributing! We haven't agreed on exact colors yet, so we can't jump to implementation right away, but please feel free to submit your proposals for the UI here. 😊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants