Firewall Status Page Should Use non-Red/Green Color Scheme
Created by: NickDaly
Page: https://freedombox/plinth/sys/firewall/
To support Red/Green color-blind users, we should use a different color scheme: a small number of users (1 - 3%, depending on source) have the most common type of color blindness and can't differentiate red and green. It's difficult to differentiate the statuses if you can't see the colors.
We should resolve this by switching color pallets (blue / yellow, blue / white+black, etc.) or adding additional non-color indicators, like bold or italic formatting to different statuses.
Activity
Created by: nikhilrayaprolu
Hello if so we would be changing the colours of the badges in firewall page,what would be correct combination to go with? red is standard for blocked green for enabled yellow for disabled are actually standard notations followed .can any one suggest colours that are appropriate if we change these?
-
Created by: NickDaly
There are a number of ways to correct this:
- Never use color as the only indicator, use other styling as well.
- Going by the Wikipedia page on colorblindness, I can see that red, yellow, and green all collapse into yellow (for the most common RG-colorblindness), so only one of those colors should be used.
Keeping these in mind, I suggest the following two guidelines:
- Use Yellow, Blue, and Gray. Those colors are relatively distinguishable and used widely: yellow for blocked, blue for enabled, and gray for disabled. Disabled-gray is a standard, as is replacing blue for green, when green's unavailable. Yellow-for-blocked is the only weird one, but it's a hot color and is used for warnings or callouts.
- Use normal, italicized, and bolded (and bold-italics). These are not as standard, but as long as they're used consistently and clearly, tying in with the colors, their purpose will be obvious.
If you can find a better source of ideas than my suspicions on color-theory, please use it.
-
Created by: SunilMohanAdapa
Most resources on the matter don't actually suggest changing the colors to help people with color blindness. They suggest that using these colors should not normally be a problem but when color is used to provide important information, then cues other than just color should be provided. We are clearly providing additional cue with the text. If a color blind person sees our firewall page, they will still know which is items are enabled, disabled, blocked etc. due the text. This is sufficient for conforming to WCAG 2.0. Using colors other than red/green mean that function of the color, such as attracting attention to problematic items, is diminished. This is why most accessibility compliant websites that want to attract attention to problems such as form errors don't remove red as the color but instead using other cues as well.
WCAG 2.0 suggests a minimum contrast for the foreground color to background color. Twitter's bootstrap meets the WCAG 2.0 criteria for contrast for regular text and text on menu items. However, it does not seem to meet the criteria for test that is labels like the ones we used. One area of work for us could be to change that.
-
Created by: NickDaly
Hi Sunil, thanks for pinging me on this, I'd missed pull #519. I'm installing Plinth on my XU4 now and will try pull 519 out on the system later today. After an initial review of the patch, it seems like enabled services are italicized, but other types of services and ports are not styled differently than neutral text.
I'll let you know after I try it out, I don't recall this thread well enough to remember if that's enough distinct styles. I thought we needed three indicators, not two. Unfortunately, I did not clarify that in my original post.
-
Created by: SunilMohanAdapa
On 09/05/2016 11:49 PM, Nick Daly wrote:
After an initial review of the patch, it seems like enabled services are /italicized/, but other types of services and ports are not styled differently than neutral text.
Well, after all that reading, I believe no styling is actually required for any of the elements because text label is available. Other cues are only required only if color is being used to convey the necessary information.
I'll let you know after I try it out, I don't recall this thread well enough to remember if that's enough distinct styles. I thought we needed three indicators, not two.
Sure, please let us know what you think.
Sunil
-
Created by: SunilMohanAdapa
Well, we need to reach an agreement on the differentiation required. Since we have the text and since we not using colour as the only cue, our current implementation is fine. I am closing this issue. But please feel free to reopen to add more to the discussion.