Home Page - Medium Priority AA - Colour contrast

[gingerbenw]

This applies to all instances where these colour combinations are used. Note: the colour combinations may not be exact as these were taken from images and not a hex code.

Current Code Ref(s):
Background: #DDA63A Foreground: #FFFFFF
Background: #4C9F38 Foreground: #FFFFFF
Background: #FF3A21 Foreground: #FFFFFF
Background: #26BDE2 Foreground: #FFFFFF
Background: #FCC30B Foreground: #FFFFFF Background: #F86724 Foreground: #FFFFFF Background: #FDA93F Foreground: #FFFFFF Background: #BF8B2E Foreground: #FFFFFF
Background: #0A97D9 Foreground: #FFFFFF
Background: #56C02B Foreground: #FFFFFF

Solution: As far as contrast ratio is concerned, it must at least be:
• if text is not bold and its size is less than 18pt: 4.5:1 for AA level, 7:1 for AAA level; • if text is not bold and its size is at least 18pt: 3:1 for AA level, 4.5:1 for AAA level; • if text is bold and its size is less than 14pt: 4.5:1 for AA level, 7:1 for AAA level; • if text is bold and its size is at least 14pt: 3:1 for AA level, 4.5:1 for AAA level

[AnnCorp]

@gingerbenw @dougmet just discussed this issue in our team. Before actioning any changes for colours that fail contrast test (10 out of 17 of the icons), keen to have something that would show what the colour is now and how much would have to tweak it to make it pass - trying to understand here how much change is required and so how far would we be diverging from the global goals branding. Will make judgement call then if we change the colours and/or discuss further with the keepers of the branding.

[gingerbenw]

Please see the following screenshots for the accessible images.

Each of these achieves a ratio of 4.5:1, achieving a AA rating in all situations, and a AAA in 2/4

[gingerbenw]

2, 7 and 11 being the most offensive changes in my opinion.

[dougmet]

yes that's lots of different shades of brown. Thanks @gingerbenw this is really useful

[AnnCorp]

@gingerbenw great for me to have these ready for chat with the big boss tomorrow - thank you. Will feedback after meeting....

[AnnCorp]

The official SDG Icons (and other branding logos) are found here: http://www.un.org/sustainabledevelopment/news/communications-material/ @gingerbenw Before we get something drafted to the UN re icons and accessibility, please could we just doublecheck that we have exactly the icons/colours as supplied by them. Thank you!

[AnnCorp]

Guidance Ben is looking at http://www.un.org/sustainabledevelopment/wp-content/uploads/2016/10/UN-Guidelines-for-Use-of-SDG-logo-and-17-icons.October-2016.pdf

[gingerbenw]

Taken from Page 75, final page of the document.

FYI: The colour test I took this morning was taken on a different screen and was incorrect. I have re-taken the HEX values and they all match the UN branding correctly

[gingerbenw]

We require an accurate list of where UN ones fail or pass and what the ratios are.

[AnnCorp]

Had sesh with Deb Roberts at Digital Accessibility Centre (DAC) - sharing here what we discussed. Could have some form of style changer button at the top of all pages that allows the user to change the coloured icons into black and white version. DAC website http://digitalaccessibilitycentre.org/ has buttons for changing font/backgrounds. This could then change the icons on the home page, the reporting status page and poss the goals and indicator page too (the sizes are bigger on goals/indicator page so may not fail contrast test - would we want to be consistent?). @sporter @gingerbenw - pls could you give me a sense of how difficult this would be and estimate how long could take. There will be other tweaks that could help re this issue as would be adding more text onto pages that is currently just appearing within the icon eg where have a goal title have 'Goal x - ,goal title.' so explicitly state the goal number. I'll raise separate tickets for these.

[gingerbenw]

would definitely want to be consistent - if we're changing to high contrast in one location we should do it across the board.

I think this could be done by changing the loaded stylesheet with JavaScript - but I'd need a hand with getting it to stay when changing pages. @shaneporter do you know if there would be a better way to do this?

[shaneporter]

Yes, I've done this kind of thing in the past. It needs JavaScript and cookies, and I can lift a script I did for another site.

Does the site currently have a cookies explanation, because it uses them for Google Analytics?

The images are src attributes, so a hybrid stylesheet/image source solution will need to be created. Aside from the tweaks for the stylesheet, the switching mechanism should be no more than a couple of hours of work.

[shaneporter]

So essentially, is this a 'high contrast'/'default' version switcher, which switches the Goal images (colour to b&w) and the stylesheet?

@gingerbenw - would you like me to tackle the switcher/cookie part? I can create a branch and we can both work off it if you like. I have a script that's ready to go :smile:

[gingerbenw]

yes please @shaneporter , that would be great!

[gingerbenw]

Update:

[AnnCorp]

@gingerbenw is this one in 'Review' waiting for one of Mango team to review then push through or are you after comments from Max and I yet?

[gingerbenw]

I would be happy with either! It hasn't been pushed through to develop yet though.

[AnnCorp]

@gingerbenw just one comment re position of the buttons to switch between default and high contrast. Instead of them floating on their own row, could they instead sit in the white space between the SDGs logo and the top level menu items?

[shaneporter]

See #1931.

[AnnCorp]

No further changes from our side so assuming ok to close. Exploring getting a retest from DAC and would raise new tickets for anything they spot.