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

light blue text in the book is awfully hard to read #138

Closed
kwstat opened this issue Apr 22, 2019 · 6 comments
Closed

light blue text in the book is awfully hard to read #138

kwstat opened this issue Apr 22, 2019 · 6 comments
Assignees

Comments

@kwstat
Copy link

kwstat commented Apr 22, 2019

See the website for the book here:
https://ropensci.github.io/dev_guide/building.html

The text has a lot of links, which currently appear as light blue text on white. The low contrast of light blue on white is really hard for some of us to read, or in certain lighting conditions. Please use dark blue links.

@maelle maelle self-assigned this Apr 23, 2019
@maelle
Copy link
Member

maelle commented Apr 23, 2019

Thanks for the feedback, and sorry about this!

Does the blue on https://devdevguide.netlify.com/ improve readability? I've used the darkest blue from https://github.com/ropensci/roweb2/blob/master/themes/ropensci/static/css/general.pcss but obviously if it's not enough I'd need to branch out.

By the way do you experience similar issues with links on https://ropensci.org/?

@maelle
Copy link
Member

maelle commented Apr 23, 2019

Other possible blue, suggested by @jeroen, GitHub's blue for links, #0366d6.

@kwstat
Copy link
Author

kwstat commented Apr 23, 2019

The minimum legibility standard for contrast is 4.5:1. Nice write-up here:
https://medium.com/@uistephen/text-contrast-for-web-pages-d685636c0749

Here's a tool for checking contrast: http://wave.webaim.org/
To use it: enter a link, then click on the "Contrast" tab in the upper left corner. Then click on one of the "ABC" icons and in the lower left part of the page is information about the contrast ratio.

The old version of the page (https://ropensci.github.io/dev_guide/building.html) had blue link contrast ratio 2.32:1.
The new version of the page (https://devdevguide.netlify.com/building.html) has a contrast ratio 3.51:1.
The ropensci.org blue text has contrast ratio 2.94:1
The github blue has a contrast ratio of 5.42:1.
Since the recommended minimum is 4.5:1, the github blue would be a good choice.

@maelle
Copy link
Member

maelle commented Apr 23, 2019

Thanks a ton for all this information!

@maelle
Copy link
Member

maelle commented Apr 23, 2019

@kwstat now things are much better in https://devdevguide.netlify.com/ We'll release it at the beginning of May cf #140, after that the main dev guide https://ropensci.github.io/dev_guide/building.html will be legible too. Sorry for the inconvenience and thanks again for your feedback and explanations!

maelle added a commit that referenced this issue Apr 23, 2019
@maelle
Copy link
Member

maelle commented Apr 23, 2019

and if we ever change the CSS again we'll keep this in mind. :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants