Wordpress-seo: Change icons for analysis status for the colourblind

[tacoverdo]

I just received word that the red/yellow/green dots for SEO analysis are hard/impossible to distinguish for colourblind people.

This could be solved by changing the coloured dots to (for example):

• a green +
• a yellow =
• a red -

[jdevalk]

I have and will always object to that simple a solution. Making things easier to distinguish for the color blind should not affect how easy it is to recognise for non-color blind users. That said, I bet we can have Erwin cook something up.

[tacoverdo]

I think this post may be a suggestion in the right direction:
http://colourblindnerd.com/yeost-seo-wordpress/

[darthvader666uk]

I see this has been raised before which I didnt know (sorry) but looking at #1035 It seems to have not gone anywhere?

Do you think there will be an update to this?

[tacoverdo]

Yes, it's still on the roadmap for WordPress SEO.

[darthvader666uk]

Hi,

I was wondering if there was anymore news on this? Since the wordpress SEO change to CSS, I have done a cheeky edit of the following:

edit-page.min.css
metabox-tabs.min.css

Its a bit of a pain over writting these everytime there is an update and was wonder if there was a way around it, for now, that when there is a future update to not ovride my changes? Its a very big ask but these colour changes really do help.

Cheers

[mrwweb]

I raised this in the comments of your "Accessibility Matters" post. I included a screenshot of how it looks to someone who is colorblind:

_That's bad!_

I also included two mockups of potential solutions:

I don't understand how either of the above would make it _harder_ for non-colorblind users, @jdevalk.

Making things easier to distinguish for the color blind should not affect how easy it is to recognise for non-color blind users.

Simple, well-understood symbols only strengthen meaning. It may take a while to find the right icons, but that's a problem you should take on! This has been a well-documented issue for YEARS and you can solve it for many people with 15 minutes of picking dashicons and tweaking CSS.

And finally, I don't think a traffic light metaphor helps because the positioning of the lights is neither memorable nor standardized:

“When the traffic signal with three aspects is arranged horizontally or sideways, the arrangement depends on the rule of the road. In right-lane countries, the sequence is red – yellow – green. In left-lane countries, the sequence is green – yellow – red.”

[darthvader666uk]

Hi,

I just updated Wordpress SEO and in the passed all i had to do is edit the following files:

metabox-tabs.min.css
edit-page.min.css

This was ok as once I updated in the passed, I could re-upload those fiels and I could then see what alert the SEO colours gave after posting.

Now, its all changed. Can you point me in the right direction so that I can change these colurs as its impossible to tell if there is an issue or not.

Are there still plans for customisation on these colours or maybe symbols to accommodate with this?

This would then fit perfectly with the post of Accessibility Matters :)

https://yoast.com/accessibility-matters/

[mrwweb]

@darthvader666uk Just so we're all clear here, you're saying you can't use Yoast SEO out of the box because of the color issues, right?

[Rarst]

@darthvader666uk could you please open a separate issue with details on your customization needs? I wouldn't recommend editing plugin's files, but I am sure we can figure how to override CSS otherwise. :)

[darthvader666uk]

@mrwweb Yes, thats correct. Even though I can now see the new Traffic light system that is in place, all three colours are the same so when trying to diagnose and issue, I have no clue on whats going on.

@Rarst I shall open a new issues to hopefully get something in place. For now, what I have edited is:

edit-page-302.min.css:
yoast-seo-302.min.css:
edit-page.min.css:
metabox-tabs.min.css

I added a little dark red to not ok, Ok to blue and if its good its grey (as i know i dont have to touch it).

Not a perfect soluton and possibly looking back to the original way of possibly putting a symbol within the circle. Something like an X for not ok, Ok can be a dash and a tick for good. Just something that you dont have to rely on the colour.

[mrwweb]

That colorblindnerd.com link seems to no longer work. Here's a copy of that article from the Wayback Machine: https://web.archive.org/web/20141106223402/http://colourblindnerd.com/yeost-seo-wordpress

