Text contrast is too low

[CrendKing]

Description

I know everybody has different taste, but I found currently the app's text contrast is too low, and I can't read the text clearly. There was an issue #72 talking about flurry, but my problem is contrast.

From my perspective, the issue comes from two factors: font weight and color. To make sure it is not my monitor's problem, I checked the code. It looks like the main window uses lighter weight (https://github.com/bastimeyer/livestreamer-twitch-gui/search?q=font-weight&type=Code). Also, the font color looks like gray, not black.

I hope you can consider fixing this by either adjusting the font weight or color or both.Or, if you consider that too intrusive and backward incompatible, add an option to adjust them by user?

The same problem applies to the dark theme but slightly better. But when possible, I always prefer dark text on light background, which is less stressful to eyes (reference: http://uxmovement.com/content/when-to-use-white-text-on-a-dark-background/).

Thank you!

Environment details (operating system, etc.)

Windows 10

Comments, logs, screenshots, etc.

[bastimeyer]

font weight

What you are talking about has nothing to do with the font-weight. Only the main menu and headlines have a lighter font-weight applied, but those are perfectly legible due to the increased font-size.

color

See the color definitions of the default theme:

The background is rgb(252, 252, 252) and the default text is rgba(0,0,0,.45), which results in rgb(138,138,138) on the default background. This is obviously not black and the contrast is not the greatest, but it should still be very well legible. I think your main complaint is the smaller text on the settings menu, which has 45% * (100% - 33%) = 30.15% opacity.

I could increase the contrast a bit by setting the opacity of the default text color from 45% to 55% and by adjusting the other vars accordingly. I don't see any issues with the dark theme, though.

Compare your screenshot with mine (using Antergos (Linux) with slight font hinting and rgba antialiasing):

As you can see the text is quite a bit darker than on your Windows 10 machine. That's a bit unexpected to be honest and I didn't notice that in my VM. I'll see what I can do about this tomorrow.

[CrendKing]

I'm fine if the behavior on Windows is the same as on your Linux. Thanks!

[bastimeyer]

The issue is the horrendous text rendering engine of Windows (in Chromium).
Both builds share the same stylesheets, but I guess I will have to add platform dependent fixes now. This is a shame and should not be happening... 😩

[CrendKing]

Yeah. For example, -webkit-font-smoothing is probably the most important related style. Unfortunately, I think it is only implemented in Linux and Mac, not Windows. This one CSS style prevents me from using Atom on Windows.

[bastimeyer]

The ugly font rendering on Windows is caused by semi-transparent text colors. Chromium doesn't seem to like this at all. I thought their DirectWrite implementation had fixed those issues a couple of years ago. Even the latest NW.js version which includes the latest Chromium version has this issue.

Semi-transparent text colors were introduced by the implementation of themes roughly a year ago in d6527b1.

That means that I will have to rewrite all the stylesheets, so that only non-transparent font colors are being used instead. This is quite troublesome and I hope it won't be too much work.

Actually, my plan was implementing a more dynamic theming system with css variables that can be changed on runtime by the user (enabled by #275). I'm not entirely sure, but I think it would be wiser to wait for this first.