I use Prism for syntax highlighting on my blog. More specifically, I use the syntax highlighting plugin for Eleventy, meaning there's no client-side JavaScript at all. But I've always wondered how accessible the default themes for Prism are.

I was delighted to learn that Eric Bailey, the renowned accessibility expert, has created a set of accessible syntax highlighting themes! The light theme is WCAG AA compliant for colour contrast, while the dark theme is WCAG AAA compliant. Both themes have enhanced support for Windows High Contrast Mode.

I switched to Eric's theme over the weekend; you can see it in action below. The version you see depends on your system preferences.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible syntax highlighting</title>
<style>
body {
width: 88%;
max-width: 40em;
margin: 1em auto;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Accessible syntax highlighting</h1>
<script>
console.log('Accessible syntax highlighting');
</script>
</body>
</html>