[mrwweb]

@tacoverdo @jdevalk Can you please outline what an acceptable answer would look like and what the problems are with the proposed solutions so that those of us who care about this issue can continue working towards a design solution with a realistic chance of acceptance? It seems we all agree that there is a real problem, so please let us know what the requirements are for an acceptable solution.

As it stands, assuming ~4% of the population has red-green colorblindness, that would be 40,000+ Yoast SEO users who can't or struggle to use the most-prominent feature of the plugin.

[AskKim]

I like both of those mockups above. I'm not RG colorblind but it does run in my family so several of us are. As a non-colorblind user, I think those mockups actually improve the bullets overall. It would seem that those same icons could be incorporated in the "traffic light" fairly easily although @mrwweb did not include that in his example.

[AskKim]

Please inform the customer of conversation # 99574 when this conversation has been closed.

[moorscode]

Suggested simple fix for more clarity.

Separating the scores makes it more clear that there are different levels:

Adding an identifier above each section removes all doubt about that the list represents:

[darthvader666uk]

I would prefer if there were symbols in the colurs as if you are on a different page (looking at all post etc.) then its easier to see but i do like the segregation too.

[afercia]

Would totally second the groups with titles in the second @moorscode proposal :) Just a couple of things to consider:

• these titles should be headings
• they should make sense even when read out of context, since assistive technologies allow users to "jump through" headings and landing on one of them that says just "OK" (for example) wouldn't help so much. We could also consider to use aria-label to have different visual and audible headings text.

[jdevalk]

@afercia you think the groups are actually better than changing the icons?

[afercia]

@jdevalk definitely better: headings and lists have also added semantics. At that point the colored icons would be just decorative list "bullets".

[jdevalk]

It doesn't solve the problem of the overall score bullet in the tab heading though... Have a suggestion for that?

[afercia]

The traffic light? Yep, that's an issue. Was thinking at that in the past days, maybe a change in the light shape or size (the active one bigger) or a rounded border around the active one.

[afercia]

Hm well there's also the icon in the top admin bar... at this point maybe some icons would need also a shape like the one suggested. Needs a decision :) Thinking at the traffic light (I understand it should not change so much for branding considerations) it turns on the "top" light for Good, "middle" for OK and "down" for Bad. (Edit: actually, it's the opposite!) Maybe we could use the same concept and use up arrow/dash/down arrow ? Worth noting the "checkmark" has a different meaning in some countries, e.g. Japan.

[mrwweb]

How about a progress meter? Those even have semantic meaning!

[afercia]

@mrwweb hi, there are a couple of them in the Snippet Editor, still not fully accessible see #4135. Not sure a progress bar would be a proper solution for the overall score, but certainly something to take into consideration for the future.

[jdevalk]

Progress bar doesn't really indicate which things need work directly... And I like the traffic light because of all our branding around it :)

[mrwweb]

Sorry, I meant to suggest the progress bar for the Publish box overall indicator. That's what I think of as the "Traffic light".

And regarding this:

it turns on the "top" light for Good, "middle" for OK and "down" for Bad. (Edit: actually, it's the opposite!)

That's exactly my problem with the traffic light. Not to mention that is the right order in at least a few countries! And some are sideways!

[afercia]

Side note: the traffic light with emoticons is excellent :)

[darthvader666uk]

I think the traffic light with emoticons is pretty good. I can ignore the colours and just see those faces :)

[hedgefield]

I see this issue has been dormant for a little while, so I made a mockup with the suggested smileys.

The bullets had to be made a little bigger to keep the faces readable, and even now I think they could be a tiny bit larger still. Ideally, there should also be more spacing between the individual score lines.

I also updated the orange to be a little brighter (more towards yellow), and the green a little darker, so that the contrast ratio is better (even for non-colorblind people).

I have my doubts about the phrasing of the score group titles, but this _is_ probably the most straight-forward way to communicate exactly what they mean.

[jdevalk]

With this grouping, I personally don't think the smilies add much... I also, personally, kind of dislike them :-)

