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

Optionally include higher contrast colour scheme #2300

Closed
juliusv opened this issue Sep 19, 2016 · 16 comments
Closed

Optionally include higher contrast colour scheme #2300

juliusv opened this issue Sep 19, 2016 · 16 comments
Labels

Comments

@juliusv
Copy link

juliusv commented Sep 19, 2016

I could include a screenshot here, but I guess you all know what Vector / Riot looks like :) Comparing it to Slack, the color contrast is pretty low and is straining my eyes a bit. That goes mainly for the UI bits, but even the main chat message text is #454545, whereas Slack's is #2c2d30. The left sidebar is worse though, with its grey text on light green background. Any chance we could get more contrast as a default?

@nshopik
Copy link

nshopik commented Sep 21, 2016

I've noticed that text kinda thinner, which make harder to keep focus on main chat as other elements seems same size and low contrast.

Left panel is suppose to be visible separation but it feels like its part of chat. Same goes for usernames making them grey text make it worse, should be same color but bold, like in slack and many irc apps, especially when we don't have avatar generation(random image if nothing set) you can easily lost track in busy room.

Also not sure why time is hidden by default for all messages but last one, making user unnecessary move mouse just to see time of message.

These small things make it overall low contrast and harder to keep focus on main content as your eyes keep cling for some UI elements instead chat. I know some stuff is personal preference but I've tried to be constructive about it.

@juliusv
Copy link
Author

juliusv commented Sep 22, 2016

As an example, I changed the main chat colors, font weight of names, and whitespace between messages a bit locally via the Chrome inspector and it is already sooo much more readable:

contrast

@ara4n ara4n added T-Defect P1 S-Tolerable Low/no impact on users labels Oct 10, 2016
@ara4n ara4n changed the title Color contrast is pretty low across the board Optionally include higher contrast colour scheme Oct 10, 2016
@richvdh
Copy link
Member

richvdh commented Oct 12, 2016

Related to #1635

@taw00
Copy link

taw00 commented Jan 3, 2017

Related to #2460 and #2865

@subiol
Copy link

subiol commented Jan 3, 2017

+1 the font is very light and makes the app hard to use

@ishitatsuyuki
Copy link

I would happy to see more darkened default colors for the meanwhile.

@ara4n
Copy link
Member

ara4n commented Mar 4, 2017

PRs for contrasty themes would be enormously appreciated. https://github.com/vector-im/riot-web/blob/master/docs/theming.md is the doc of how to add themes.

@yiskah
Copy link

yiskah commented Mar 10, 2017

I hunted down this github just to cosign that the contrast ratios are way too low and it's super inaccessible. was unable to keep using for more than an hour due to eye strain. especially in dark mode i couldn't even see the unlocked icon. https://imgur.com/a/y9mmp

use this contrast checking tool: http://webaim.org/resources/contrastchecker/

you want a 4.5:1 ratio

@ghost
Copy link

ghost commented Mar 10, 2017

plus one to yiskah, i also cant really tell when a room has new messages due to the contrast issue

@ghost
Copy link

ghost commented Mar 10, 2017

i'm not a huge css coder but i'll see if i can do anything about it myself, later tonight or tomorrow

@tessgadwa
Copy link

tessgadwa commented Mar 11, 2017 via email

@ara4n
Copy link
Member

ara4n commented Mar 11, 2017 via email

@tessgadwa
Copy link

tessgadwa commented Mar 16, 2017 via email

@tessgadwa tessgadwa mentioned this issue Mar 16, 2017
71 tasks
@tessgadwa
Copy link

Just resubmitted PR for light high contrast theme, incorporating feedback from graphic designer Alan Day. On to dark high contrast theme next.

@andybalaam
Copy link
Contributor

Related: matrix-org/matrix-react-sdk#7036

@uhoreg
Copy link
Member

uhoreg commented Oct 27, 2021

This can probably be closed now that we have matrix-org/matrix-react-sdk#7036

@uhoreg uhoreg closed this as completed Oct 27, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests