Fix contrast issue #84
Conversation
There was a problem hiding this comment.
Nice you've prioritised fixing this fast. :) I would say with the Design System, although we're using it, it's not specifically aimed at us, so we shouldn't let it block us from things. It is good to check though we're not duplicating work.
I'm not entirely sure about the black text, as I think we're losing some of the visual meaning of the highlights. I found it a bit jarring when I looked at it, as it can make it seem as if the text has switched to not longer being a link. Making the text black like all the non-link text might accidentally be conferring a meaning we don't want to this text.
We don't currently have a blue dark enough from the palette of colours on the design system, but we could add our own darker blue.
I've taken screenshots:
Original low contrast text:
Black text:
Proposed blue text #003A66 - This colour exceeds the WCAG 2 AA standard and also reaches WCAG 2 AAA standard:
src/layouts/govuk.screen.scss
Outdated
| @@ -17,6 +17,8 @@ | |||
|
|
|||
| @import '../components/statements/statements'; | |||
|
|
|||
| @import './tmp'; | |||
There was a problem hiding this comment.
I think we should call this colour contrast so we don't forget what it is. In my experience, temporary things often aren't very temporary.
|
Nice touch, love it. Id be vary of adding new colours to the palette though. Before I go ahead changing it, don't you think we should stick to "3 colour" rule? :D Happy either way. |
|
I think the three colour rule came from consolidating colours, and at one point there were more colours. I think too, that patterns are meant to evolve and the current ones aren't meeting our needs. If we call the colour variable something sensible and we have the explanation next to it, it should be okay. |
paroxp
force-pushed
the
fix-contrast-issue
branch
from
ce1fce4 to
1792b44
Compare
|
Addressed. I didn't make it a variable, as I hear naming things makes it harder to get rid of the thing. People get attached and stuff. |
|
Haha, I think naming it would be better as otherwise we are more likely to end up with arbitrary colours. |
There is an issue, where all elements provided by the govuk-frontend will have a yellow background set on :focus. It's particularly affecting links, buttons and summary boxes. These elements also have a blue text in them, which could cause difficulty to our users when it comes to reading the content. It means we don't meet the required WCAG 2 AA standard [1]. Design system team thinks the roll out may take a long time, due to the nature of it being used in the wide government and have no issues with us overriding it with the provided black colour. This is only a temporary solution and should be reverted back once the issue upstream is resolved. [2] [1]: https://snook.ca/technical/colour_contrast/colour.html#fg=005EA5,bg=FFBF47 [2]: alphagov/govuk-frontend#944
paroxp
force-pushed
the
fix-contrast-issue
branch
from
1792b44 to
6a007a7
Compare
|
Fine. Readability - I'm all up for it. |
|
Thanks :). |
What
There is an issue, where all elements provided by the govuk-frontend will
have a yellow background set on :focus. It's particularly affecting links,
buttons and summary boxes. These elements also have a blue text in them,
which could cause difficulty to our users when it comes to reading the
content. It means we don't meet the required WCAG 2 AA standard 1.
Design system team thinks the roll out may take a long time, due to the
nature of it being used in the wide government and have no issues with
us overriding it with the provided black colour.
This is only a temporary solution and should be reverted back once the
issue upstream is resolved. 2
How to review