Use material design standard grayscale to optimize UI text visibility

[sonora]

In comparison to several other outdoor apps we still produce sub-par contrast and sub-optimum visibility in harsh light conditions, in particular in our dark theme.

After some research it appears that the Android material design colors (https://stackoverflow.com/questions/36915508/what-are-the-material-design-dark-theme-colors) would produce a significant enhancement. In particular, we should apply the correction to

text_color_primary_dark
text_color_secondary_dark
text_color_tertiary_dark
divider_color_dark
activity_background_color_dark
activity_background_transparent_color_dark
list_background_color_dark
app_bar_color_dark
status_bar_color_dark

and all related icon colors.

I can provide PR if desired.

[dmpr0]

Hello! We use our own theme colors. Our night theme is first of all for night use, so light colors not bright.

[sonora]

Hi Dmitriy, yes, I know, but I am suggesting we reconsider this. Let me please clarify the following:

• I am only talking about the grayscale, i.e. our text screens (menus / dialogs / action screens)
• I am not talking about our general color palette (blue/orange) at all, and of course also not about the map
• The dark theme is popular because it provides better text readability in very sunny settings, (and on AMOLED screens it also saves power, often a concern in the backcountry). Thus this issue is not about night mode, really: Text readability is key here..
• But even at night: When I look at my Android 10 (set to dark theme) system setting screens, I have to say there is zero risk of being blinded at night., I think that is simply not a concern. And the readability of secondary text and explanations is superior to OsmAnd.

I invite us to test, or simply make a mental comparison with how google handles it. I am afraid they have the edge here ... ;)

[sonora]

Here's what I mean: It may not look like much, but please view these screens on your device in sunlight, and evaluate the readability of both headlines and explanatory text (screenshots are reduced in size so they fit side by side, hence loss in sharpness on both):

[dmpr0]

On this screen, uses wrong background color. It use list_background_color_dark – https://github.com/osmandapp/Osmand/blob/master/OsmAnd/res/values/colors.xml#L19:L19, but must use activity_background_color_dark – https://github.com/osmandapp/Osmand/blob/master/OsmAnd/res/values/colors.xml#L15:L15

I have review all screens, and it looks like all screens in Settings, use wrong color for background. Activity background color in night theme, always = activity_background_color_dark, card color background = list_background_color_dark.

[sonora]

OK, but it clearly goes beyond just the background: The text readability in the material screenshot is also largely a result oft the text (foreground) colors. I suggest we

• simplify our setup by reducing our color constants to the set defined in the material scheme. It will be easier to consistently use for all our coders!
• And then why not also simply set them to exactly their grayscale values?

[sonora]

@dmpr0 , @vshcherb We have recently picked up work on colors (https://github.com/osmandapp/OsmAnd/commit/e77845314816bb3c20cf1ccc76589f8f63d62593). Should we maybe now use the occasion to remove some of the poor contrast situations we have in our UI palette? I propose that for an outdoor app tackling this some time soon seems cardinal?

To assist with this,I have found this Color Contrast Checker https://imagecolorpicker.com/color-code, and here are some of its ratings for our current color scheme. Anything containing the word "poor" is a candidate for tuning a bit?

Background	Text	Contrast Value	Rating
activity_background_color_light	text_color_primary_light	14.13	Super
	text_color_secondary_light	4.22	Poor
	text_color_tertiary_light	1.61	Very Poor
activity_background_color_dark	text_color_primary_dark	11.67	Very Good
	text_color_secondary_dark	3.89	Poor
	text_color_tertiary_dark	1.81	Very Poor

[vshcherb]

Yes, that's I think the reason to have it sorted by contrast, what do you appeal than? If we talk about accessibility it's one thing, if we talk about normal people I think 4 Contrast very visible though it's marked as Poor

[sonora]

Yes, 4 is generally considered quite acceptable. But we could perhaps do better without losing anything - after all OsmAnd has major use cases beyond your normal "indoor / office use" apps. :wink:

If we raised our contrast some for all text/background cases we have, it could be a win for the accessibility as well as the bright outdoor light use cases.

I briefly checked Samsung's out of the box stock (dark) scheme, and find they use 17.18 as their top value, and find no worse than 2.73 (our tertiary would be 1.81 ?).

[vshcherb]

I will let @dmpr0 answer though in my experience even color blind people are pretty with contrast may be even better

[vshcherb]

@sonora if you convert colors to LAB color space and you have >= 15 by L value then it's usually more than enough. Number 3 test - https://vshcherb.github.io/lab.html

[tomFlowee]

relevant issue: https://github.com/osmandapp/OsmAnd/issues/20738

Fun fact,

I posted the first screenshot on telegram and people didn't even find the text in the screenshot since the contrast is so poor. That is why the red outline got added, to make it clear.

i'm not sure if the less-than-4 is still accurate for todays OSMAnd, but the fact is that it is definitely too low contrast in the real world.

[XandrexOSM]

hello,

regarding "Material Design" by Google, I noticed that in october 2021, version 3 was released. It seems it is not the default version even today. Maybe it has settings that could allow OsmAnd to use it and maintain high visiibility for maps at night ?

on a side note, I have a question: does anyone knows if Google Maps and Waze use Material Design 3 ? maybe @sonora ? I guess as map apps, they also want to achieve the same readability objective at night.

[sonora]

@XandrexOSM From what I see, and without detailed checking, the Android Google Maps app seems to pretty consistently always use the latest available version of OS design principles and colors. But please note that this is for the user interface of the app, I think map colors is an entirely different animal out of scope for this issue here. :wink:

[sonora]

PS: See https://github.com/osmandapp/OsmAnd/issues/20738#issuecomment-2332192896. Noticeably better by my testing! Wish we could expand this a bit like I describe.