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

Add colour contrast test #374

Merged
merged 1 commit into from Jan 19, 2017
Merged

Add colour contrast test #374

merged 1 commit into from Jan 19, 2017

Conversation

@fofr
Copy link
Contributor

@fofr fofr commented Jan 18, 2017

Test that all organisation colours have a contrast ratio of 4.5 or greater against white. Error when contrast too low.

  • Protects against poor colour choices in future
  • Use sass-color-helpers to provide contrast function
    https://github.com/voxpelli/sass-color-helpers
  • Only include colour helpers when in dev, don't package with gem
  • Store sass test in same directory as generated sass test file
  • Confirms that all current colours have good contrast ratio
  • Confirms that old DEFRA colour was poor contrast ratio

Fixes #316

Example failing test:
https://travis-ci.org/alphagov/govuk_frontend_toolkit/builds/193155272

Error: Contrast ratio for department-for-environment-food-rural-affairs too low.
#00a33b on #fff has a contrast of: 3.3. Must be higher than 4.5 for WCAG AA support
        on line 10 of spec/stylesheets/_colour_contrast_spec.scss
        from line 18 of ./spec/stylesheets/test.scss

cc @robinwhittleton @nickcolley @edwardhorsford

Thanks to @voxpelli for making this easy!

Test that all organisation colours have a contrast ratio of 4.5 or greater
against white. Error when contrast too low.

* Protects against poor colour choices in future
* Use sass-color-helpers to provide contrast function
  https://github.com/voxpelli/sass-color-helpers
* Only include colour helpers when in dev, don't package with gem
* Store sass test in same directory as generated sass test file
* Confirms that all current colours have good contrast ratio
* Confirms that old DEFRA colour was poor contrast ratio

Fixes #316
@edwardhorsford
Copy link
Contributor

@edwardhorsford edwardhorsford commented Jan 18, 2017

This is really cool! Thanks @fofr!

@markhurrell
Copy link
Contributor

@markhurrell markhurrell commented Jan 19, 2017

hey @fofr this is a great idea. can we also run the contrast test against black/text colour to make sure the colour is suitable for links

@edwardhorsford
Copy link
Contributor

@edwardhorsford edwardhorsford commented Jan 19, 2017

Talking with @accessiblewebuk he points out that if you're going to use colour alone to indicate a link, it should have 3:1 against text colour.

@accessiblewebuk
Copy link
Member

@accessiblewebuk accessiblewebuk commented Jan 19, 2017

If you indicate link text by colour alone then it needs to contrast with the other text by at least 3:1 - the real difficulty is that both texts need to contrast with the background by at least 4.5:1

see https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G183

@accessiblewebuk
Copy link
Member

@accessiblewebuk accessiblewebuk commented Jan 19, 2017

You can get around the "indicating by colour alone" by making the link text bold compared to surrounding text and/or underlining it.

@markhurrell
Copy link
Contributor

@markhurrell markhurrell commented Jan 19, 2017

@accessiblewebuk true but text styles like bold and underline can be contextually inappropriate in things like long, nested navigation pages etc (which GOV.UK has quite a lot of)

as we're implementing something that gives hard yes/no for accessibility it would be good to make sure it is actually accessible for those use-cases

@fofr
Copy link
Contributor Author

@fofr fofr commented Jan 19, 2017

@markhurrell Good call on the other colours we use. I'd make that a separate PR.

@fofr
Copy link
Contributor Author

@fofr fofr commented Jan 19, 2017

@edwardhorsford @markhurrell @accessiblewebuk Want to raise an issue discussing how to do link-colour contrast checking? It's an interesting point – I'm sure some of these organisation colours, used for links, don't have a 3:1 ratio with black.

@edwardhorsford
Copy link
Contributor

@edwardhorsford edwardhorsford commented Jan 19, 2017

@markhurrell You could do it as a warn rather than error so that it doesn't give a hard no.

@accessiblewebuk
Copy link
Member

@accessiblewebuk accessiblewebuk commented Jan 19, 2017

@markhurrell - do you have some examples of different use cases? Navigation normally has other contextual information like it is in a list, or in blocks. The 3.1 is mainly to do with text links embedded in body copy. I don't know the maths but there are probably only a very narrow range of combinations of three colours that work (text, link text and background).

@nickcolley
Copy link
Contributor

@nickcolley nickcolley commented Jan 19, 2017

Looks good to me 👍

@nickcolley nickcolley merged commit d15e738 into master Jan 19, 2017
2 checks passed
2 checks passed
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
@nickcolley nickcolley deleted the sass-warn branch Jan 19, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

5 participants
You can’t perform that action at this time.