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

enh(NcActions): Readability #4049

Merged
merged 1 commit into from
May 9, 2023
Merged

enh(NcActions): Readability #4049

merged 1 commit into from
May 9, 2023

Conversation

Pytal
Copy link
Contributor

@Pytal Pytal commented May 6, 2023

Before After
image image
image image
image image
image image
image image
image image
image image
image image

Contrast

--color-background-hover is #f5f5f5

#222222 on #ffffff is 15.9:1
#222222 on #f5f5f5 is 14.59:1

#949494 on #ffffff is 3.03:1
#006aa3 on #f5f5f5 is 5.36:1

@Pytal Pytal added 3. to review Waiting for reviews accessibility Making sure we design for the widest range of people possible, including those who have disabilities labels May 6, 2023
@Pytal Pytal added this to the 7.11.3 milestone May 6, 2023
@Pytal Pytal self-assigned this May 6, 2023
Copy link
Contributor

@JuliaKirschenheuter JuliaKirschenheuter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maxcontrast is for borders ok.

Could you please check if background color for actions items is enough with this tool (or some similar tool): https://chrome.google.com/webstore/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf ? I guess we have to put there higher contrast ratio.

@nickvergessen nickvergessen modified the milestones: 7.11.3, 8.0.0 May 8, 2023
@nickvergessen
Copy link
Contributor

I set the milestone to 8 since this goes against master.
If backporting is needed please use the backport bot

Copy link
Contributor

@jancborchardt jancborchardt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good for the text.
But for the input borders, didn't we introduce a specific lighter color than color-text-maxcontrast there since graphical elements don't need the same contrast amount as text? It is very dark now.

@nimishavijay
Copy link

nimishavijay commented May 8, 2023

But for the input borders, didn't we introduce a specific lighter color than color-text-maxcontrast there since graphical elements don't need the same contrast amount as text? It is very dark now.

@jancborchardt We did, and the minimum color that meets the requirements is also quite dark #949494. What we could do is reduce the thickness of the border to 1px (if that is still within the guidelines)

That would result in a lighter looking border

image

@raimund-schluessler raimund-schluessler added feature: datepicker Related to the date/time picker component feature: actions Related to the actions components feature: select Related to the NcSelect* components feature: input-field Covering the InputField, TextField, ... labels May 9, 2023
@nimishavijay
Copy link

@jancborchardt what do you think about reducing the border thickness to 1px? screenshots in original comment show how it would look :)

@jancborchardt
Copy link
Contributor

Regarding 2px to 1px border, I'd say no, several reasons:

  • 2px fits nicer with out overall rounded and spaced design
  • Lots of other elements have 2px, like the template selector boxes e.g., and they would look off with 1px too
  • Contrast and visibility is better with 2px, so better for accessibility. Also at 2px it needs less darkness than 1px.
  • 1px is for borders with less importance, like separators.

(Apart from that, we can't switch it so close before release anyhow.)

Signed-off-by: Christopher Ng <[email protected]>
@Pytal Pytal added 4. to release Ready to be released and/or waiting for tests to finish and removed 3. to review Waiting for reviews labels May 9, 2023
@Pytal Pytal merged commit a822e2b into master May 9, 2023
@Pytal Pytal deleted the enh/a11y-actions branch May 9, 2023 23:57
@Pytal
Copy link
Contributor Author

Pytal commented May 9, 2023

/backport to stable7

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4. to release Ready to be released and/or waiting for tests to finish accessibility Making sure we design for the widest range of people possible, including those who have disabilities feature: actions Related to the actions components feature: datepicker Related to the date/time picker component feature: input-field Covering the InputField, TextField, ... feature: select Related to the NcSelect* components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants