Improve readability

[sciurius]

The calendar, especially in month view, displays an awful lot of information. Therefore it is crucial that the information can be read clearly.

Currently, I can only tune the colours for the events. Depending on the colour, the event text is shown in black or white. This decision is not always optimal, personally I would like some blacks to be white and vice versa. This may, however, be related to the choice of the font used to display the event texts. I seem to have no control over that either.

So to be able to improve the readability, I would like to propose a way to select the fonts used, and a checkbox to toggle black/white rendering.

[georgehrke]

@jancborchardt

[AlexandreBonneau]

White or black text color depends on the background color, and that can be automated.
However it's a pretty complex problem. Fortunately, others have done extensive research on this, take a look.

Hence, a single black/white toggle for text color makes no sense.
If you would really want to give total control to the users, then you should do like some other calendars do allowing for each categories to select the background color and text color manually.

Such color choice could be used indifferently for events and tasks.

[sciurius]

It is interesting that this can be calculated, but this ignores monitor characteristics and people with vision constraints.
If in a particular situation for a specific user a black text is more readable than white text then it would be nice if it were configurable.
Note that I intended the checkbox for black/white on the per calendar colours, not all.

you should do like some other calendars ...

Please name some (even one!) that can match NC calendar.

[georgehrke]

White or black text color depends on the background color, and that can be automated.

Such code is already in place: https://github.com/nextcloud/calendar/blob/master/src/utils/color.js#L37
It's based on the official W3C recommendation: https://www.w3.org/TR/AERT/#color-contrast

[AlexandreBonneau]

@sciurius

you should do like some other calendars ...

Please name some (even one!) that can match NC calendar.

Korganizer allows to select any color you want for each categories (and calendars too, letting the user to choose how to display those in different views):

Korganizer does not allow the user to choose the text color, but that's has never been a problem (or needed) since it automatically calculates the best contrast using a similar feature mentioned above:

[sciurius]

Korganizer does not allow the user to choose the text color,

Okay, so it may match NC calendar, but it has the same problem this thread is about... Not yet a solution.

[AlexandreBonneau]

Well, the problem is in my opinion moot, since as @georgehrke mentioned, NC already implement the w3c recommendation that: "Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen", as other calendars do.

[sciurius]

It is great that NC implements the w3c recommendation, but it is also interesting that a real 'someone having color deficits' has nothing to say about it.
I'm no longer asking NC to implement different algorithms, just tell me how I, personally, can change the text color,

[georgehrke]

@sciurius I'm still very much open for experimenting with different font-weights and font-sizes to improve the readability of the text in the calendar-grid.

My comment, that we use something like that already was a response to @AlexandreBonneau, who suggested we should implement something like that.

If you want a hotfix, you can use the Custom CSS app to override the current styles.

[georgehrke]

For reference:

• The standard content font-size of Nc 19 is 14px
• The calendar-grid is still using the old 12px

[sciurius]

Thanks! This is exactly what I needed to know.
I'm now playing with font size, weight and colors to find the right combination for my eyes.
Thanks again!

[jancborchardt]

Closing as per comments above. :) We could look into using less intense colors by default, as these make any text on them quite harsh to read. A bit more muted would be nice. cc @nextcloud/designers regarding palette, also Material could be worth a look (the relevant shades we have to decide on).

[stefan-niedermann]

Maybe adjusting the color palette to the one which is used for Deck boards?