In this post I’ll explore that problem and talk about my approach to solving it.

My Initial Reaction

When I initially saw that syntax highlighting was causing the audit to fail, my reaction was “well, I don’t need to worry about that.”

However, as I thought about it more, I realized that there’s no reason that my code examples shouldn’t have sufficient contrast to be easily readable by users with color vision deficiency. After all, content I publish to my blog is not just for my own consumption (where I’m free to choose whatever syntax highlighting style I prefer), but rather to the internet for mass consumption amongst all its users.

As such, I set out to find a solution for the problem.

Searching For A Solution

At the time of writing this article, this blog is published with Jekyll, which uses Rouge, a ruby-based syntax highlighter that is compatible with pygments. I was personally using this stylesheet to apply the solarized-dark theme to my code snippets.

In my search for a solution for accessible stylesheets I pretty much came back empty handed. As such, I took matters into my own hand and darkened the background color to #000000 which was good enough to make my site pass the accessibility audit.

A Better Solution

I started to think about the problem more and realized it doesn’t seem to be something people are thinking about much…at least I couldn’t find much about it in my searching. As such, I began to form the idea of publishing a library of accessible stylesheets, that others can use on their websites.

Before

After

To my eye the difference is subtle, but upon close inspection it is clear that the colors in the “after” example have been lightened and stand out better against the background than those of the “before” example.