Feature/awesome accessibility color audit #7642

khaykov · 2018-04-16T15:31:25Z

Accessibility color audit turned into Calypsofication of colors.

I was surprised to learn that our styles and colors are total mess, specifically preference screens. In our app we have preferences that look like this :

With dialogs that looks like this:

So apart from adressing color contrast issues I tried to adress inconsistencies like that.

Now, there are parts where I wasn't exatly sure what colors to use. Reader in calypso, for example, uses low contrast icons, contrary to the rest of the interface, so I had to improvise.

So, I need a help of a designer with a sharp eye, like @iamthomasbishop, to help me navigate this 50 shades of grey ;)

I compiled before-after screenshots of major changes, so please let me know if you feel like we can use any other colors at any element.
Part 1
Part 2
Part 3
Part 4
Part 5

I haven't touched the login icons color, as there is no direct equivalent in Calypso. There are no contrast issues there, apart from icons. Should I change thir color to something greyer?

PS: Accessibility monitor is still angry about contrast of some colors, but I did my best to bring it at least above 3 (?).

PPS: Ringtone prefference is using system colors.

PPPS: I probably missed some colors.

PPPPS: We need to get our style game together.

…id into feature/awesome-accessibility-color-audit

iamthomasbishop · 2018-04-16T16:21:15Z

Great work here, and thanks for surfacing the inconsistencies 😄 There are a LOT of little changes here, so making changes throughout the entire app will mean a substantial shift in feel. My general take is that darkening text and icons slightly is a good thing, but it's a fairly substantial change and we will have to adjust our design docs (not a bad thing!) and other things, so I want to make sure we have wide design approval. For that reason: cc @folletto @mattmiklic @SylvesterWilmott

Also, I'd like to see if we can/should match similar on iOS. cc @etoledom

With all that said, here are some notes on your screenshots:

Looks great! I was happy Calypso also darkened those icons recently
If we decide to darken the text on the timestamp, we should also darken the icon to match it
I'm not sure if we want the input placeholder text to be that dark. Can we make it any lighter while still being passable on the contrast tests? The goal (imo) is to get that to be light enough that it contrasts enough with the actual user-entered content in the input. Also, we could probably use that same (light) color on the inactive SEND button, and then when it's actionable, make it darker or some shade of blue. Icons and labels on the action bar look great.
The only change I'm seeing here is the darkening of the table header text, which looks good. I'm wondering if we should also darken the ••• ellipsis menu icon for consistency - thoughts?
👍
Same as number 3, I'm not sure if placeholder text should be that dark. It's also a neutral gray, whereas most other places we're using a brand-specific shade of gray so we'll want to decide on which shade to use. The values on url, filename, etc. look good there
👍
I like the darkening of the hint text below the inputs, and darkening the dropdown label 👍 . Perhaps the dropdown arrow icon should be the same color as the text - or - a darker shade of blue. I'd lean towards the former. One tiny thing: for the 500 characters remaining hint inside the textarea, can we either keep it the same as it was or darken it slightly? It seems to be lighter than previous
👍
👍
👍
👍
Is there a brand shade in between the lighter color of the 'before' and darker of 'after'? If not, let's roll w/ the after
Similar to 3 and 6, the text input placeholder and send button might be too dark
Only change I'm seeing is the heading colors, which looks 👍
👍
I'm not sure about making the entire notification string the same dark shade. Can we maintain the separation of colors in strings between light/dark, but simply darken the parts that are too light? For example: https://cloudup.com/cp2yVHBpVhP
👍
👍

folletto · 2018-04-16T16:22:33Z

Part 2: 10

Note that these screens aren't just low contrast, it's also an old design. If they were designed today they would be likely on cards or at least white background.

There are no contrast issues there, apart from icons. Should I change thir color to something greyer?

Note: contrast of decorative icons doesn't matter. The only time it matters when an icon contrast has to be ok is when the icon has no label on screen.

So, to answer: no need to change these.

Reader in calypso

Reader in Calypso doesn't follow our guidelines (long discussion), so I wouldn't refer to Reader for design patterns guidance.

