Making elm-lang.org colors a11y friendly

I ran the Chrome Lighthouse tool on the elm-lang.org website and noticed a few areas under accessibility that could be “improved” to make Lighthouse happier (and probably improve SEO).

Most changes can easily be made as PRs (adding alt tag to images and similar) however changing the contrast to make the text more readable is a bit more challenging - since this means changing the color and look.

The main sources for color I tend to go to are:

A slightly more contrasty man site could look like this:

changed the header blue from #1293D8 to #00449E 
so the contrast with white changed from 3.39 to 9.05
changed footer links gray from #bbbbbb to #777777
so the contrast with white changed from 1.92 to 4.48

Further improvements could be to remake the two graphs and use the same color scheme.

5 Likes