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

[BITV] Border color too intense now #35457

Closed
ChristophWurst opened this issue Nov 23, 2022 · 9 comments
Closed

[BITV] Border color too intense now #35457

ChristophWurst opened this issue Nov 23, 2022 · 9 comments

Comments

@ChristophWurst
Copy link
Member

ChristophWurst commented Nov 23, 2022

Steps to reproduce

  1. Run latest server master
  2. Run latest Calendar main

Expected behavior

The usual

Actual behaviour

Bildschirmfoto vom 2022-11-23 17-02-04

Additional info

This change was done with #35315. @Pytal do you know if the border contrast ratio should apply for the calendar grid as well? If not, we could have lower contrast value for the calendar grid. If the contrast should be the way it is now we can close the ticket.

@ChristophWurst ChristophWurst added bug design Design, UI, UX, etc. regression labels Nov 23, 2022
@Pytal
Copy link
Member

Pytal commented Nov 23, 2022

Not sure, should different border colors be used for the calendar grid @nimishavijay?

@nimishavijay
Copy link
Member

I would say the old more subtle border color works, since in most cases there are events for a day and even if not it is indicated by the date number anyway. cc @jancborchardt on this when he gets back

@PVince81 PVince81 changed the title Grid border color [BITV] Grid border color Nov 24, 2022
@Pytal
Copy link
Member

Pytal commented Nov 25, 2022

  • Clarify with accessibility reviewer

@obrb
Copy link

obrb commented Nov 27, 2022

I honestly doubt that the Border Contrast Ratio, mentioned in #35315, also refers to calendar grids and line separators, at least the document linked in #35315 does not explicitly mention them. Either way, I think it's ugly ;-) and unnecessary for content separators, especially since there already is a separate High Contrast Theme in Nextcloud, See also my post in the forums: https://help.nextcloud.com/t/rcs-of-25-0-2-24-0-8-23-0-12/150660/2?u=bb77

@jancborchardt jancborchardt changed the title [BITV] Grid border color [BITV] Border color too intense now Nov 28, 2022
@jancborchardt jancborchardt transferred this issue from nextcloud/calendar Nov 28, 2022
@jancborchardt
Copy link
Member

Transferred to server.

@Pytal @nimishavijay @ChristophWurst the contrast is good for the input fields – but indeed for regular borders like divider lines it is much too present, like in Calendar or like below screenshot from Talk.

It would be best if we would use a separate variable like --color-border-input for this new value, and keep --color-border at the old one. cc @nimishavijay as discussed, and @AndyScherzinger @PVince81 @skjnldsv FYI

image

@Pytal
Copy link
Member

Pytal commented Nov 29, 2022

@michaelnissenbaum for input borders we plan on meeting the WCAG AA minimum 3:1 contrast ratio as specified under "Graphical Objects and User Interface Components" from https://webaim.org/resources/contrastchecker/

Input borders

image

Do the other borders shown below also need to meet this minimum contrast ratio requirement?

Calendar

image

Talk

image

@michaelnissenbaum
Copy link

Regarding calendar I'd say that the calendar lines (grid) is fine. The colours could be improved but it's not mandatory. More import is that the text within the calendar (table) meets the contrast requirements. Additionally as I can see you can have multiple calendars wich are presented in different colours within grid. Keep in mind that some user will not be able to recognise these colours and will need alternative way - e.g. text.
Regarding Talk all elements in footer (incl. border of the input field) need to meet contrast requirements - 3:1.
CleanShot 2022-12-01 at 08 32 07@2x

@Pytal
Copy link
Member

Pytal commented Dec 2, 2022

Thanks @michaelnissenbaum!

We will add a separate CSS variable color for elements that need to meet the minimum 3:1 contrast requirement while keeping the existing colors used in e.g. the calendar grid and Talk sidebar border

@Pytal
Copy link
Member

Pytal commented Dec 6, 2022

Fixed in #35563

@Pytal Pytal closed this as completed Dec 6, 2022
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

7 participants