2019.3.0a7 - New UI accessibility issue, font rendering & colors are low contrast

I used to work in front end development and one of the issues I became keen on a lot is designers arriving at low contrast UI elements. A lot of time mock-ups would seem good, but at runtime and with differing font renderings on different systems, issue would arise. I installed the latest beta last night to try some things out, and right away noticed that the new vanilla UI is much lower contrast in areas like the inspector pane.

The font color, when rendered 100% without anti-aliasing, is #2F2F2F and the background is #9B9B9B.

You can dial these values yourself into various free online accessibility-minded contrast checkers, like WebAIM: Contrast Checker and https://contrastchecker.com/, the latter of which feels much more strongly about this being a bad contrast ratio.

Other menus, like the Hierarchy view and Project view have much more appropriate contrast ratios, but I still feel the slightly-darker background grey is harder to read.

4 Likes

Other areas of the UI fail these accessibility tests as well, such as the tab bar in the windowing system.

I imagine the low contrast issue is known but I wanted to make sure it wasnā€™t glossed over because I personally found the current values a lot harder to read.

4704113--444185--low-contrast-example2.png

1 Like

on my Mac its not as dark as in your screenshot.

Not sure why there is a difference

1 Like

Thanks for this! I completely failed to mention that I am on Windows 10.

Thanks for your comment @midoski ! It appears you may be in play mode as the screen is a good deal darker than it should be. Can you double check this? Also, if play mode is hard to notice or confusing please let us know as that feedback is valuable as well.

1 Like

I apologize, but - here are two screenshots from the editor, there is no playmode. On the left - the old interface 2019.2, on the right - the new ā€œless contrastingā€ interface in 2019.3.Š°7
Š¢he black color of the letters remained black, but the background under them became darker - it became much more difficult to read.
At least it is necessary to peer, where earlier the information was read ā€œautomaticallyā€
4770551--454178--2019-07-22_10-31-49.png

P.S. Sorry for my ā€œGoogle-translateā€

Thanks for following up. This is helpful. I would love to get your feedback in a survey we are doing with the editor themes. Would you be interested in participating? Then we can collect more details from you.

1 Like

Yes, of course, I will be glad to participate in the survey :slight_smile:

Thanks. We are hoping to mail it/send via forum out in the next week or so. Please be as detailed as you like! Thanks.

1 Like

I hope the surveys are not your only data point for taking feedback, as forum post are also valuable, even if they are not easy to put into analytics.

2 Likes

That is totally fair. We are actually reading every comment related to accessibility on the forums. They are extremely valuable as you know.

In the case of the 19.3 theming we have received feedback and bug reports from so many sources including the forums. In the past year we have run this same survey twice. The reason I am sharing it a third time here is because, firstly, I want to track improvement over time consistently and, secondly, I want feedback focused on accessibility as it relates to the 19.3 Beta theming update. Please let me know if you have any more questions. You made a great point.

3 Likes

Finally Installed a new alpha11 version.
As expected, I got a bunch of errors when upgrading a previously saved project. And while I was dealing with errors and importing new versions of packages ā€¦
-Oh my eyesā€¦ Itā€™s just a nightmare ā€¦ Sorry ā€¦

Survey on the new UI/UX -is certainly great ā€¦
Butā€¦ Itā€™s hard for me to evaluate in general all the details and subtleties of changes in usability, acessability, familiarity, etcā€¦
But I can definitely say - never before when working in Unity my eyes have never hurt so much!
This is a real feeling of sand in the eyes :frowning:

But I didnā€™t even finish the upgrade of just one(!) simplest project! :face_with_spiral_eyes:

In addition to the low contrast we have already talked about
-here are the problems that I can show in just in one screenshot:

4812053--460700--2019-08-01_23-46-48.png

  1. Here is the line that you need to ā€œhook and dragā€ if you want to resize the window with explanations about the error - who sees it? me not.

  2. Messages, warnings, errors - not just their number, but also buttons that turn them on - they are almost always out of sight!
    I have no way to open the subwindow half the screen. -On the screen of my laptop, only 1366x768 pixels. Yes, he is not new. But, believe me - I can work on it even now. It was enough for me to work. And there have never been problems with Unitys interface.

