Make Code Demos Inclusive: Check Your VS Code Theme

2025/09/17 by Stefan Bauer - Updated: 2025/09/29

Themes in Visual Studio Code are a personal preference thing. Most developers prefer a dark theme because it is more visually appealing and allows them to code for longer. When you have a presentation, this dark theme might not be the best choice for your audience. Have you ever considered how your audience perceives it?

The good news is that Visual Studio Code has a complete built-in test suite for accessibility.

Enable Web Dev Tools in VS Code

Visual Studio Code is built on a framework named Electron. It combines Chromium for rendering with NodeJS for the backend logic.

Chromium is the core engine used in many browsers, such as Chrome, Microsoft Edge, Opera, Brave, and Vivaldi. Since the developer tools we all use and love are part of this engine. These developer tools can be enabled in VSCode, too.

To do so, navigate to Help and select from the drop-down “Toggle Developer Tools”, which will make the browser developer tools directly appear in VS Code.

Screenshot VS Code enable developer dashbaord — Right under help the developer tools can be enabled

Now you are ready to check your current theme for accessibility.

Color Contrast

The recommended way, as outlined in the Web Content Accessibility Guidelines, or short WCAG, recommends having a color contrast ratio of at least 1:4.5 to be WCAG AA or 1:7 for AAA compliance. It is not only for the web, but it is also a good recommendation for any application or electronic document.

To check the color contrast, we can use the experimental tool CSS Overview. This tool highlights contrast issues inside VS Code and your current theme.

Screenshot where to find the CSS Overview — Css overview is a great tool that captures all sort of style related informaton in visual studio code

If you have never used it before, it might be hidden behind the Kebap dots in the toolbar.

Screenshot of CSS Capture Overview — Now it is time to capture the css inside of vs code

The first step is to select the code file editor and capture the overview. This checks all the text colors and background in the main window of VS Code.

Contrast issue Overview Screenshot — Now you see the contrast issues and where they happen

Once captured, it will give you a list of contrast issues in your current theme. Clicking on one of the highlighted issues will then display a list showing exactly where those issues appear. For example, the red text on the dark background has a lower contrast ratio than recommended.
The color contrast might be right for you, but it may not be right for your audience. Contrast issues are listed if they don’t meet WCAG AA and WCAG AAA compliance.

This allows you to determine if the theme is suitable for your audience, rather than guessing.

APCA check for contrast issues

The current contrast ratio calculation has its weaknesses and has many false positives when it comes to color combinations. A good example is white text on a red background or vice versa.

Screenshot of contrast ratio calculator — What the current standard color contrast ratio reveals

How can our stop signs, which are white text on a red background, be inaccessible? Do they use a “special red” that is more accessible than pure red? Yes, maybe. The bold text in all caps and the shape of the stop signs make them more accessible to use. It is not only the formal color contrast that makes those signs accessible.

WCAG version 3 likely eliminates the requirement for color contrast based on the luminance of colors, adopting the Advanced Perceptual Contrast Algorithm (APCA) instead.

In comparrision APAC contrast ratio — Constrast ration side by side classical and apac with detailed information on typography

This new algorithm takes into account the font weight and font size, rather than just relying on the luminance colors. The graphic from before shows the exact red/white color combination. On the left, the current standard, on the right, the APCA contrast. When the text is at least 22.5px at a font weight of 400, or normal/regular, the contrast issue does not exist anymore.

Enable APCA in Developer Tools

Right now, the APAC test is marked as experimental and can be enabled via the settings.

Screenshot on how to enable APCA — Switch to the new apca settings in chromium

After enabling these settings, you need to close and reopen the developer tools to be able to capture accurate results.

APAC Contrsst Check result — Apac contrsst check result for the current vs code theme

Now we suddenly see more contrast issues than before, even though the text is larger.

One word of warning at this point. When you increase the text size in VS Code, it actually does not increase the text size that the inspector can identify. Instead, it zooms the content using the same method the browser does on a regular zoom.

To get accurate results, you have to double, or by any other factor, increase the default text size. Run the CSS Overview again, and you’ll get the color contrast that your audience perceives in your presentation.

Changing the text size in VS Code increase the accuracy in the results — Changing the text size in vs code increase the accuracy in the results

Now it shows fewer contrast issues, which gives you an indication if the theme is right for your presentation or not.

Update test result after changing the text size — With a larger font in place the result looks slightly different you could in addition to this increase the font weight in your editor

Other things to test

The developer tools provide additional tools to test your Visual Studio code. It can emulate vision deficiencies, such as color blindness and blurred vision.

Modifiy how VS Code renders — Under rendering you will find additional tools

Under “Tools”, “More Tools”, and “Rendering”, you can toggle VS Code in these states. Here are those examples.

Render Modi In VS Code — Switch how vs code renders the content

Blurred Vision

Or as I call it, “Damn I forgot my glasses again” test.

Reduced Contrast

It’s easy to fix by making the room darker, but this is what it would look like.

Protanopia (no red)

0.5% – 0.6% of people have this deficiency, while around 97% to 98% are male, and only 2% to 3% are female.

Deuternopia (no green)

No Green Test result — Green vision deficiency

Tritanopia (no blue)

No blue result — Test result without blue

Achromatopsia

… last words

The inspiration for this blog post came from a conference, where I prepared myself for the session, always using my famous Monokai theme. I have used the same theme even when Visual Studio Code was not around. I asked the guy if my code editor on the beamer looks fine. He replied, “Yeah, it looks good, but I cannot see the colors anyway because I have a red-green deficiency.”

This then got me thinking that around 8% of men, and 0.5% of women, in the population have color deficiency. Near and distance vision impairments affect around 2.2 billion people worldwide, according to the WHO.

Someone in the audience will likely struggle with the Visual Studio Code theme you consistently use in your presentations.

I still haven’t found the perfect accessible theme to use in my presentations, to have something “cool” and accessible.

White backgrounds generally have better contrast ratios, but the color contrast might be low in some instances, too, especially when the beamer shines a bright light in a usually darkened room.

While color contrast is one issue, accessibility in code presentation reaches much further. Divide your code into logical blocks and have enough space between them.

It is a wide-reaching topic, of course, but I hope that this blog post has raised your awareness. Just because you like a Visual Studio theme does not mean it is good for your audience, too. At least now you can make a fact-based decision on which theme to use for your next presentation, which includes everyone in your audience.

PS: Of course, all the shown checks here work in your browser too for your next project.