UI: Extremely poor contrast
Opened this issue · 4 comments
The current color palette (e.g. the white text on bright pink gradient background) exhibits an extremely low score of color contrast
See a tester: https://coolors.co/contrast-checker/fffefe-ff8aa1
We should try to make the website more accessible and readable by choosing more sensible color combinations.. see: https://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines
Other examples of combinations with very poor contrast (score ~2/10):
Are there any CSS media queries indicating the client wants high contrast? The last time I checked there was only a Edge-only one which we of course don't want to use. Otherwise that'd be ideal, because:
- The footer text is meant to be inconspicuous so I'd say the "poor" contrast is intentional...
- For the second one, using black text there looks worse IMHO
A11y is important, but should it make the UI look worse (or make "clutter" more visible) for others by doing so? I'd say not if it can be avoided!
Oh, there's actually this one: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast
Maybe we could switch to higher contrast colors using that query...
Are there any CSS media queries indicating the client wants high contrast? The last time I checked there was only a Edge-only one which we of course don't want to use. Otherwise that'd be ideal, because:
* The footer text is meant to be inconspicuous so I'd say the "poor" contrast is intentional... * For the second one, using black text there looks worse IMHOA11y is important, but should it make the UI look worse (or make "clutter" more visible) for others by doing so? I'd say not if it can be avoided!
@ThiefMaster Sorry for my super delayed replies... The idea here is not to provide an "high contrast" mode (which can be useful and I agree too, as separate issue), but at least to reach acceptable values of contrast in the standard theme.
The W3C’s Web Accessibility Initiative provides a standard, which in the last version WCAG 2.1 has 4.5:1 as contrast in the "Success Criterion 1.4.3 Contrast".
Just for reference, for an actual "High Contrast" accessibility (which could be a theme triggered with the query you mentioned) the values are 7:1 for normal text and 4.5:1 for large one.
Newdle is currently getting less than 2.13:1 in various UI elements, including the footer and the header text (Login):
and less than 2.06:1 in the flashy-bright pink text over white (or the inverse). For large text the required ratio is 3:1.
I'm happy to try and iterate on some theme changes (while trying to keep the current "accents"), what are your opinions here?
I'm happy to try and iterate on some theme changes (while trying to keep the current "accents"), what are your opinions here?
Sure, that sounds good!