[a11y] General issues

[NickColley]

• 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

[varjmes]

The light blue links are also badly contrasted.

[espy]

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 :)

[NickColley]

@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 😍