Improve visual accessibility with alternative themes

[jeremyckahn]

From u/esotericine on Reddit:

too bright, too many areas with extremely poor contrast, no theme option, and responds badly to dark reader. for someone with vision issues (photosensitivity and bad visual acuity), this is unfortunately unplayable.

Farmhand should have visual accessibility options for those who need it to address the issues described above.

[esotericist]

as the person who gave the initial complaint, let me provide a little more context. first, this is all taking place on chrome 108, in case that matters.

when i clicked on the link to open the game, i was greeted with this:

in addition to having an overall entirely too high amount of luminance for my particular issues, that panel on the left is genuinely unreadable to me: i cannot tell the foreground from the background. i don't know what's going on there, but there's just no contrast to speak of.

when i toggle on dark reader with my standard "my eyes are burning, help" settings, i get a slightly different view:

the overall luminance is still somehow very high, and the contrast on the left pane is still entirely too low, and i have no idea what's going on there, either.

switching from the dynamic recoloring to a filter is, impressively, even worse:

using the static mode of dynamic reader, i get something that is a degree of readable, but ironically the contrast ends up too high between the very dark backgrounds and the very bright borders, and a bunch of UI elements stop rendering correctly:

now i'm a fan of using color to help provide spatial zones to help distinguish ui elements, but what i'd like to see is a view that has lighter text on darker backgrounds consistently, but not too dark, and not too light... contrast needs to be there, but if it's too stark that increases eyestrain for everybody.

as to how you get there from here... 🤷‍♀️ i'm not versed in the implementation details.

i don't know if any of what i shared above is useful, but i'm very appreciative to you for opening the issue. it's nice seeing more people care about these things than the dev populace used to.

[jeremyckahn]

Hi @esotericist, thank you for sharing these screenshots and providing all the information you have! Before we start figuring out solutions, I want to address your first screenshot:

I agree that this looks unreadable. However, Farmhand doesn't seem to be presenting normally here. Here's how it presents in every environment I test it in:

Here, the text is dark-on-light throughout. This suggests to me that you may have a browser environment that is affecting the standard presentation of the game. Would you be able to check if you have any plugins or settings that are making the game render with modified colors? If so, how does the game look to you with those plugins/settings disabled?

[esotericist]

okay, that was a good call. i do have this set in the chrome flags:

turning that off does get me the page you show, unfortunately turning that setting on/off more or less requires restarting my chromebook, so it's not a thing i can disable on an as-needed or per-site basis, and it's one of the things i rely on to keep a lot of things from blinding me during load (i.e. before dark reader can kick in on certain sites).

so you're right that part of the problem is my configuration, but it is a configuration that is unfortunately mandated by my needs. it is however rather interesting to me that this is an uncommon enough symptom i didn't remember offhand that setting and how it might impact a site like this; it makes me wonder what the difference is between the css here and in other things i've used that are light-themed as presented.

i'm not sure what the next step might be, short of a full dark theme being implemented (which is not a near term solution, based on earlier discussion)

[esotericist]

looks like i can get most of the way there by suppressing most of the background images. running out of energy to poke at this for now, but salvaging this to get it in a "can be played" state might not be so bad. pretty? that's a different story.

[jeremyckahn]

Thank you for taking a look at your settings and sharing them, @esotericist! This at least enables me to reproduce what you're seeing so I can figure out a solution. I'm betting that Farmhand is relying too heavily on some default color values, and those values are being (unhelpfully) inverted by Chrome's #enable-force-dark flag. If that's the case, then simply defining those values explicitly should make the default presentation a little more accessible.

I'd consider closing that gap a bugfix, and adding support for more accessible themes a follow-on feature. It should be fairly easy to implement a "hide background images" theme, and we can explore more theme options as we iterate. 🙂

[jeremyckahn]

I finally had some time to look more deeply into this.

I'm betting that Farmhand is relying too heavily on some default color values, and those values are being (unhelpfully) inverted by Chrome's #enable-force-dark flag. If that's the case, then simply defining those values explicitly should make the default presentation a little more accessible.

This is actually not the case. I enabled #enable-force-dark in Chromium and inspected the colors of some problematic elements. This is what I found:

Here we can see that the <h1 /> in the menu has a defined, non-default color value of rgba(0, 0, 0, 0.87) (black with slight opacity). With #enable-force-dark enabled, Chromium renders this as white. Overriding the color to be pure black (#000) yields the same results. I played with a few other various colors, and some render correctly while others don't. My takeaway is that Farmhand's theme could conceivably by updated to look the same in Chrome with #enable-force-dark enabled or disabled, it would likely be a significant effort and it would affect the look of the game for everyone.

