Add or Adjust background color for text readability

Contribute art for mainline Wesnoth.

Moderator: Forum Moderators

Forum rules
Before posting critique in this forum, you must read the following thread:
Post Reply
Mawmoocn
Posts: 138
Joined: March 16th, 2019, 3:54 pm

Add or Adjust background color for text readability

Post by Mawmoocn »

Greetings,

In this image, dark background color obscures dark colored text.

The font color for these percentages (+50 to +80% and -50% to -100%) have slight problems on visual adjustment.


Image


Text colors that blend well with background color, are hard to read.

Font size and style, affects readability because it alters visual representation.



Suggestions

1. Toggle for changing the current font color.
2. Add semi-translucent colored(black/white) background, behind the colored font, to adjust brightness of the main background. Adjusting the background color would help emphasize texts that have different colors.
3. Have 2-3 separate font profiles for light and dark background. Color adjustments rely on detecting the best font color, for the current background.


If we improve and use them harmoniously, visual accessibility can be better, for people who have visual impairments.

Source
When choosing a color scheme for your website, make sure that the text (foreground) color contrasts well with the background color. Your design might look cool, but it is no good if people with visual impairments like color blindness can't read your content.

If anyone has questions, clarifications, and suggestions about this topic, feel free to post!
User avatar
josteph
Developer
Posts: 741
Joined: August 19th, 2017, 6:58 pm

Re: Add or Adjust background color for text readability

Post by josteph »

That screenshot is from my local branch. In vanilla wesnoth the tooltip looks different, it uses fewer colors. Does the bug exist in vanilla wesnoth? If so please show a screenshot of that.
Mawmoocn
Posts: 138
Joined: March 16th, 2019, 3:54 pm

Re: Add or Adjust background color for text readability

Post by Mawmoocn »

It could be incomplete, but here is the screenshot. I added some tiles other than tooltips, I guess they might cause problems?
tileandtooltipproblem.png
tileandtooltipproblem.png (201.01 KiB) Viewed 3137 times
User avatar
josteph
Developer
Posts: 741
Joined: August 19th, 2017, 6:58 pm

Re: Add or Adjust background color for text readability

Post by josteph »

I just now saw the notification for this thread...

I think the green in the two bottom screenshots (tod and trait) is hard to read. Would either of these be better? (the XP line shows the proposed color, the HP lines show the current color)
2019-09-14-100008_133x90_scrot.png
2019-09-14-100008_133x90_scrot.png (18.86 KiB) Viewed 2881 times
2019-09-14-100253_136x83_scrot.png
2019-09-14-100253_136x83_scrot.png (17.99 KiB) Viewed 2881 times
Spoiler:
User avatar
Ravana
Forum Moderator
Posts: 2456
Joined: January 29th, 2012, 12:49 am
Location: Estonia
Contact:

Re: Add or Adjust background color for text readability

Post by Ravana »

From my observations the shade of green depends on OS. Windows shows #0f0, linux shows something darker.
User avatar
josteph
Developer
Posts: 741
Joined: August 19th, 2017, 6:58 pm

Re: Add or Adjust background color for text readability

Post by josteph »

Interesting, thanks.

The source code uses pango color names red and green, so perhaps those names have different values on different platforms.

My second screenshot uses #0f0, if windows uses that I guess there won't be a problem in using that color across the board. #4348

What color value does the trait tooltips use for red on windows? (for example, on goblins, with their negative traits)
gnombat
Posts: 302
Joined: June 10th, 2010, 8:49 pm

Re: Add or Adjust background color for text readability

Post by gnombat »

The keyword "green" has historically been particularly unreliable to use because there are two versions of "green" in common use: "X11 Green" and "Web Green". Sometimes you'll get one, sometimes the other.

https://en.wikipedia.org/wiki/X11_color ... lor_scheme

(I'm not sure if that's what's going on here, but I would recommend using hexadecimal color values instead of keywords for more consistent results.)
User avatar
josteph
Developer
Posts: 741
Joined: August 19th, 2017, 6:58 pm

Re: Add or Adjust background color for text readability

Post by josteph »

gnombat wrote: September 15th, 2019, 9:32 am (I'm not sure if that's what's going on here, but I would recommend using hexadecimal color values instead of keywords for more consistent results.)
That's actually exactly what happened here. pango changed their definition of green from X11 Green to Web Green back in 2012. See the issue for details. Thanks for the hint!
Mawmoocn
Posts: 138
Joined: March 16th, 2019, 3:54 pm

Re: Add or Adjust background color for text readability

Post by Mawmoocn »

Sorry for the delay.

@josteph
I prefer a lighter color but I think the 2nd option is fine.

As long as they compliment and blend the main font color with the background, It would probably help.
Post Reply