@color/grey_text_min

For confirmation: that's a good variable to use, like Calypso's $gray-text-min (here).

We need to get our style game together.

Absolutely yes.
I'd just note that a lot of these screens have issues due to being old (pre-Material even?), not because of style issues per-se.

As a geneal consideration here: I'm totally fine in favoring a darker contrast in these old screens as any other alignment work we'd have to do would have to start by fixing the general design patterns first. ;)

khaykov · 2018-04-17T10:27:49Z

@folletto thanks for the insight! What I also mean by getting our style game together is standartizing and developing a proper style sheet, so we won't have to manually set a color or a text size to elements anymore. Looking at both android app and calypso I see that there is an affort to achieve this, but it's quite localized :)

@iamthomasbishop Thanks for a great review! After looking at all these greys I stopped noticing things :D I fixed most of the problems, and also have a couple of comments:

If we decide to darken the text on the timestamp, we should also darken the icon to match it

Done!

Text placeholder color:

I found that grey_darken_10 (#668eaa) works pretty well. WDYT?

Also, we could probably use that same (light) color on the inactive SEND button, and then when it's actionable, make it darker or some shade of blue.

SEND button is always active, on Android at least.

I like the darkening of the hint text below the inputs, and darkening the dropdown label 👍 . Perhaps the dropdown arrow icon should be the same color as the text - or - a darker shade of blue. I'd lean towards the former. One tiny thing: for the 500 characters remaining hint inside the textarea, can we either keep it the same as it was or darken it slightly? It seems to be lighter than previous

We are using blue_wordpress (#0087be) for similair controls, so I changed dropdown icon color to it.
500 characters remaining is now same as the hint color in other text input fields.

Is there a brand shade in between the lighter color of the 'before' and darker of 'after'? If not, let's roll w/ the after

You mean the color of comment/like icons/labels?

If so, we have a ton of different greys :)

I was going for the same color as the rest of the icons (like in My Site tab). Would you like me to change the color to something else?

I'm not sure about making the entire notification string the same dark shade. Can we maintain the separation of colors in strings between light/dark, but simply darken the parts that are too light? For example: https://cloudup.com/cp2yVHBpVhP

I looked at the Calypso for reference on this one. This is how the same notification looks there:

Shoul we go for a parity with Calypso or it doesn't really matter? (maybe @folletto has some thoughts on this one too).

folletto · 2018-04-17T13:15:50Z

What I also mean by getting our style game together is standartizing and developing a proper style sheet, so we won't have to manually set a color or a text size to elements anymore. Looking at both android app and calypso I see that there is an affort to achieve this, but it's quite localized :)

Interesting, reading some of the code it looked like to me we already had variables and so on, but if not, I agree that's a worthy effort. :)

malinajirka

Wooooow, what a huge amount of work you've done, great job!!! Fixing inconsistencies between different preferences screens makes me really happy :-).

I've tried to go through most of the screens and I've found just few issues.

The switch background color seems broken.

My Site -> Comments screen seems to be a bit inconsistent with Notifications screen.

3. 4. 5. These might still have contrast issues

PPPPS: We need to get our style game together.

100 % Agree! IMO we shouldn't use specific colors (such as grey_dark) in our layouts -> we should either use something general like hint_primary or use specific colors only in styles.xml and themes.xml. Using specific colors in layouts makes it really difficult to change the look of our application as the same color is used for different UI components..... But this is definitely out of scope of this PR.

Thanks!!!

malinajirka · 2018-04-17T11:43:00Z

WordPress/src/main/java/org/wordpress/android/ui/prefs/AppSettingsFragment.java

