website
website copied to clipboard
greenkeeperio
[a11y] General issues
- Contrast white/green is very low making it hard to focus, unfortunately green and white is very hard to get a good contrast with.
- Footer: http://leaverou.github.io/contrast-ratio/#%23C7F2DC-on-%2300C775
- Links: http://leaverou.github.io/contrast-ratio/#%2300c775-on-white
- Font size is very small in places for example the navigation, on small viewports.
- Line height is small in places making it harder to read.
- Navigation has very small touch areas e.g.
You can see the actual padding and I've drawn a box for an example of how big the padding could be (you could use psuedo elements to increase the touch area here) (Related http://www.lukew.com/ff/entry.asp?1085)
- Animating the navigation means it's unusable for a few seconds on load, would recommend only animating the hero or setting a flag to say 'seen animation' and don't show it again to the user.
Extension for Chrome Dev tools to catch some of these automatically:
- https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en
I never got a round to thank you for this issue, you two! So thanks a lot! 😻 I feel a bit bad I didn’t get around to this previously, but I’ve done some updates to the site, and I’ve improved:
- hitbox sizes for links
- line height in paragraphs
- faster menu animations
- font sizes
I’m still not quite sure how to improve the contrast without throwing all of the colours overboard, but I’m on that :)
@espy yeah unfortunately green is very hard to contrast with white, for what it's worth it'll work on a dark background but imagine you were trying to get away from the hacker vibes ;)
Thanks for following this up 😍