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

Redesign: change navbar color for greater contrast? #268

Closed
1 task done
Cleop opened this issue Jun 15, 2017 · 6 comments
Closed
1 task done

Redesign: change navbar color for greater contrast? #268

Cleop opened this issue Jun 15, 2017 · 6 comments
Assignees
Labels
discuss Share your constructive thoughts on how to make progress with this issue enhancement New feature or enhancement of existing functionality please-test Please test the feature in Staging Environment and confirm it's working as expected. T25m Time Estimate 25 Minutes
Milestone

Comments

@Cleop
Copy link
Member

Cleop commented Jun 15, 2017

Following @SimonLab's feedback and @nelsonic's color suggestions in: #264 (comment)

  • Add shadow to the navbar to improve contrast against page background color.

For context it's worth mentioning that @harrygfox's designs already have two variations of the navbar depending on the banner color that exists per page. A light version and a dark version. As we're reviewing the dark version, one option would be to have the light version throughout the entire site. Here are the visuals:

White
This is the white nav next to a white cover background (ignore the blue links in the navbar, they show up when you screengrab on invision)
image
Which looks like this when put next to the pages with a grey cover image:

AND/ OR

@nelsonic 's darker (near-black) suggestion

image

So do we want one color variation for the navbar or two? And do we want light or dark for these? @iteles @markwilliamfirth @nelsonic @harrygfox @SimonLab

@Cleop Cleop added discuss Share your constructive thoughts on how to make progress with this issue enhancement New feature or enhancement of existing functionality help wanted If you can help make progress with this issue, please comment! T25m Time Estimate 25 Minutes labels Jun 15, 2017
@ghost
Copy link

ghost commented Jun 15, 2017

Probably more apt to opt for a dark theme such as #403f3f

@ghost ghost closed this as completed Jun 15, 2017
@ghost ghost reopened this Jun 15, 2017
@ghost ghost assigned harrygfox Jun 15, 2017
@Cleop
Copy link
Member Author

Cleop commented Jun 19, 2017

@harrygfox would you be able to confirm which color your prefer given the feedback about the contrast of your existing design?

@harrygfox
Copy link
Member

@Cleop I've checked all the colours for AAA standard and the black on white and white on black are the best in terms of contrast ratio.
This is how I hope the menus to work and look:
https://projects.invisionapp.com/d/main#/console/11013483/240170538/inspect

@ghost ghost assigned Cleop and unassigned harrygfox Aug 23, 2017
@ghost ghost added this to the Sprint 1 milestone Aug 23, 2017
@Cleop
Copy link
Member Author

Cleop commented Sep 11, 2017

@markwilliamfirth - this issue is confused. The issue is not about the contrast of text on a background. The issue is about the colour of the dropdown menu background on top of the background of the homepage.
See the bit where contact ends and the page begins:

The designs that Harry outlined are already implemented so if that's what you want then this issue can already be closed. What remains a question is, are we happy that the menu doesn't contrast with the page it is resting on in the case of the homepage.

@Cleop Cleop assigned ghost and unassigned Cleop Sep 11, 2017
@ghost
Copy link

ghost commented Sep 11, 2017

@Cleop Harry's designs actually have some drop shadow on the menu - is it possible to add that?

screen shot 2017-09-11 at 19 08 54

@Cleop
Copy link
Member Author

Cleop commented Sep 12, 2017

image

@Cleop Cleop added the in-progress An issue or pull request that is being worked on by the assigned person label Sep 12, 2017
@Cleop Cleop assigned Cleop and unassigned ghost Sep 12, 2017
@Cleop Cleop removed the in-progress An issue or pull request that is being worked on by the assigned person label Sep 12, 2017
Cleop added a commit that referenced this issue Sep 12, 2017
@Cleop Cleop removed the help wanted If you can help make progress with this issue, please comment! label Sep 12, 2017
@Cleop Cleop mentioned this issue Sep 15, 2017
@Cleop Cleop added the please-test Please test the feature in Staging Environment and confirm it's working as expected. label Sep 15, 2017
@ghost ghost closed this as completed Sep 21, 2017
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
discuss Share your constructive thoughts on how to make progress with this issue enhancement New feature or enhancement of existing functionality please-test Please test the feature in Staging Environment and confirm it's working as expected. T25m Time Estimate 25 Minutes
Projects
None yet
Development

No branches or pull requests

2 participants