@@ -229,6 +229,7 @@ public boolean onPreferenceChange(final Preference preference, final Object valu
                        int index = Integer.parseInt(value.toString());
                        CharSequence[] entries = editorTypePreference.getEntries();
                        editorTypePreference.setSummary(entries[index]);
+                        editorTypePreference.setValue(value.toString());


Is this line really needed? As far as I understand, the onPreferenceChange is called before the system updates the value - if we return true from the onPreferenceChange, the system should update the value automatically.

I'm just a bit afraid, that updating the value manually might have some side effects. WDYT?

Yes, you are right, the system will save preference, but we are using custom DetailListPreference (for style reasons) which will not pick the change automatically so we have to manually set the value.

mattmiklic · 2018-04-17T16:49:02Z

This is nice, the inconsistency on Android has been a pet peeve of mine for a while but there just hadn't been time yet to really audit how we're using color to make it more consistent. Big 👍 to this effort.

It would be helpful if there were an APK the designers could install to give this a test-run to check for edge cases that might need special attention, like the blue-on-blue toggle switch that @malinajirka noted above.

etoledom · 2018-04-17T21:38:59Z

Also, I'd like to see if we can/should match similar on iOS.

@iamthomasbishop I we absolutely should!

We should think about Android and iOS apps as one consistent product because... aren't they?
Of course there are platform specific differences but things like colors and the experience in general should match completely.

I haven't seen any big inconsistency on iOS but there are some low contrast details for sure.

It might be good to finish this changes on Android, and then apply the final result on iOS.
What do you think?

iamthomasbishop · 2018-04-19T20:18:10Z

@khaykov Again, great work! I'm so happy that we're focused on consistency and accessibility.

Regarding your last comments above:

Placeholder text color (gray-darken-10) looks good 👍

SEND button is always active, on Android at least.

Fair enough, let's roll w/ it.

We are using blue_wordpress (#0087be) for similair controls, so I changed dropdown icon color to it.

👍

I was going for the same color as the rest of the icons (like in My Site tab). Would you like me to change the color to something else?

Sounds good - let's roll w/ it :)

I looked at the Calypso for reference on this one. This is how the same notification looks there...Shoul we go for a parity with Calypso or it doesn't really matter?

Yea, that's fine - let's match Calypso there.

Also good catches from @malinajirka . I'm not exactly sure what we should do about the blue-on-blue toggle...I'm not seeing the same thing if I go to Me » Notifications:

Of course there are platform specific differences but things like colors and the experience in general should match completely.

It might be good to finish this changes on Android, and then apply the final result on iOS.
What do you think?

@etoledom - I'm not super concerned with every single color of every component matching exactly across platforms (yet! A new design language will give us the opportunity to get all of our ducks in a row across all platforms - so we will be addressing that in a wider way soon!).

With that said, I do think within each app colors of components should be consistent (and contrast-tested, of course) across all screens within the app.

khaykov · 2018-04-20T07:25:04Z

@iamthomasbishop thanks! If you notice any weird colors after we merge this PR let me know and I'll fix them asap :)

@malinajirka I think I fixed all the issues you mentioned and ready for another round :)

malinajirka · 2018-04-23T12:34:48Z

Thanks @khaykov for fixing all the issues;)!

I have found few more issues. I'm sorry I missed them during the first round:(.

Sharing buttons preferences are not consistent with other preferences screens.
The plugins icon doesn't use the correct shade of blue

3., 4., 5. These might still have contrast issues
User Detail

Sharing

Plugin Detail

Thanks!!!

…id into feature/awesome-accessibility-color-audit # Conflicts: # WordPress/src/main/java/org/wordpress/android/ui/prefs/notifications/NotificationsSettingsFragment.java # WordPress/src/main/res/xml/notifications_settings.xml

khaykov · 2018-04-30T21:03:32Z

@malinajirka thank you so much for taking a look! I updated contrast at Sharing preferences screen, but I'll leave the overall design for another issue (#7682) - it's custom Preference screen, and redesigning it is probably will require some consideration.

The User Detail screen is actually supposed to be like this - we are reducing the opacity of the container to indicate that it's disabled.

malinajirka · 2018-05-01T09:14:50Z

Thank you so much for this PR. Looks good!

khaykov added 28 commits April 6, 2018 22:15

Updated contrast on people management.

eb914ed

My site fragment text contrast.

38f0792

Updated login color contrast.

30e13e8

Additional color correction around MySite fragment.

dc7d6cb

Greyer grey on preference screen.

