search

plone / ploneorg.core

Core policy package of the plone.org site project.
http://plone.org
Other
7 stars 14 forks source link

Adjust the red hue buttons .btn-prime #147

Open pigeonflight opened 8 years ago

pigeonflight commented 8 years ago

Before

The current red hue used for .btn-prime is a bit too jarring on the eyes. before

After

This can be adjusted by borrowing the shade from the .navbar-default class and adjusting it to a red hue. The result is a less jarring red (#B60042) that still serves well as a call to action/highlight colour.

after

gforcada commented 8 years ago

@pigeonflight maybe @polyester has a saying on accessibility with this color change... you could create a pull request on https://github.com/plone/ploneorg.theme though :-)

pigeonflight commented 8 years ago

Thanks will listen out for feedback from @polyester while taking a look at the theme.

tkimnguyen commented 8 years ago

@RobZoneNet and I made that change because the earlier shade failed accessibility tests for contrast.

pigeonflight commented 8 years ago

@tkimnguyen just tested my proposed colour with http://wave.webaim.org/ and it looks like it passes for contrast.

polyester commented 8 years ago

@pigeonflight sorry, but #B60042 does not pass. Note that the wave toolbar is notoriously NOT correct on contrast checking; if you put in the background color and foreground color directly it will tell you it does not pass, but it really is bad at looking at the whole page at once.

A much better tool to check is https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker, it does a much better job.

pigeonflight commented 8 years ago

@polyester, @tkimnguyen, I've presumptuously reopened this ticket, based on further investigation. Pardon my insistence.

I decided to check the authority on WCAG and colour contrast, so I went straight to the source, the W3 page entitled "G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text" https://www.w3.org/TR/WCAG20-TECHS/G18.html

W3 G18 site fails contrast test (or does it?)

It made me wonder if we may be measuring the wrong things. It seems to focous solely on contrast ratios between text and background colours NOT between two adjacent colours used on the site. To further demonstrate the point, I did a contrast check using two adjacent colours that they used on the very same page describing the recommendation. Here's the result (if it were for things other than text then this would demonstrate the page with the standards failing):

image )

Passing test with #B60042 button and white text

And here's the contrast test for the suggested #B60042 background with white text (which I believe is the contrast that we should be worrying about). image

If we aren't looking at text on background, then the Plone blues fail the contrast test also

If we wanted to be consistent, then we would need to change the Plone blues also. This is what made me wonder even more, I'm strongly inclined to believe that this is really about text on background and little else. image

Isn't this whole contrast thing for those who are colour blind?

I decided to do one more test. My understanding is that the contrast checking is really to ensure that those who are colour blind can discern important things on the site. So I wanted to know if #B60042 with white text on top might be a problem for the colour blind. So I used an online colour blindness simulator http://www.color-blindness.com/coblis/coblis.html.

It seems that for all categories of colour blindness, at least those represented by the simulator, it seems to work well. See results below:

colour-blind-test

polyester commented 8 years ago

The reason why I think here the button color itself should be checked against the background blue, is that the fact that it is a button carries semantic meaning here. It gives a clue it is a link.

If we decide it is not, and the button color is purely decorative, we would have to underline the text on the button (because you have to indicate it is a link), which would be really ugly, and which I would be reluctant to apply without further discussion.

As most times, WCAG 2.0 leaves lots of room for interpretation, unfortunately

pigeonflight commented 8 years ago

I think we're on the same page regarding the semantic meaning of the button. I think we also agree that the WCAG guidelines on contrast do not address adjacent colours and exist to ensure readability of text. Where we most likely disagree is whether the proposed change does cancel the button's utility.

As you have suggested the WCAG 2.0 guidelines (and they are guidelines) are definitely not explicit about this scenario. If this is a standard that the Plone project would like to introduce then it may be valuable to introduce the requirement of a 4.5:1 contrast ratio where ever we have semantic elements interacting with backgrounds.

To further quote from the WCAG standard as it regards visual contrast (https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)

The intent of this Success Criterion is to provide enough contrast between text and its background so that it can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology). For people without color deficiencies, hue and saturation have minimal or no effect on legibility as assessed by reading performance (Knoblauch et al., 1991).

More generally I've distilled the underlying question for investigation as follows:

Like text on a background, does a button (or similar semantic element) lose its semantic effectiveness if it has a contrast ratio less than 4.5:1?

If we agree that the answer to the proposed question is yes, then we should make adjustments to remedy other scenarios where the Plone site breeches the 4.5:1 benchmark.

Here are two situations where we ignored the 4.5:1 contrast ratio for semantic elements (the search and login icons only violate the ratio on smaller screens BTW): image

Overlooking the ridiculous lengths I've gone to press home my point I would like to advocate that we not become so rigid about colour contrast that we lose sight of good design. I think this is even more important when the issue being discussed is not explicitly addressed by the WCAG guidelines. While I think the proposed red is more pleasant than what is currently there, I'm well aware that taste varies....

the bottom line for me is:

  1. We should have clear and consistent guidelines but allow some flexibility within reason.
  2. Without compromising accessibility, there's a great value in maintaining a good design aesthetic.

Finally... While I do have some discomfort (very, very little), I am willing to tolerate the current button colour and it will not be an obstacle to my involvement in the community :)

RobZoneNet commented 8 years ago

I agree with Paul here 100%. If we are claiming we are accessible then we should be on our main website. The colors the original designer picked looked so awesome to my eyes. But thats my eyes and I am not color blind.