The updated colors do look better, though. I understand the wording could be more nuanced but that makes me even more fearful for the translation, so let's not change that.

[hedgefield]

I've tweaked the colors a bit more, trying to find an acceptable middle ground with decent contrast for both protanopia and deuteranopia while not compromising the tones for non-colorblind people too much. It's on the edge, but @afercia and others, what do you think? Are these better?

red: #dc4000
orange: #f5c819
green: #1ebf6e

[afercia]

@hedgefield thanks for the improvements :) I'd say that it depends on the decision that will be made about the groups headings. If the headings are going to be visible, then the icons will be basically just "decorative".

Instead, the icons in the traffic light and the tabs will still be a problem. Maybe we could reiterate on those in the future, together with the metabox redesign?

P.S. for the red I'd suggest to use #dc3232 to avoid to introduce a new color.

[iamazik]

Please inform the customer of conversation # 207262 when this conversation has been closed.

[hedgefield]

Great. So, in short:

• [ ] Add the Bad, OK, Good section headings.
• [ ] Use #DC3232 for the red bullet.
• [ ] Use #F5C819 for the orange/yellow bullet.
• [ ] Use #1EBF6E for the green bullet.
• [ ] Use #CCCCCC for the grey bullet.

[darthvader666uk]

Well, if it helps I can kind of seem them a little differently. The Red being a little darker ish. Be good if it was under the headings as that would make it easier :)

[iamazik]

Please inform the customer of conversation # 213706 when this conversation has been closed.

[JulioPotier]

Hello, I'm colorblind, I see less red, I mix blue/purple, green/brown, red/green, pink/grey, blue/green, well, I'm fine but I can't design stuff ^^
So, regarding the propositions here, the best are the one with symbols.
As I said in my WordCamp Europe Sofia in 2014 talk (colors & a11y) is that you can use shapes. The less angle, the better. I mean a circle (0 angles) is perfect/ok/good, triangle (3 angles because 2 angles doesn't exist), is middle ok/can do better and square (4 angles) is not good/bad/ko.
The smileys are fine, the cross/minus/check is fine too.
The last propositions with better colors are not ok because of the context. I'll explain:
The page is good with your colors, even without because you titled the blocs with a blank line separation, so I don't care about colors anymore.
But once on another page with a single bullet, is this orange? yellow? red? green? The problem is still here.
Sometimes it's hard to explain that the problem is not the color itself, but all about context.
You have to think where these bullets are shown, are they alone or not, are they small ? near of each other? Everything counts.
I'll give you the better advice I can give when you are not CB and you need to do a better UI:
Set all your color to "gray", if you can understand the meaning of each bullet, you're good.
So in your page with titles: you're good.
In the tab, you're not, in the posts list, you're not.
This is why symbols are better.

If it's hard to do this for only 4%, why not adding an option "Colorblind mode", with this, you can show that you care about "us". I'm sure that there is many applications, games, that already care about "us" because the colors or symbols are already good, and, I don't mention that. but when there is a CB mode, I'm like "ho thank you to care!!!" and I tweet it.
See what I mean?

See you ;)

[hedgefield]

Thank you for your comments Julio! I'm pleased to let you know that in the next version of our metabox, we will indeed introduce smileys in the places where the single colors have no context. It was a problem we had also identified. I know some people are not huge fans of the smileys, especially when overused, so your suggestion of adding a colorblind mode toggle is also a really good idea, I will discuss that at the office.

[hedgefield]

I'm pleased to say that as of today, the analysis bullets have headings. https://yoast.com/yoast-seo-5-9/ We plan to give the containers themselves an overall score bullet also, which will include a symbol for the colorblind.

[darthvader666uk]

Thats amazing news @hedgefield! Its been a while since I made my little post about it :)

[CarolineGeven]

I'm closing this as we've now created subheadings with 'bad' 'improvements' and 'good' in this PR: https://github.com/Yoast/wordpress-seo/pull/8231.