Accessible syntax highlighting colour schemes for developers
Tags: a11y, opensource, ui
Published: 2024-04-19 13:54:04

_Why we designed and released two [Base16](https://github.com/chriskempson/base16) colour schemes for publishing code on the web._

When we started Measured, we knew we’d want to write things about technical aspects of our work. Inevitably, that means publishing code snippets.

We built our website to comply with [WCAG AA accessibility](https://www.w3.org/WAI/WCAG2AA-Conformance), so we needed our code snippets to comply too. That meant applying a colour scheme to snippets to comply with the WCAG requirements for contrast.

More than that, we actually needed two schemes because our website adapts to visitor system preferences for day and night modes.

When we went looking at colour schemes already out there, we ran into one of two issues:

1. They weren’t AA-compliant
2. They were visually jarring (and in a way that wouldn’t work alongside our existing brand colours)

So [Scott](https://www.linkedin.com/in/scottboyle/) set about creating them instead. We collectively decided to release them as open source in case people shared our need for AA-compliant Base16 schemes that, not to put too fine a point on it, also look quite nice.

They’re [available on GitHub](https://github.com/measuredco/base16-measured-scheme) for anyone to use. The obvious use cases are for either writing or publishing code, but the underlying schemes could be used for any lightweight web project.

## Notes on development

A few more points for anyone interested in a bit more detail:

We didn’t start from scratch. We used [Solarized](https://ethanschoonover.com/solarized/) as the basis of the project. It didn’t meet AA criteria, but it did give us a good platform to build from. From there, we essentially adapted our brand colours to meet Base16 needs.

Once we’d decided to share the schemes, we were keen to contribute to the Base16 ecosystem. To that end, we submitted pull requests to a couple of GitHub projects with mixed success. But the schemes are now included at [Tinted Theming](https://github.com/tinted-theming).

We’ve assumed this project will potentially interest developers, so we haven’t included much hand-holding in the [README](https://github.com/measuredco/base16-measured-scheme/blob/main/README.md). That said, we did want to make this work immediately useful, so the repo includes files to get the schemes working with widely-used tools. Specifically:


- [CSS and extensions](https://github.com/measuredco/base16-measured-scheme/tree/main/built/styles)
- [highlight.js](https://github.com/measuredco/base16-measured-scheme/tree/main/built/highlightjs/themes)
- [iTerm2](https://github.com/measuredco/base16-measured-scheme/tree/main/built/iterm2/itermcolors)
- [JetBrains](https://github.com/measuredco/base16-measured-scheme/tree/main/built/jetbrains/colors)
- [Visual Studio Code](https://github.com/measuredco/base16-measured-scheme/tree/main/built/vscode/themes)

We don’t plan to do more work on this project, but we welcome contributions. There is scope to support more tooling, for example.

You can start using the [Base16 Measured Scheme via the GitHub repo](https://github.com/measuredco/base16-measured-scheme).