c0b32a8

Fixed different RadioButton color for date picker.

a2a773e

Color of switch and radio button preferences.

26a244a

Number picker colors.

9f8a6a4

Updated comments color.

6dbc2c3

Media settings color.

6747147

Pages colors.

029cdcd

Stats contrast.

bab1649

post settings.

aef2836

Me fragment.

5e1ca80

My Profile

8b4e0f9

Removed Switch styling from inside preference.

3828b3b

Use widget layout for Switch preference color in site settings.

429ebe4

App preference color.

5f863f9

Notification settings.

74d790b

Notifications color.

5c938a6

File renaming

a9ca857

Reader colors.

a45473b

Merge branch 'develop' of github.com:wordpress-mobile/WordPress-Andro…

d496f62

…id into feature/awesome-accessibility-color-audit

Trying to fix checkstyle.

371c1bf

Fixing ambiguous resource names.

4a2de6c

Fixed unused resource issue.

abf7ab4

Minor refactoring, and couple of missing color fixes.

f188211

Comment action text color

c2b2775

khaykov added Accessibility [Status] Needs Design Review A designer needs to sign off on the implemented design. labels Apr 16, 2018

khaykov requested review from iamthomasbishop and malinajirka April 16, 2018 15:31

khaykov added 3 commits April 17, 2018 18:53

Fixed reader visit drawable color.

cf56735

Fixed hint color.

90d8469

Color of timestamp icon.

1bed0a8

malinajirka reviewed Apr 17, 2018

View reviewed changes

malinajirka self-assigned this Apr 18, 2018

khaykov added 6 commits April 19, 2018 18:59

Fixed stats colors.

b989e9b

Toolbar switch color.

0fc3e91

Notifications header color.

d068675

Site creation dialog hint and icon color.

8efd125

Comment.

647f93f

Removed unused import.

c56aed1

Align comments list item colors with notifications.

53487ca

khaykov added 3 commits April 30, 2018 15:02

Plugin colors.

3d640ee

Improved color contrast in publicize settings.

49ce419

malinajirka merged commit 1770053 into develop May 1, 2018

malinajirka deleted the feature/awesome-accessibility-color-audit branch May 1, 2018 09:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/awesome accessibility color audit #7642

Feature/awesome accessibility color audit #7642

khaykov commented Apr 16, 2018 •

edited

iamthomasbishop commented Apr 16, 2018

folletto commented Apr 16, 2018 •

edited

khaykov commented Apr 17, 2018

folletto commented Apr 17, 2018

malinajirka left a comment

malinajirka Apr 17, 2018 •

edited

khaykov Apr 19, 2018

mattmiklic commented Apr 17, 2018

etoledom commented Apr 17, 2018 •

edited

iamthomasbishop commented Apr 19, 2018 •

edited

khaykov commented Apr 20, 2018

malinajirka commented Apr 23, 2018

khaykov commented Apr 30, 2018

malinajirka commented May 1, 2018

Feature/awesome accessibility color audit #7642

Feature/awesome accessibility color audit #7642

Conversation

khaykov commented Apr 16, 2018 • edited

iamthomasbishop commented Apr 16, 2018

folletto commented Apr 16, 2018 • edited

khaykov commented Apr 17, 2018

folletto commented Apr 17, 2018

malinajirka left a comment

Choose a reason for hiding this comment

malinajirka Apr 17, 2018 • edited

Choose a reason for hiding this comment

khaykov Apr 19, 2018

Choose a reason for hiding this comment

mattmiklic commented Apr 17, 2018

etoledom commented Apr 17, 2018 • edited

iamthomasbishop commented Apr 19, 2018 • edited

khaykov commented Apr 20, 2018

malinajirka commented Apr 23, 2018

khaykov commented Apr 30, 2018

malinajirka commented May 1, 2018

khaykov commented Apr 16, 2018 •

edited

folletto commented Apr 16, 2018 •

edited

malinajirka Apr 17, 2018 •

edited

etoledom commented Apr 17, 2018 •

edited

iamthomasbishop commented Apr 19, 2018 •

edited