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

Improve contrast of links when focused #272

Merged
merged 1 commit into from
Mar 16, 2017
Merged

Conversation

edwardhorsford
Copy link
Contributor

@edwardhorsford edwardhorsford commented Jan 30, 2017

Fixes #264

  • Makes link text slightly darker when focused - now hits 1:4.5 contrast against yellow.

Note - I've not tested this with template itself, but the sass itself seems to work.

Before:

screen shot 2017-01-30 at 13 08 42-normal

After:

screen shot 2017-01-30 at 13 09 03-darker

@@ -60,6 +60,11 @@ a:focus {
outline: 3px solid $focus-colour;
}

/* Make links slightly darker when focused to improve contrast. */
a:link:focus {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What should be the colour when the link is visited? If there is nothing overwriting that, visited links will probably still show the lighter blue.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not proposing changing the visited colour when focused. It will stay as purple - which meets our contrast requirements.

@robinwhittleton
Copy link
Contributor

I’m happy with the first commit in this PR. The second one seems to be a dupe of #274? This should either be revised to remove the second commit, or the other PR closed (and the suggestions in it applied here).

@gemmaleigh
Copy link
Contributor

@robinwhittleton @edwardhorsford I've amended this PR, so it now only makes the one change - to make link text slightly darker when focused.

@edwardhorsford
Copy link
Contributor Author

I've updated the text of the PR to reduce the scope of what it covers.

@robinwhittleton robinwhittleton merged commit 79466a4 into master Mar 16, 2017
@robinwhittleton robinwhittleton deleted the focus-link-colour branch March 16, 2017 12:14
robinwhittleton pushed a commit that referenced this pull request Mar 16, 2017
- Fix EJS template (PR #270)
- Add `theme-color` support to make the page surround in Chrome’s tab view on Android match the black GOV.UK header (PR #278)
- Add `text-decoration-skip: ink` to all links on GOV.UK (PR #281)
- Improve contrast of links when focused (PR #272)
- Make header text colour black when focused (PR #274)
@robinwhittleton robinwhittleton mentioned this pull request Mar 16, 2017
robinwhittleton pushed a commit that referenced this pull request Mar 29, 2017
- Fix EJS template (PR #270)
- Add `theme-color` support to make the page surround in Chrome’s tab view on Android match the black GOV.UK header (PR #278)
- Add `text-decoration-skip: ink` to all links on GOV.UK (PR #281)
- Improve contrast of links when focused (PR #272)
- Make header text colour black when focused (PR #274)
robinwhittleton pushed a commit that referenced this pull request Mar 29, 2017
- Fix EJS template (PR #270)
- Add `theme-color` support to make the page surround in Chrome’s tab view on Android match the black GOV.UK header (PR #278)
- Add `text-decoration-skip: ink` to all links on GOV.UK (PR #281)
- Improve contrast of links when focused (PR #272)
- Make header text colour black when focused (PR #274)
fofr pushed a commit to alphagov/static that referenced this pull request May 5, 2017
# 0.20.0

- Fix EJS template - PR #270 -
alphagov/govuk_template#270
- Add `theme-color` support to make the page surround in Chrome’s tab
view on Android match the black GOV.UK header - PR #278 -
alphagov/govuk_template#278
- Add `text-decoration-skip: ink` to all links on GOV.UK - PR #281 -
alphagov/govuk_template#281
- Improve contrast of links when focused - PR #272 -
alphagov/govuk_template#272
- Make header text colour black when focused - PR #274 -
alphagov/govuk_template#274

# 0.19.2

- Increase skiplink colour contrast - PR #263 -
alphagov/govuk_template#263
- Fix Scala compile issues for Play template - PR #261 -
alphagov/govuk_template#261

# 0.19.1

- Have focus outline appear outside of element rather than covering it
in Safari and Chrome - PR #259 -
alphagov/govuk_template#259
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants