Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Footer text/bg colour combination fails contrast checks at AAA #805

Closed
andymantell opened this issue Jan 6, 2022 · 2 comments · Fixed by #881
Closed

Footer text/bg colour combination fails contrast checks at AAA #805

andymantell opened this issue Jan 6, 2022 · 2 comments · Fixed by #881
Assignees

Comments

@andymantell
Copy link
Contributor

The colour combination of #D8DDE0 background and #4C6272 foreground fails AAA at small font sizes (Based on https://webaim.org/resources/contrastchecker/). This is in violation of the guidance set out in the NHS service manual.

image

image

We should consider picking a darker colour to meet the AAA requirements.

@BrieWhyatt
Copy link

BrieWhyatt commented Jan 10, 2022

NHS.UK's Information Architecture team have recently updated the footer to contain links in the same style as the rest of the site. We have also grouped the links logically, making the footer more compliant to the AA standard.
footer-post-review

However, this week, we are also iterating the footer to make the links a darker blue (#003087 - still an NHS brand guideline colour), the Crown copyright notice a black (#231F20), all with a background of pale grey (#D8DDDF).
In turn, we will feed these colour alterations into relevant components on the frontend and service manual backlogs. But, seeing as the previous footer had different colour treatments for the links, I see no objections to the colour iterations being a permanent fixture of the new footer.
AAA-footer

Using the dark blue gives the footer a colour contrast ratio of 8.6, making it AAA compliant.

@roshaanbajwa
Copy link
Collaborator

There is ongoing work to update the header and footer in the frontend library, and part of this will involve updating the footer to the 2nd iteration mentioned above by Brie. I have linked the relevant branch and the current timeline for the corresponding release is the end of August 2023.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development

Successfully merging a pull request may close this issue.

3 participants