Increasing text contrast

mercurius

Hello,

I don't know if I am that young yet, I have some difficulty reading the greyed text the Flarum desing uses. I don't think it is really necessary making difficult reading text for design sake..

Toby

Can you please be more specific? Which text are you referring to in particular? Screenshots would be helpful 🙂

mercurius

I mean this

Invisible text screenshot

Dominion

The low-contrast stuff, in other words. This is something I've also been wondering about. My eyes aren't quite that old yet, but I know my wife has some problems with low-contrast text like this.

Of course, admins can always adjust the CSS to suit their users' needs and preferences. But perhaps it would not be a bad idea to include an alternative "high contrast theme" as a default option? (Even if that doesn't happen, I'm sure that someone will eventually make such a thing available as a third-party option.)

Aesahaettr

I think it would be good to include a high contrast option, but I think for most users the low contrast stuff is great. It is attention to details like this that alow the user to focus on what is more important to them, and one way to do that is not have all the info on a page be the same contrast.

Dominion

I agree, I like how @Toby has used low contrast elements in the design (on esoTalk as well).

Makes the site very easy to look at.

Toby

It's actually pretty simple to change colors like this by entering custom LESS in the admin CP. Take a look at variables.less – you can override any of these like so:

@muted-color: #444;
@muted-more-color: #666;

This will be more well-documented in the future.

Franz

It is an accessibility problem, though...

Toby

We can try darkening the default muted color a bit, but not too much. Got to find that sweet spot 😛

Dominion

I think it's fine as is, for most people. What I had in mind is something more along the lines of making a higher-contrast theme available, and allowing users to select it if they prefer. But that could easily be done as an extension.

Franz

Dominion That may be fine for the forum, but we have the same problem on the homepage, too. 😉

Dominion

Ah, I hadn't thought about that.

The homepage looks really great, by the way!

Henry

One thought I had: it also could depend on the quality of the monitor for the user how rich some texts appear. For example, if I am looking at a commit on GitHub, my older LED monitor renders the green very faintly. Whereas, on my newer LED IPS monitor the green is very rich and easy to see. Now, when I look at commits on the older screen I feel like I can barely make out the green half the time. I wonder if something similar is happening for the user.

Here's a picture illustrating the different contrasts I see of Flarum on these two monitors.

http://imgur.com/QJcTKRH
http://imgur.com/BDRMngR (GitHub commit for reference)

Edit: lol, so I just noticed if I look at these on the LED monitor... I don't see a difference. -_-

Dominion

That's a good point. There may be a limit to the benefits of fine-tuning (a point of diminishing returns, if you like), when the quality of the user's monitor (not to mention the degree to which it's been properly adjusted) can have an even greater impact.

RonnyO

Although it's elegant and all, contrast isn't about personal taste - There are established guidelines for contrast (which in some countries are backed by law) in order to make sure pages are accessible. Being able to tweak colors isn't enough - The default settings are used in most cases, so when designing a default theme for new software it's important to get this right.

sestir

RonnyO Would making the faded text bold where it is important help satisfy the legal requirements?

Dominion

RonnyO There are established guidelines for contrast (which in some countries are backed by law) in order to make sure pages are accessible.

That's not surprising, but I think Flarum in its present state is more contrasty than the some elements of the current iOS interface. You'd think we'd hear about it if that had caused legal troubles for Apple...

Of course, iOS does have the built-in inverted colors accessibility setting. I didn't find that setting much made much of an improvement to visibility, but it is what made me think of suggesting something similar for Flarum.

RonnyO

Don't know, need to dive further into the requirements and how much effect font weight has, but I don't think the current state is even close to passing so my guess is no, the change should be more noticeable. And don't think about the law/some certificate, think of users with imperfect eyesight, bad screens, bad lightning conditions and so on.

Franz

RonnyO I don't think the current state is even close to passing

You can use this handy tool for testing - it even suggests improvements.

Toby

I'm hesitant to include a "high-contrast" theme/mode. I'd rather put in the work to make the default theme satisfy (or get closer to satisfying) the guidelines.

I've made an issue for this. Hopefully during the week I'll have a play and apply changes live to this forum, and then we can use this thread for feedback.

tarun

Toby work to make the default theme satisfy (or get closer to satisfying) the guidelines

I think you may be going down the wrong route with this decision - try and make it lighter, and you'll make the interface heavy for those who are okay with those light greys. Keep it light, and there will be those who have an accessibility issue. I personally like things the way they are now - the interface is light and approachable as a result of this.

I'd suggest keeping things as is, and letting someone develop a high contrast theme or a list of CSS Overrides for the default one.. that way both camps have the opportunity to be served well.

henshaw

Toby we chose to make a high-contrast theme for our software when we launched a new design several years ago. It was a mistake. The best solution ended up being what you suggested, "put in the work to make the default theme satisfy (or get closer to satisfying) the guidelines."