Accessibility: a11y theme

accessibility
color constrast
highlighting
Author

Mine Çetinkaya-Rundel

Published

July 26, 2022

a11y

Quarto comes with accessible (with respect to color contrast) theme for syntax highlighting: a11y. This theme is adaptive, so it automatically switches between a dark and light mode based upon the theme of the website. It is designed to work well with sites with dark / light mode.

format:
  html:
    highlight-style: a11y
    theme:
      light: flatly
      dark: darkly

Here is a website with a light and dark theme. Click on the light/dark toggle on the top right corner of the page and observe the syntax highlighting adapt to the background color. The two highlight styles shown are a11y-dark and a11y-light.

Note

You might need to click on the hamburger menu on the top right to reveal the light/dark toggle if you’re on a narrow screen or zoomed in.

If you want to use this highlighting style but don’t want it to be adaptive, you can set highlight-style to your preference. For example, for this blog, I have it set it to a11y-dark.

Learn more