Site Health: possible confusion with red/orange badges in the "Passed Tests" section

[pbiron]

Following up on ​discussion in slack, at first glance having big RED or ORANGE badges in the Passed Tests section could be confusing.

Seeing red/orange in the "Passed Tests" section could alarm some users...until they realize that the color coding of the badges seems to have to do with the Category of the test (RED for security, orange for performance, etc) rather than the status of the test (passed/failed/etc).

Some suggestions were:

• Use GREEN background for all tests in the "Passed" section
  • I tend to favor this option
• Use the current colors, but use them as an outline for the badges in the "Passed" section

See screenhots (which have the badges "positioned to the right" from #46622, although the alignment of the badges is not part of this ticket).

[pbiron]

This is how things look in 5.2-alpha-44986 (modulo the alignment)

[pbiron]

This is how it could look if the background color of the badges in the "Passed Tests" section indicated the outcome of the test

[pbiron]

This is how it could look if the outline of the badge indicated its category

[pbiron]

oops, uploaded the wrong first screenshot (meant to use the one with the badges aligned right, to be consistent with the other screenhots here).

[pbiron]

#46736 was marked as a duplicate.

[garrett-eclipse]

Thanks for pointing me here from #46736 @pbiron I agree it would be nice to soften the badges on the passed tests. As my ticket w/ screenshot suggested I would second you on going with the outline/border as it would be straight-forward and keep the distinction of security from performance.

[hedgefield]

I agree the outline looks quite good actually, and it solves the problem of having to make sure colors have sufficient a11y contrast with the text. Right-aligning them also looks good to me. One tweak I would make is to make the corners square instead of rounded so people don't confuse them with buttons, but otherwise go for it!

[Clorith]

46623.patch​ changes the badge visuals and positioning (meaning we fix #46622 as well, as it made sense to consolidate badge changes in one patch).

[pbiron]

46623.2.diff​ outlines badges only in the "Passed Tests" section and sets the border width to 2px (the lighter colored borders are hard to see with 1px, especially orange).

p.s. I still prefer the badges in the "Passed Tests" section to have a green background, but using outlines is better than red/orange backgrounds.

[garrett-eclipse]

Successful test of 46623.2.diff

[garrett-eclipse]

Thanks @Clorith and @pbiron the latest patch works nicely there. Looks good to commit here.

[xkon]

Hm, seeing the screenshot that @garrett-eclipse posted, it kinda looks confusing to me having them with the same colors but with/without background depending on the list they are on.

I agree with @pbiron as well, success is usually "bound" to green, so simply removing the background doesn't feel right in my eyes/brain at least.

I'd personally prefer only a color change, but not the actual "looks" of the labels (background vs border).

[melchoyce]

Do the passed tests need badges? Could they be grouped within the results by category instead?

[hedgefield]

Oh I like that idea @melchoyce, in the results they are not fragmented so we could just make category headers, nice.

[pbiron]

Replying to melchoyce:

Do the passed tests need badges? Could they be grouped within the results by category instead?

That's certainly a possibility from my perspective.

However, that would still present a difference between the "Failed" and "Passed" sections...since the "Failed" tests aren't grouped by category. And that difference will take a certain number of "brain cycles" on users' part to grok why things are different.

[hedgefield]

That's a fair point. FWIW, in my mind I figured we would give ALL the labels the borders instead of the fills, but I must admit I now see it was only implemented for the passed tests ha. The problem that the borders solve is to make the labels feel not so intense, right? And conceptually they're not meant to even indicate priority per se, they're categories, just that security issues should not be taken lightly and thus are red. So would giving all the labels borders instead of fills also be a good solution?

[pbiron]

Replying to hedgefield:

FWIW, in my mind I figured we would give ALL the labels the borders instead of the fills, but I must admit I now see it was only implemented for the passed tests ha.

The patch that @Clorith posted did change all badges to use outlines...but I thought that was a mistake, hence my patch.

During the discussion on slack (referenced in the description of this ticket) I interpreted the suggestion for outlines to apply only to badges in the "Passed" section...as a way to lessen the discord of having red/orange badges on passed tests (since as @xkon points out, in many/most people's mind (mine included) those colors suggest that something is wrong).

The problem that the borders solve is to make the labels feel not so intense, right? And conceptually they're not meant to even indicate priority per se, they're categories, just that security issues should not be taken lightly and thus are red. So would giving all the labels borders instead of fills also be a good solution?

The CSS defines 8 or 9 colors for badges, but on the sites I've run it on the only ones that have ever showed up are red and orange. And I've interpreted that as:

• red = bad, fix this
• orange = warning, fix this if you can
• green = all good

So, maybe the whole problem is using colors in the first place. Here's a radical idea, what if instead of colored badges we used dashicons to indicate the categories (see screenshot). It remains to be seen whether appropriate dashicons exist for the other categories which I've never seen displayed on any site I've run Site Health on.

[pbiron]

use dashicons to indicate categories, instead of colored badges

[xkon]

I'm not that much drawn into at adding only icons to be honest. If that's the case then we should explain somewhere what each is and I think it makes it even harder than what it has to be.

--

Can I ask something that might be even more radical (haha) ?

If we're only using those as "categories" / "labels" or call them as you please, are they so much needed? Can't we just have a list with Failed / Passed "tests" as that's what they all are. Why do we have to distinguish what each is ?

For an easy explanation why I'm thinking about this:

Security - Inactive plugins should be removed. OK yes that's a common way of "keeping the site clean & safe" but it's not a "critical" issue that requires a security attention in my personal opinion. Those plugins might be inactive and used when needed while being fully updated to their latest so practically "safe".

#46789 is a good example ticket of "labels" that most likely need to be altered depending on the state of things as well that makes this an even more "complex" situation imho.

That being said maybe just a plain list of what needs to be looked after and what's already done, without labels, categories, colors, markings etc would be a simple & best solution? After all, less is more usually as they say!

[Clorith]

It's way too late in the cycle to start re-coding things to group by category and such, if that's the route we're suddenly moving towards, we're more likely to pull the badges completely.

I'm also opposed to icons-only, this is a bad experience for all, for screen readers we can add descriptive texts, but that doesn't help me, a sighted person, understand the context of vague icon.

I think badges serve a purpose, and could serve a broader purpose (think for example HostPress being used to denote that this is a host specific test), I'm against them being color coded to denote if a test is passed or not, for various reasons covered previously.

As for only some tests having borders, I'm a bit confused, has there been any patches that removes the border-only code from non-passed tests, my latest patch here didn't differentiate, badges should be the same visually regardless of test states.

I'll leave this open for some more input, but if no clear direction can be made on this, I say we need to pull out badges for the initial release.

[pbiron]

Replying to Clorith:

I'm also opposed to icons-only, this is a bad experience for all, for screen readers we can add descriptive texts, but that doesn't help me, a sighted person, understand the context of vague icon.

It was just a suggestion...as a way to avoid the color-coding issue. I'm certainly not wedded to the idea.

I think badges serve a purpose, and could serve a broader purpose (think for example HostPress being used to denote that this is a host specific test), I'm against them being color coded to denote if a test is passed or not, for various reasons covered previously.

Where has that been "covered previously"?

As for only some tests having borders, I'm a bit confused, has there been any patches that removes the border-only code from non-passed tests, my latest patch here didn't differentiate, badges should be the same visually regardless of test states.

As mentioned in comment 16, when the outline suggestion came up during the initial slack discussion, it was in the context of "lessening the shock" of passed tests being red...and I thought the suggestion applied only to "Passed" tests, so I added 46623.2.diff​.

I'll leave this open for some more input, but if no clear direction can be made on this, I say we need to pull out badges for the initial release.

I wouldn't be opposed to that.

[mdwolinski]

Two comments, when looking at the screen, I'm getting the "We recommend you update your PHP" but I'm running 7.2.0, granted it's not 7.3, but at what level does the recommendation kick in until?

Regarding the badges, I'm not a big fan of the colors. What about using the area to provide a quick glance of the info needed for that issue.

[hedgefield]

I feel like we are getting off track here. This issue is to address the severity of using red and orange. Using borders instead of fills was one of the suggestions, liked by the person reporting the issue and the designers participating, picked and implemented. As far as I'm concerned that solves this issue, would you agree @pbiron?

The rest of the discussion is valuable, but is also blocking the process. This feature and its implementation were OK-ed for merge, so let's carry on with it and iterate afterwards.

[mdwolinski]

My apologizes, @hedgefield I'll restrict my comments to the colors.

The use of colors here is inconsistent with the expectations of the average user. Whether full color or just border, when a user scans the list of issues, they are going to inherently feel the red ones, security are bad and the yellow ones are just warnings. Why? Because the use of three colors, Red/Yellow/Green, have a consistent meaning pretty much anywhere in the world. I have three uses of that color scheme on my screen as I type this to indicate what we expect them to.

The colors on the badges matches the % indicator at the top, which creates an inconsistency in visual messaging to the user between what the colors stand for.

So what is the purpose of the colors? From the initial post, it's to indicate a difference in category, if that's the case, then they should be shown in the Passed Tests section as well. And why is the color selection Red/Orange? Sure, Security issues are more important than Performance ones, but they're grouped under Critical.

If the purpose is to indicate Danger/Warning/Good, then they should be consistent across categories per grouping (ie Critical should be all red, etc). I'm not suggesting this as I believe most people are against using colors as indicators of status.

Does the category need colors? I'd argue they do not and look good when they're right aligned without colors. There are two categories, not a large number that I need colors to pull them out of a long list. Future iterations, where more categories are used can reintroduce colors to the categories where color choices make more sense to their use.

At the end of the day, I should be concerned with all issues under Critical. On a mostly white screen, the user's eyes are drawn to the colors and Red/Orange imply status of issue from them.

[mdwolinski]

For reference to how it would look without category colors.

[hedgefield]

Thanks @mdwolinski, it's a fair point that we currently have too few categories to really merit colors. In the future we intend to add accessibility, speed etc, so then let's then postpone the color discussion to that moment. I do like having the border around the category labels just to indicate they are something different, similar to tags on regular posts, so let's keep that, but make them all one color, regardless of which category it is or whether a check is passed or not. I think a soft blue or grey should be fine, I'll leave that up to @Clorith to finetune and implement, and we can put this matter to rest then. Thanks all for your input.

[pbiron]

Replying to hedgefield:

I feel like we are getting off track here. This issue is to address the severity of using red and orange. Using borders instead of fills was one of the suggestions, liked by the person reporting the issue and the designers participating, picked and implemented. As far as I'm concerned that solves this issue, would you agree @pbiron?

Since I'm the person who reported the issue and I've said several times that I prefer having green backgrounds for all badges in "Passed" section (if colors are going to be used at all) I don't think it is correct to say that using outlines is "liked by the person reporting the issue". I find using outlines for the passed tests is better than solid backgrounds if the red/orange color is still going to be used, but it is certainly not my preferred solution.

Also, @mdwolinski was the one who original suggested ​in the Slack discussion using outlines, but only to "softened up if there are no issues", I don't find his contributions to this ticket off track.

[pbiron]

Replying to hedgefield:

Thanks @mdwolinski, it's a fair point that we currently have too few categories to really merit colors. In the future we intend to add accessibility, speed etc, so then let's then postpone the color discussion to that moment. I do like having the border around the category labels just to indicate they are something different, similar to tags on regular posts, so let's keep that, but make them all one color, regardless of which category it is or whether a check is passed or not. I think a soft blue or grey should be fine, I'll leave that up to @Clorith to finetune and implement, and we can put this matter to rest then. Thanks all for your input.

Now that is something that I do agree with:

• keep the badges
• right align the badges
• no colors on badges for both "failed" and passed tests
• 1px border on badges for both "failed" and passed tests

[mdwolinski]

Thanks @pbiron for the comment. @hedgefield was correct that my initial comment on this issue was functional related and not necessarily the point of the ticket, which I agree with. I'd much rather see the Site Health merged in then held up to change functionality when it works as is. Discussions on that can be held for future updates.

I'm not a big fan of the one pixel border when I look at a quick mock-up of it, but I can live with it and good with the other points.

[mdwolinski]

Quick, not perfect, one pixel border mock-up

[pbiron]

all badges with no colors but a 1px soft grey border

[mdwolinski]

If I had my choice, I'd go with no color/border, per my mock-up #comment:23

If you want "something," I like @melchoyce solid option.

[melchoyce]

Added two ideas for monochromatic badges. First one is solid (background is #EDEFF0, text is #606A73), second one outlined (border is #8F98A1, text is #6C7781). (Sorry, meant to post this earlier but had to hop into a meeting)

[Clorith]

46623.2.patch​ Implements the thin outline only as discussed, and uses the same color for all the core provided tests at this time. We're still retaining the other color options, but they'll still be outlines like everything else. This is so that plugins or themes utilizing it can still make use of them.

It right aligns as discussed, and uses the blue color on the outline (for a small, barely noticeable, dash of color)

This is it, the one we're using.

[Clorith]

#46622 was marked as a duplicate.

[pento]

46623.2.patch​ no longer applies cleanly. @Clorith, could you refresh it, please?

[xkon]

refresh of 46623.2.patch

[xkon]

46623.3.diff​ is a refresh of 46623.2.patch​ keeping the same css and adding the blue outline on existing tests.

[ianbelanger]

Patch applies cleanly to trunk and works as intended. Marking for commit

[melchoyce]

... and adding the blue outline on existing tests.

What's this mean? Can you add a screenshot?

[ianbelanger]

Blue outline after patch

[mdwolinski]

Just wondering that since the Passed Tests is a button, I don't think it should have a blue outline around it.

[ianbelanger]

That blue outline is only on Passed Tests onfocus @mdwolinski

[mdwolinski]

@ianbelanger Gotcha, thanks.

[melchoyce]

Thanks @ianbelanger.

Some notes:

• Where did this particular shade of blue come from? I don't see it in ​https://codepen.io/hugobaeta/full/RNOzoV/. (We'll want to make sure all colors we're using for badges are coming from this color guide.)
• The badges should retain the 3px border radius. Border-radius is a common pattern for badge styling.
• We try to avoid using #000 for text colors in the admin, unless it's necessitated by contrast. Instead, I'd recommend using #32373C or #555D66.

FWIW, I still think going grey is the better direction.

@hedgefield — want to make sure to get your thoughts and sign-off on the design direction ↑

[pbiron]

Replying to melchoyce:

Some notes:

• Where did this particular shade of blue come from?

That is the color used for the background of .badge.blue that is currently committed to core in /wp-admin/css/site-health.css. All this patch does is change to using it as a border instead of background.

• The badges should retain the 3px border radius. Border-radius is a common pattern for badge styling.

see comment #5, where @hedgefield suggested using square corners so the badges aren't mistaken for buttons.

[melchoyce]

That is the color used for the background of .badge.blue that is currently committed to core in /wp-admin/css/site-health.css. All this patch does is change to using it as a border instead of background.

Where were all the originally committed colors drawn from? I want to make sure all of the colors we're using are following the established color palette.

[hedgefield]

Thanks for the ping @melchoyce. The originally committed colors were assembled to form a diverse set of colors that could be used for a variety of categories to come. They may not all map to existing colors in the WordPress space - where possible, please go ahead and correct that.

About text color I agree, most WP text is off-black, so let's fix that.

I favor square corners for the labels for the reason @pbiron mentioned, they look too much like ghost buttons otherwise.

As for the label styling itself, I prefer retaining some color in this otherwise dreadfully dull grey page. The blue in the patch draws a bit too much attention, I'd prefer something from the WP color scheme ​https://codepen.io/hugobaeta/pen/RNOzoV that gets close to @mdwolinski's mockup, like #BFE7F3 or even #E5F5FA. While I do really like your solid background option, let's first continue trying it as a border, as that will future-proof the use of colors on these categories.

[melchoyce]

Thanks @hedgefield! Let me try spinning up a patch using either #BFE7F3 or #E5F5FA, and compliant alternatives for the other badge colors.

To clarify — should all of the badges be outlines, or just the ones in "Passed tests?"

[melchoyce]

E5F5FA and 555D66

[melchoyce]

BFE7F3 and 32373C

[melchoyce]

Based on the two above versions, #E5F5FA is too light to use as a border, IMO.

[mdwolinski]

Replying to melchoyce:

Thanks @hedgefield! Let me try spinning up a patch using either #BFE7F3 or #E5F5FA, and compliant alternatives for the other badge colors.

To clarify — should all of the badges be outlines, or just the ones in "Passed tests?"

I agree the #BFE7F3 is the better choice that the other one is too subtle.

I would imagine this would be on all issues. I don't see the value of just having this as an indicator of Passed issues when the user has to click the Passed Issues button to see them.

[melchoyce]

Are we ditching all the other colors? I'm seeing blue outlines for every badge in 46623.3.diff​.

[pbiron]

Replying to melchoyce:

Are we ditching all the other colors? I'm seeing blue outlines for every badge in 46623.3.diff​.

The same color border no matter where the badge is show (failed and passed tests), but keeping the other colors in the stylesheet for possible future use.

[melchoyce]

Replying to pbiron:

Replying to melchoyce:

Are we ditching all the other colors? I'm seeing blue outlines for every badge in 46623.3.diff​.

The same color border no matter where the badge is show (failed and passed tests), but keeping the other colors in the stylesheet for possible future use.

Okay — I'll update the unused colors as well so they match their closest on-scheme variant 👍

[melchoyce]

Swaps out badge border and text colors for core equivalents

[hedgefield]

Thumbs up!

[Clorith]

Let's do it, also throw in a prop for @alexdenning with the commit, as he was missed in the big bulk-prop.

[desrosj]

Can we tweak the shade of blue being used? #BFE7F3 on white ​does not pass the a11y requirements for contrast.

[melchoyce]

The border is decorative, so it shouldn't need to pass contrast. The text passes, which is what's important.

[desrosj]

Thanks for clarifying, @melchoyce

[afercia]

Correct, in this case the border doesn't identify an UI control or a state, thus it doesn't need to pass contrast. Reference (for non-text contrast): ​https://www.w3.org/TR/WCAG21/#non-text-contrast

[desrosj]

In 45169:

Site Health: Improve the test badge implementation.

Label badges for each Site Health test currently display in either red, orange, or green, regardless of if the test passed or failed. This is confusing, as seeing red labels in the “Passed Test” section could alarm users (when really everything is OK and no action is required), and seeing green labels in the “Failed Tests” section would not appropriately encourage the user to take appropriate action.

This change makes several improvements to the label badges:

• Always right align the badges for consistent display.
• Remove background fill for badges. Instead, use a border.
• Use a consistent styling for all tests (passed and failed).
• The text color no longer uses true black (#000000).
• The .badge.pink CSS definition has been switched to .badge.purple, and the definitions for blue, gray, and green have also been updated to more closely follow the official WordPress color palette.

Props: pbiron, garrett-eclipse, hedgefield, Clorith, xkon, melchoyce, mdwolinski, alexdenning.
Fixes #46623.