Button text color doesn't offer great contrast, and looks disabled when it's not

[Michael Terry]

I'll attach some pictures to show what I mean.

We have a visual design for the welcome wizard when you first turn on the device (see attached design.jpg). It shows a combo box that is hard to achieve with the current toolkit.

(As an aside, there is no joiner between the drop down button and the rest of the widget in design.jpg. I don't know how to do that with the current SDK... But that's not the point of this bug.)

My real problem is text color. By default, I get a kind of grey background color and light text. It's not the easiest to see. And this is the default! See default.png

When I set a white background to get closer to the visual design, I still get a light text. Which is also hard to see. See white.png

I seem to have no control over the color of the text. In ButtonStyle.qml, I see:

        textColor: ColorUtils.luminance(button.color) <= 0.85 && !(stroke && !pressed) ? "#FFFFFF" : "#888888"

Which does not provide much control nor the possibility for a particularly dark text color.

[Zsombor Egri (zsombi)]

We must agree on the palette to be used, then we can drive the colors of the buttons properly. There is no reason to fix colours here'n'there because that will lead to inconsistency and pour configurability.

[Daniel van Vugt (vanvugt)]

Is that right? We had a design at least in September 2014 without this issue and we just haven't implemented the right colours? Or is there some newer design that the current implementation is closer to?

[Daniel van Vugt (vanvugt)]

Perhaps it should be implemented more like:

textColor: ColorUtils.luminance(button.color) < 0.5 && !(stroke && !pressed) ? "#FFFFFF" : "#000000"

[Daniel van Vugt (vanvugt)]

Just looked at the current design docs with kgunn's help.

It appears the common 'dark' text colour for light backgrounds Ubuntu Design wants is #5D5D5D (but I personally think #888888 might look better). So it's seemingly just the threshold we've got wrong in ButtonStyle.qml:

textColor: ColorUtils.luminance(button.color) <= 0.85 && !(stroke && !button.pressed) ? "#FFFFFF" : "#888888"

should be more like:

textColor: ColorUtils.luminance(button.color) < 0.4 && !(stroke && !button.pressed) ? "#FFFFFF" : "#5D5D5D"

or (my personal suggestion):

textColor: ColorUtils.luminance(button.color) < 0.4 && !(stroke && !button.pressed) ? "#FFFFFF" : "#888888"

[Daniel van Vugt (vanvugt)]

Sorry, ignore my personal suggestion. I got that backwards and think design's choice of #5D5D5D will be better. Although darker again might be more better :)

[Daniel van Vugt (vanvugt)]

Wow, I got that wrong. 0x5D is roughly luminance 0.36f so will only work with bright backgrounds. Not dark or mid-tone backgrounds like we see.

So another aspect of this bug is that the background is a mid-grey, which does not contrast with text that is #5d5d5d. The designed colours however seem to be more like #5d5d5d text on a white background, which would provide adequate contrast.

So any buttons whose backgrounds are mid-tone grey either need black text, or a much lighter background to support mid-tone text like #5d5d5d. I think our design docs promote the latter.

[Pierre Bertet (bpierre)]

With the new styles, the color of the Button and the ComboButton doesn’t rely on the luminance anymore.

Related merge requests:

https://code.launchpad.net/~bpierre/ubuntu-ui-toolkit/combobutton-standalone/+merge/280703
https://code.launchpad.net/~bpierre/ubuntu-ui-toolkit/newbutton/+merge/286085

[Zsombor Egri (zsombi)]

Pierre, maybe then it would be wiser to assign the bug to those MRs?

[Rae Shambrook (raecontreras)]

The new button designs have a lighter background (#f7f7f7) and darker text that is #111111. Currently Pierre is working on the updated design.

[Daniel van Vugt (vanvugt)]

See related bug 1578612