If we can find a better color that is great. Let's do it. It can't be that red and white though.

The search and login icons appear to be fine for WCAG 2.0 AA but not WCAG 2.0 AAA. AA is the standard.

As far as the green color that is there. I didn't pick that. I changed it to a color and someone came and changed it. Open source :)

With all that being said it seems in my tests that #B60042 is fine for WCAG 2.0 AA and not AAA. :)

On Thu, May 19, 2016 at 9:48 PM, David Bain notifications@github.com wrote:

I think we're on the same page regarding the semantic meaning of the button. Where we most likely disagree is whether the proposed change does cancel the button's utility.

As you have suggested the WCAG 2.0 guidelines (and they are guidelines) are definitely not explicit about this scenario. If this is a standard that the Plone project would like to introduce then it may be valuable to introduce the requirement of a 4.5:1 contrast ratio where ever we have semantic elements interacting with backgrounds.

More generally I've distilled the underlying question for investigation as follows:

Like text on a background, does a button (or similar semantic element) lose its effectiveness if it has a contrast ratio less than 4.5:1?

If we agree that the answer to the question is yes, then we should make adjustments to remedy other scenarios where we breech the 4.5:1 standard.

Here are two situations where we ignored the 4.5:1 contrast ratio for semantic elements (the search and login icons only violate the ratio on smaller screens BTW): [image: image] https://cloud.githubusercontent.com/assets/31827/15414381/c6eec390-1dff-11e6-9ea8-d52d2ed36932.png

So I'm being a bit "tongue in cheek" and I would hope that we don't become this rigid about colour contrast at the expense of good design. I think the proposed red is more pleasant than what is currently there. I'm well aware that taste varies.... the bottom line for me is:

  1. We should have clear and consistent guidelines but allow some flexibility within reason.
  2. Without compromising accessibility, there's a great value in maintaining a good design aesthetic.

Finally... While I do have some discomfort (very, very little), I am willing to tolerate the current button colour and it will not be an obstacle to my involvement in the community :)

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/plone/ploneorg.core/issues/147#issuecomment-220497735

Rob Porter http://robzone.net/

RobZoneNet commented 8 years ago

AA = Contrast ratio of at least 4.5:1 between background and foreground. 3:1 for large text (over 18 point or 14 point bold)

AAA = Contrast ratio of at least 7:1 between background and foreground. 4.5:1 for large text (over 18 point or 14 point bold)

On Thu, May 19, 2016 at 11:02 PM, Rob Porter robzonenet@gmail.com wrote:

I agree with Paul here 100%. If we are claiming we are accessible then we should be on our main website. The colors the original designer picked looked so awesome to my eyes. But thats my eyes and I am not color blind.

If we can find a better color that is great. Let's do it. It can't be that red and white though.

The search and login icons appear to be fine for WCAG 2.0 AA but not WCAG 2.0 AAA. AA is the standard.

As far as the green color that is there. I didn't pick that. I changed it to a color and someone came and changed it. Open source :)

With all that being said it seems in my tests that #B60042 is fine for WCAG 2.0 AA and not AAA. :)

On Thu, May 19, 2016 at 9:48 PM, David Bain notifications@github.com wrote:

I think we're on the same page regarding the semantic meaning of the button. Where we most likely disagree is whether the proposed change does cancel the button's utility.

As you have suggested the WCAG 2.0 guidelines (and they are guidelines) are definitely not explicit about this scenario. If this is a standard that the Plone project would like to introduce then it may be valuable to introduce the requirement of a 4.5:1 contrast ratio where ever we have semantic elements interacting with backgrounds.

More generally I've distilled the underlying question for investigation as follows:

Like text on a background, does a button (or similar semantic element) lose its effectiveness if it has a contrast ratio less than 4.5:1?

If we agree that the answer to the question is yes, then we should make adjustments to remedy other scenarios where we breech the 4.5:1 standard.

Here are two situations where we ignored the 4.5:1 contrast ratio for semantic elements (the search and login icons only violate the ratio on smaller screens BTW): [image: image] https://cloud.githubusercontent.com/assets/31827/15414381/c6eec390-1dff-11e6-9ea8-d52d2ed36932.png

So I'm being a bit "tongue in cheek" and I would hope that we don't become this rigid about colour contrast at the expense of good design. I think the proposed red is more pleasant than what is currently there. I'm well aware that taste varies.... the bottom line for me is:

  1. We should have clear and consistent guidelines but allow some flexibility within reason.
  2. Without compromising accessibility, there's a great value in maintaining a good design aesthetic.

Finally... While I do have some discomfort (very, very little), I am willing to tolerate the current button colour and it will not be an obstacle to my involvement in the community :)

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/plone/ploneorg.core/issues/147#issuecomment-220497735

Rob Porter http://robzone.net/

Rob Porter http://robzone.net/

pigeonflight commented 8 years ago

@RobZoneNet this is important additional context. I wasn't paying attention to the difference between the AA and AAA standard.

polyester commented 8 years ago

we're officially only striving for AA.

AAA is entirely constructed from "unobtainium", the hardest material in the known universe.

RobZoneNet commented 8 years ago

I totally agree that it is “unobtainium” :)

On May 20, 2016, at 9:59 AM, Paul Roeland notifications@github.com wrote:

we're officially only striving for AA.

AAA is entirely constructed from "unobtainium", the hardest material in the known universe.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/plone/ploneorg.core/issues/147#issuecomment-220613122

pigeonflight commented 8 years ago

lol! @ the "unobtainium" comment.