search

vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
473 stars 83 forks source link

[lumo] Deprecate tertiary text color #1612

Open jouni opened 4 years ago

jouni commented 4 years ago

The current tertiary text color has a contrast of 2.92 :1 on the base color (white), which does not meet any accessibility requirements. The usefulness of this color property is questionable.

The only place I remember it being used at the moment is in date picker, for the week day names and week numbers. That’s a poor design decision on my part.

I propose that we deprecate the tertiary text color, and remove it in the next major version of Lumo.

Technically, we could map the property by default to the secondary text color, to improve accessibility. Not sure if there’s a way to give any deprecation warning about this, if some custom CSS is using it?

web-padawan commented 4 years ago

Added this to the list of breaking changes. I don't think there is a way to give a warning without using a tool like Stylelint.

jouni commented 4 years ago

Well, we can at least mark it deprecated in the documentation and in code, to discourage its use.

jouni commented 3 years ago

Once date picker styles are fixed (#2727), this color property is only used for icons: Grid sort icon, Context Menu and Menu Bar sub-menu indicators, and Tabs scroll button icons.

I suggest we still deprecate the text color, in add another property that reflects the purpose better, that this property is mainly used for graphical elements and is guaranteed to have 3:1 contrast ratio with the default background colors.

jouni commented 3 years ago

We might want to consider #2738 together with this issue. The tertiary color currently has 3:1 contrast, and might be suitable for disabled text instead.

jouni commented 3 years ago

I added information to the documentation about the contrast ratios of these (https://github.com/vaadin/docs/commit/ff6d470a9e11a868017acd3fa4b0c08111f5a605#diff-25e5c1a20a8445e4e396bac79f0e31519cbd4f49707245793c382979e6fe8c0d), and discouraged the use of this property for text elements.