element-web icon indicating copy to clipboard operation
element-web copied to clipboard

Quoted content (> xxx) should be displayed in higher contrast

Open eras opened this issue 3 years ago • 1 comments

Your use case

What would you like to do?

When quoting context for a message with

> xxx

I would like the output to have higher contrast.

Why would you like to do it?

I think low contrast color was chosen due to replies repeating the existing content and thus this is considered to be less important; however context is important and sometimes the quoted content originates from other sources, such as documents. However, nowadays quoted replies are actually rendered in a higher contrast color. It's only the normally quoted content that has less contrast.

Example of low contrast in dark theme (same applies for light theme unless it's been changed at some point, which I doubt):

image

Use a brighter color (in dark theme, obviously the reverse in light theme); indeed it could be just as bright as normal text, there is already a quotation symbol on the left. Could be different color. Just not be as low contrast.

This could also be an accessibility concern.

Also: Slack uses high contrast :).

How would you like to achieve it?

Covered already.

This has been a long-time personal wee frustration with it, but perhaps if others feel the same way this could be fixed.

Have you considered any alternatives?

Modifying the CSS directly or enabling custom theming from the labs would solve this issue for me, but I feel this should be something "correct" right out of the box.

There could be a tunable for this in Settings/Appearance.

Additional context

No response

eras avatar Sep 17 '22 11:09 eras

Related: https://github.com/vector-im/element-web/issues/19522

SimonBrandner avatar Sep 18 '22 18:09 SimonBrandner

@rufuskahler This is being addressed internally in the design team as part of the work on the new color system, along with many other changes. Do we need to keep a separate issue for this one?

janogarcia avatar Jan 13 '23 07:01 janogarcia

Fixed by https://github.com/matrix-org/matrix-react-sdk/pull/11079

germain-gg avatar Jul 19 '23 08:07 germain-gg

Was this fix part of Element version 1.11.37? If so, I'm not seeing any discernable change there.

eras avatar Aug 02 '23 08:08 eras

The commit from the linked PR is definitely in the release

t3chguy avatar Aug 02 '23 08:08 t3chguy

@germain-gg

t3chguy avatar Aug 02 '23 08:08 t3chguy

@eras what did you expect? This now passes the WCAG AA contrast check and also uses a bigger font-size. This should have improved legibility.

Screenshot 2023-08-02 at 10 10 13

germain-gg avatar Aug 02 '23 09:08 germain-gg