microsoft / microsoft/terminal

Refine customization around text color adjustment

Open
#14,940 19 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area-Settings Help Wanted Issue-Bug Issue-Task Product-Terminal
Dominant language
C++
Stars
105k
Forks
9.6k
Avg merge
3d 17h
Merged PRs (30d)
29

Description

### Windows Terminal version

1.16.10262.0

### Windows build number

10.0.22000.0

### Other Software

Inside WSL

### Steps to reproduce

Running the following shell script:
```bash
T='●●●'
echo -e "\n 40m 41m 42m 43m\
44m 45m 46m 47m";
for FGs in ' m' ' 1m' ' 30m' '1;30m' ' 31m' '1;31m' ' 32m' \
'1;32m' ' 33m' '1;33m' ' 34m' '1;34m' ' 35m' '1;35m' \
' 36m' '1;36m' ' 37m' '1;37m';
do FG=${FGs// /}
echo -en " $FGs \033[$FG $T "
for BG in 40m 41m 42m 43m 44m 45m 46m 47m;
do echo -en "$EINS \033[$FG\033[$BG $T \033[0m";
done
```

### Expected Behavior

Colors in VS Code terminal look like this (all combinations are readable):
![image](https://user-images.githubusercontent.com/788609/222312982-0c6619f8-5e51-4459-ad36-19bd6a5967f6.png)

### Actual Behavior

In the Terminal app, things are worse:
![image](https://user-images.githubusercontent.com/788609/222313624-75d152f1-a760-4b87-86ea-e56067fae812.png)

I tried changing color schemes to no avail. Changing "Automatically adjust lightness of indistinguishable text" setting doesn't seem to have any effect either.

# 2023-03-06 UPDATE

## Investigation Into VS Code Inner Workings

The contrast adjustment in VS Code terminal is set by `terminal.integrated.minimumContrastRatio` in settings. Mentioned in the docs a11y section: [.../editor/accessibility#_terminal-accessibility](https://code.visualstudio.com/docs/editor/accessibility#_terminal-accessibility) - number between 1 and 21 with 4.5 as a default.

*Actually, makes perfect sense it being an accessibility feature. With normal vision some bg/fg combinations are annoyingly hard to process. For a person with even mild colorblindness they could be completely unreadable.*

The travel path for the minimum contrast value is:

- The settings value is sent to the `xterm.js` instance that does the terminal rendering: [vscode/.../xtermTerminal.ts:209](https://github.com/microsoft/vscode/blob/adc51fb212867182d29d154b78bdaf42489b3c4d/src/vs/workbench/contrib/terminal/browser/xterm/xtermTerminal.ts#L209);
- `xterm.js` invokes `.ensureContrastRatio` in [xterm.js/.../DomRendererRowFactory.ts:338](https://github.com/xtermjs/xterm.js/blob/4037b943b9d9b2b44ef9ab96dd09b42363c96c93/src/browser/renderer/dom/DomRendererRowFactory.ts#L338);
- Which is implemented in [Color.ts:259](https://github.com/xtermjs/xterm.js/blob/4037b943b9d9b2b44ef9ab96dd09b42363c96c93/src/common/Color.ts#L259) and performs the adjustment based on `relativeLuminance` (same file just above).

Most of the math is in there. I haven't found the place where background colors are adjusted (they are clearly darkened a bit).

## Reasons to Reuse it for the Terminal App

* Consistency with the other MS app, people that use the setting in one app may look for the same setting in the other;
* Good for a11y (the current adjustment algorithm just isn't aggressive enough, since even with normal vision it's hardly noticeable).

Also, it would be really cool to have an option for the Terminal app to outright pick up VS Code settings (color scheme, minimum contrast, font family, font size, keybindings, etc...), but that is certainly a scope creep in the context of this issue.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the ANSI foreground/background color matrix inside Windows Terminal and compare it with the VS Code behavior described. Read the referenced xterm.js files—xtermTerminal.ts, DomRendererRowFactory.ts, and Color.ts—to understand the contrast adjustment path. Done means indistinguishable combinations are adjusted more effectively and the related Terminal setting has a visible effect.

Written by the indexing model from the issue text.

Assessment

Tech stack
cpp, javascript
Domain
accessibility, cli
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.