This seems like a bug (or perhaps a design flaw) related to Chrome's #enable-force-dark feature, not Farmhand. It doesn't seem to make sense to invest significant effort into changing Farmhand's theme to be compatible with #enable-force-dark, as that's a relatively niche use case that's made problematic by a flaw in a project that is unrelated to this one. A good path forward might be to provide a system to support multiple theming options for Farmhand. I don't have the bandwidth (or the design skills, frankly) to design alternative themes myself, but we can certainly incorporate themes contributed by community members.

I don't have any immediate plans to work on an alternative theme system, as we have no alternative themes to offer presently. However, if anyone wants to contribute alternative themes to address issues like the one that @esotericist found or perhaps a more general-purpose dark mode theme, please let me know so we can coordinate around how the feature might be developed.

[esotericist]

thank you for the followup. it's unfortunate that's what you found, but understandable that you have to draw the effort line where you do.

thank you again for your efforts on that front.

do you still think it could be easy to make a theme that simply drops most/all of the background images?

[jeremyckahn]

do you still think it could be easy to make a theme that simply drops most/all of the background images?

Yes, that would be much easier to achieve!

I did some quick experimentation with globally disabling background-image styles:

diff --git a/src/components/Farmhand/Farmhand.sass b/src/components/Farmhand/Farmhand.sass
index f2b85e4d..8f55da1e 100644
--- a/src/components/Farmhand/Farmhand.sass
+++ b/src/components/Farmhand/Farmhand.sass
@@ -2,6 +2,9 @@
 @import ../../styles/variables.sass
 @import ../../styles/utils.sass
 
+*
+  background-image: none !important
+
 // Needed to prevent pull-to-refresh on Android
 // https://stackoverflow.com/a/47709903/470685
 body

And it makes the Home screen look like this:

@esotericist is this roughly what you're looking for? More work would be needed to make this production-ready, as it will break the display of the Field plots and some text colors will be harder to make out (like the "Welcome!" header pictured above). But if you'd find this helpful, I can spin up a new ticket to implement this alternative rendering.

Assuming we move ahead with this, what should this feature be called? "No background images mode" seems a little too on the nose. Perhaps "high contrast" mode or something similar?

[esotericist]

"reduced asset rendering" 😁 more seriously, "high contrast" feels almost right, especially when i look at the image you provided for your normal environment earlier, but i think it might set an expectation of a different color scheme for folks who use genuine "high contrast" stuff than intended. other phrasings could be things like "increased readability", "reduced visual noise", and the like. i dunno, naming things is hard.

whatever you go with, could tag it with "(experimental)" to give an idea of the intent but also let people know it's not something finalized, then actual proper themes could replace it later if they manifest.

it's been a bit since my attempt to poke at images (which i was struggling with since i do not understand css nearly enough despite having to fight things in a lot of stuff) so i didn't really get far enough to know how much the farm plot background will damage playability (only long enough to SEE a farm plot, then i got tired and walked away, and forgot about it). if that's likely to be a problem, is there a reasonably low effort way to e.g. shove a table w/gridlines in there or something, or i guess force that one image to render anyway?

[jeremyckahn]

i think it might set an expectation of a different color scheme for folks who use genuine "high contrast" stuff than intended.

That's a great point. I think it might be worth going all-in on the "high contrast mode" idea. It's a clearer objective that will result in a feature that's more understood by users. A thoughtfully-implemented high contrast mode should hopefully address all the issues you've brought up as well as ones that others may have with the UI's visual accessibility. It will increase the scope of work a bit, but I think it's worth the effort. 🙂

i didn't really get far enough to know how much the farm plot background will damage playability (only long enough to SEE a farm plot, then i got tired and walked away, and forgot about it). if that's likely to be a problem, is there a reasonably low effort way to e.g. shove a table w/gridlines in there or something, or i guess force that one image to render anyway?

There are a number of (overly clever) CSS tricks in use to get the Field looking like it does with a minimal amount of DOM nodes. Up until now I had assumed that background-image styles were not problematic, so some styling strategies will need to be revisited. This shouldn't be too challenging to achieve, but it's also not a trivial task. I think we'll just need to add a CSS class high up in the DOM tree and override styles as necessary throughout.

whatever you go with, could tag it with "(experimental)" to give an idea of the intent but also let people know it's not something finalized, then actual proper themes could replace it later if they manifest

This is a great idea! It's likely we'll need to iterate on this a bit before it's in really good shape, so an "experimental" tag will help to set expectations.

I'll spin up a new ticket to get this implemented shortly!

[jeremyckahn]

#396 has been opened! @esotericist feel free to add any thoughts you have on that ticket. In the meantime I'll leave this ticket open to track the work for wider alternative theme support.