And two more problems associated with the same circumstance:

  1. In the title of this window (game) there is only one single button that I switch often, more often than anyone else.
    this is ā€œStatsā€. Itā€™s more convenient for me, not switching ā€œGameā€ to full screen. But then the statistics overlaps the small Game-window and the button must be switched
    -Added something to the scene, or changedā€¦ -turn on the display of statistics, looked at the number of drawcalls etc, then turned off the statistics.

Butā€¦ Why, with almost every Unity update, this button is pushed further and further to the right?
Well, at least, in this alpha, the ā€œVSyncā€ button was removed from the title barā€¦ :smile:

  1. Iā€™m not sure, maybe this is some kind of temporary glitch, but right now, today, right after the installation .3.a11,
    I almost always fail to hook and move the border between the Game and the Project windows.
    Border just does not catch on.
    Sometimes it helps to click the mouse inside ā€œGameā€, sometimes I have to close the window and reopen it.

Iā€™m sorry, probably these problems are simply ridiculous in many waysā€¦ :smile:
But Unity was created not only for working in game-studios with screens for half a wall, isnā€™t it?.. :slight_smile:

P.S. And sorry for google-translate

3 Likes

In general, contrast in the new design is way lower than it should.

Just look at the package manager. Try counting the seconds until you see which package(s) have updates available.
Before:

After:

(letā€™s not even start talking about the refresh icon at the bottom - nice new functionality, but icon is broken)

11 Likes

Iā€™m in complete agreement with the contrast comments. I noticed it most obviously when checking for package updates.
While I do like the ā€˜cleanā€™ look of the new style in general, readability seems to have been sacrificed in some places.

+1 for more contrast.

The markers in the Timeline editor are hilariously hard to see:
4835150--464180--upload_2019-8-8_23-2-41.png

Bet you didnā€™t spot the 3rd one:
4835150--464183--upload_2019-8-8_23-3-0.png

7 Likes

Also, when you are renaming something, its very low contrast and hard to see:
4835159--464189--upload_2019-8-8_23-5-25.png

And if you have the row selected, not only is it low contrast, but when you are renaming you also canā€™t see what part of the word you have selected. I have the same characters selected as the last image (ā€˜nal Trackā€™), but it is impossible to see that.

4835159--464186--upload_2019-8-8_23-5-19.png

4 Likes

One more. I canā€™t count anymore how often I clicked the wrong one first when trying to open the script.

4840862--465044--upload_2019-8-9_21-21-28.png

ā€¦
Correct, none of them is a script :wink:

In new 2019.3.0a12 - everything is Great !!! :smile:
Big Big Big Thanks to all developers of Unity!
With contrast and readability - everything has become much, much better!
And all that I noted on that screenshot above -is that there are no more problems with all this :slight_smile:
Well, except for the ā€œStatsā€ buttonā€¦
And although itā€™s clear that this is a conscious decision,
Butā€¦ -If it may be possible (in the far-far future, may be :slight_smile: ) - to make customizable the number and composition of buttons in the window title, - it would be very usefulā€¦
.
P.S. Tell me, please - should I write here about the very strange behavior of the ShaderGraph window in .a12, or is there a separate thread somewhere about its interface? (I can not find)

(Sorry for Google-translateā€¦)

Maryllu, -from the lack of an answer to my letter above (with a screenshot), it could seem to be too rude and harshā€¦ Forgive me if that - in fact, the whole problem is that I can not freely express my thoughts in English
and I have to use an automatic translator
But they (Google-translate and some others Iā€™m switching between, trying to find the best translation)
-all they - is something elseā€¦ :frowning:

1 Like

I would like to see the Mac colored buttons on the left side consistent with the rest of the Mac interface,
right now they are on the wrong side according to Mac user interface guidelines.

The search bar also is no aligned with the other properties, I aligned it to make it cleaner looking.

See the second screenshot for example how it could look


2 Likes