Stylesmith

Ergonomics First

Readable, comfortable themes are a design goal of Stylesmith. This page lists what the automated theme tests check for every theme, and what they don’t.

Minimum Contrast

The Challenge

Low-contrast syntax colors, like grey on grey, can be hard to read, especially in a bright room or on a dim screen.

Our Approach

Every theme is tested with the WCAG contrast formula. Editor text, terminal text and key interface text, such as the active tab, the side bar, inputs, suggestions and the selected list item, need at least 7:1. Every syntax color needs at least 4.5:1 on the editor background, on the current line and on lines Problem Lens tints, and so do line numbers, the status bar, tabs, buttons and the terminal’s ANSI colors (except the one terminal programs use as a background: black, or white in light themes). Markers such as the cursor, the focus outline and the git gutter bars need at least 3:1. In the two high-contrast themes, all text needs 7:1 and markers 4.5:1. They also use no italics, which some readers with low vision find harder to read: comments are upright, and markdown italics are underlined instead.

What It Doesn’t Cover

Contrast ratios are computed from the colors in the theme files. They don’t measure how your screen, its brightness, the light in the room or your eyesight change what you see, and a good ratio alone doesn’t make a theme comfortable for everyone.

Readable Terminal

Programs choose their own terminal colors, and a theme can’t test those. The readable terminal setting raises VS Code’s minimum terminal contrast from 4.5:1 to 7:1: VS Code then lightens or darkens any text color below that ratio against its background. It adjusts colors to a ratio; it doesn’t make every program’s output readable, and it can make colors a program uses to tell things apart look more alike. It’s on in the High Contrast and High Contrast Light presets.

Maximum Contrast

The Challenge

Some people find very high contrast, like pure white text on pure black, uncomfortable: text can seem to glow or bleed into the background.

Our Approach

In every theme except the two high-contrast ones, the tests reject pure black and pure white for the editor background and for editor text, and cap the contrast of editor text at 16:1. The current themes measure between 9.9:1 and 15.3:1.

What It Doesn’t Cover

The cap is a design choice meant to reduce glare. It isn’t proven to prevent eye strain or fatigue. If you need the most contrast, use a high-contrast theme, which has no cap.

Color-Vision Deficiencies

The Challenge

Colors that differ mainly in hue, such as red and green, can look alike to people with color blindness, for example git’s added and deleted lines, or a terminal’s red and green.

Our Approach

For each theme, the tests simulate full protanopia, deuteranopia and tritanopia (the Machado, Oliveira & Fernandes 2009 model) and require a color difference of at least 15 (CIE76 ΔE, where about 2 is barely noticeable and 15 is clearly different at a glance) between the git gutter colors for added, modified and deleted lines, between error and warning colors, and between the terminal’s red and green. Git’s changed lines also differ by shape: by default, VS Code draws added lines with a solid bar in the gutter and modified lines with a striped one.

What It Doesn’t Cover

Syntax colors aren’t compared with each other, and milder forms of color blindness and total color blindness (monochromacy) aren’t simulated. Problem Lens doesn’t rely on color alone by default: each severity has its own gutter icon shape and a label (ERR, WARN, INFO), unless you turn the gutter icons and inline messages off.