Add or Adjust background color for text readability

Contribute art for mainline Wesnoth.

Moderators: Forum Moderators, Developers

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

Add or Adjust background color for text readability

Post by Mawmoocn » May 27th, 2019, 11:13 pm

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: 738
Joined: August 19th, 2017, 6:58 pm

Re: Add or Adjust background color for text readability

Post by josteph » May 29th, 2019, 12:23 pm

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: 111
Joined: March 16th, 2019, 3:54 pm

Re: Add or Adjust background color for text readability

Post by Mawmoocn » May 29th, 2019, 2:33 pm

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 1449 times

User avatar
josteph
Developer
Posts: 738
Joined: August 19th, 2017, 6:58 pm

Re: Add or Adjust background color for text readability

Post by josteph » September 14th, 2019, 10:04 am

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 1193 times
2019-09-14-100253_136x83_scrot.png
2019-09-14-100253_136x83_scrot.png (17.99 KiB) Viewed 1193 times
Spoiler:

User avatar
Ravana
Forum Moderator
Posts: 2242
Joined: January 29th, 2012, 12:49 am
Location: Estonia
Contact:

Re: Add or Adjust background color for text readability

Post by Ravana » September 14th, 2019, 10:40 am

From my observations the shade of green depends on OS. Windows shows #0f0, linux shows something darker.

User avatar
josteph
Developer
Posts: 738
Joined: August 19th, 2017, 6:58 pm

Re: Add or Adjust background color for text readability

Post by josteph » September 15th, 2019, 5:26 am

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: 237
Joined: June 10th, 2010, 8:49 pm
Contact:

Re: Add or Adjust background color for text readability

Post by gnombat » September 15th, 2019, 9:32 am

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: 738
Joined: August 19th, 2017, 6:58 pm

Re: Add or Adjust background color for text readability

Post by josteph » September 16th, 2019, 7:50 pm

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: 111
Joined: March 16th, 2019, 3:54 pm

Re: Add or Adjust background color for text readability

Post by Mawmoocn » September 22nd, 2019, 12:24 pm

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