Details component fails WCAG AA standard for colour ratio whilst on focus #944
Labels
accessibility regulations failure
Does not meet the Public Sector Accessibility Regulations (WCAG 2.2 level AA)
accessibility
Milestone
Comments
paroxp
added a commit
to alphagov/paas-admin
that referenced
this issue
Aug 7, 2018
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
added a commit
to alphagov/paas-admin
that referenced
this issue
Aug 7, 2018
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
added a commit
to alphagov/paas-admin
that referenced
this issue
Aug 8, 2018
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
added a commit
to alphagov/paas-admin
that referenced
this issue
Aug 8, 2018
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
NickColley
added
the
accessibility regulations failure
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What
I've been addressed by a user, regarding the contrast in our application where we're using the GOV.UK Frontend - Details component.
The colours are:
Background:
#ffbf47Text:
#005ea5Text on hover:
#2b8cc4Running these past snook or accessible colors service, will incline the colours are failing the
AAstandard with aYour contrast ratio: 4.07warning.Proposal from the user:
I imagine you'd need a designer to look at it or perhaps have a small chat among yourselves. But perhaps, using the purple of your palette (
#2e358b), would work fine for you? It would avoid the use ofdarken()function or setting it to black.The text was updated successfully, but these errors were encountered: