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.

Sign up for GitHub

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

Jump to bottom

Content within the notification banner uses the default user-agent text colour #2037

Closed
36degrees opened this issue Nov 25, 2020 · 1 comment · Fixed by #2036
Closed

Content within the notification banner uses the default user-agent text colour #2037

36degrees opened this issue Nov 25, 2020 · 1 comment · Fixed by #2036
Assignees
@36degrees
Labels
accessibility 🐛 bug Something isn't working the way it should (including incorrect wording in documentation) notification banner
Milestone
v3.10.1

Comments

@36degrees
Copy link
Contributor

36degrees commented Nov 25, 2020 •
edited
Loading

Description of the issue

The notification banner content currently uses the user agent default text colour.

This means that for users who have not changed their user agent default text colour, the text will be true black (#000000) rather than the ‘GOV.UK’ black we specify in the colour palette (#0b0c0c).

It also means that if a user has changed their default text colour, but has not chosen to override colours, depending on the user’s prefered colour scheme the text may have low contrast or be invisible.

As I understand it, this is as a ‘failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa’.

Steps to reproduce the issue

For example, my Firefox instance is configured to use white text on a blue background:

Firefox colour preferences, with 'Text' set to white, 'Background' set to blue, and Unvisited/Visited links set to yellow, and 'Override the colors specified by the page with your selections above' set to 'Never'

Actual vs expected behaviour

The notification banner is therefore white-on-white, and thus invisible:

The notification banner showing invisible text

Rather than:

The fixed notification banner with visible text
@36degrees 36degrees added 🐛 bug Something isn't working the way it should (including incorrect wording in documentation) accessibility notification banner labels Nov 25, 2020
@36degrees 36degrees mentioned this issue Nov 25, 2020
Merged
@36degrees 36degrees self-assigned this Nov 25, 2020
@36degrees 36degrees added this to the [NEXT] milestone Nov 25, 2020
@36degrees
Copy link
Contributor Author

This is tied into #1772 – if a user is applying govuk-template__body to the <body> class then we set a background colour but not a foreground colour, so this is really that issue propagating down to the component.

If the user is not using our govuk-template__body then there's a reasonable chance that they're setting both the background and foreground colours on the <body> in which case this issue would not affect them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@36degrees 36degrees

Labels
accessibility 🐛 bug Something isn't working the way it should (including incorrect wording in documentation) notification banner
Projects
GOV.UK Design System cycle board
Archived in project
Milestone
v3.10.1
1 participant
@36degrees