Change copy on front pages and about page

[ajparsons]

This PR does the following quick changes:

• A quick change to simplify the home page copy
• A quick fix for colour contrast on homepage
• Placeholder text for Welsh Parliament (given about page talks about "across all parliaments" and this will be true soon).
• A new version of the about page.

My general approach here is to make an improvement we can come back to later rather than trying to get it perfect now.

Questions:

• @MyfanwyNixon : This copy look ok enough? (with a view we'll want to come back and change later in the year as we get the repowering democracy work up).
• @zarino: Can you live with this as a temporary approach to the contrast issue (a lighter green background). Would still love a proper pass (https://github.com/mysociety/Design-Internal-tasks/issues/7) at some point given there are common problems across services, but also would prefer an imperfect solution sooner. (A full pass also raises questions about buttons, the link blue, etc).
• @dracos : Tagging if you have any comments/objections.

[MyfanwyNixon]

Copy looks fine to me except:

• On the About page, I'd not capitalise 'parliamentary'
• On the 'About mySociety' page I'd not capitalise 'charity'
• In fact that sentence has a typo/mashed up wording in it. I'd change this to 'TheyWorkForYou is run by mySociety, a UK charity that puts more power in more people's hands through the use of digital tools and data.'
• 'The Welsh Government is' rather than 'are'

On an entirely personal preference- and I am not a designer - but that light green rather jars for me.

[ajparsons]

Those changes made.

On an entirely personal preference- and I am not a designer - but that light green rather jars for me.

I think it might work a bit better when the white is visible either side (but also it's not ideal!). I'm not opposed to splitting it out as a problem if it becomes a delay but I really don't like the main copy on the homepage of a core service being hard to read, and want a fix (and would personally accept a slightly worse design to improve readability).

[dracos]

Probably missed something, but keeping the same green and changing from white to black passes colour contrast check I've just tried? https://webaim.org/resources/contrastchecker/?fcolor=000000&bcolor=62B356

[lucascumsille]

@dracos If we are aiming for a WCAG AAA then we would need to darken the black that we are currently using(#33333) in order to keep the current green on the live website.

[lucascumsille]

Agree with Myf not a huge fan of the green in the hero section as well.

• For simplicity we could just go for keeping the current green and darken the black.

• Other solution could be to add a sort of gradient to the hero section so it looks more interesting:

  

• Add a background-colour to the hero__site-intro__wrap so it's fully legible

  

Let me know if any of this sounds good and I can add a commit.

[zarino]

Given #000000 text on the existing #62b356 passes WCAG AA, and we’re after the quickest, simplest fix, I’d go with that.

[ajparsons]

Happy to go with that.

Part of the reason I'm being annoying on the background colour is one of my vision difficulties seems to mean that level of contrast isn't quite enough when there's also a white background on the page (I find it absolutely fine when I use that green all over the page and use black text).

This I find fine:

This I find less clear, and that my eye is being drawn off in both directions:

Whereas lightening the green fixes that for me. I don't think the standards in this case are picking up the problem I have, so favour even stronger contrasts where possible. I do understand this is a problem that other people literally cannot see though, but I don't think I'm alone in this respect (seems similar to the phantom lines between black text on white background effect).

[zarino]

Yeah, TBH I find the black on green quite low contrast too, even though the WCAG formula is fine with it. These "formula says yes, humans say no" perceptual differences are one of the reasons the (still in draft) WCAG 3 uses a totally different contrast measurement process.

In general I think our rainbow colours are lovely, but we need to come up with some better way of using them on our sites, than as a background for headers and interactive elements, because no matter what colour you lay on top of them (pure black or pure white) the contrast is always rubbish. But that’s a much bigger issue.