Enforce half minimum contrast ratio for dim text

Provided MCR is not too high, this ensures dim text differs from normal
text and has a reasonable difference in contrast.

Fixes #4262

src/browser/Types.d.ts

@@ -136,7 +136,10 @@ export interface IColorSet {
   selectionInactiveBackgroundTransparent: IColor;
   selectionInactiveBackgroundOpaque: IColor;
   ansi: IColor[];
+  /** Maps original colors to colors that respect minimum contrast ratio. */
   contrastCache: IColorContrastCache;
+  /** Maps original colors to colors that respect _half_ of the minimum contrast ratio. */
+  halfContrastCache: IColorContrastCache;
 }
 
 export type ReadonlyColorSet = Readonly<Omit<IColorSet, 'ansi'>> & { ansi: Readonly<Pick<IColorSet, 'ansi'>['ansi']> };

src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -14,6 +14,7 @@ import { JoinedCellData } from 'browser/services/CharacterJoinerService';
 import { excludeFromContrastRatioDemands } from 'browser/renderer/shared/RendererUtils';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { WidthCache } from 'browser/renderer/dom/WidthCache';
+import { IColorContrastCache } from 'browser/Types';
 
 
 export const enum RowCss {
@@ -444,15 +445,19 @@ export class DomRendererRowFactory {
     }
 
     // Try get from cache first, only use the cache when there are no decoration overrides
+    const cache = this._getContrastCache(cell);
     let adjustedColor: IColor | undefined | null = undefined;
     if (!bgOverride && !fgOverride) {
-      adjustedColor = this._themeService.colors.contrastCache.getColor(bg.rgba, fg.rgba);
+      adjustedColor = cache.getColor(bg.rgba, fg.rgba);
     }
 
     // Calculate and store in cache
     if (adjustedColor === undefined) {
-      adjustedColor = color.ensureContrastRatio(bgOverride || bg, fgOverride || fg, this._optionsService.rawOptions.minimumContrastRatio);
-      this._themeService.colors.contrastCache.setColor((bgOverride || bg).rgba, (fgOverride || fg).rgba, adjustedColor ?? null);
+      // Dim cells only require half the contrast, otherwise they wouldn't be distinguishable from
+      // non-dim cells
+      const ratio = this._optionsService.rawOptions.minimumContrastRatio / (cell.isDim() ? 2 : 1);
+      adjustedColor = color.ensureContrastRatio(bgOverride || bg, fgOverride || fg, ratio);
+      cache.setColor((bgOverride || bg).rgba, (fgOverride || fg).rgba, adjustedColor ?? null);
     }
 
     if (adjustedColor) {
@@ -463,6 +468,13 @@ export class DomRendererRowFactory {
     return false;
   }
 
+  private _getContrastCache(cell: ICellData): IColorContrastCache {
+    if (cell.isDim()) {
+      return this._themeService.colors.halfContrastCache;
+    }
+    return this._themeService.colors.contrastCache;
+  }
+
   private _addStyle(element: HTMLElement, style: string): void {
     element.setAttribute('style', `${element.getAttribute('style') || ''}${style};`);
   }

src/browser/renderer/shared/CharAtlasUtils.ts

@@ -24,7 +24,8 @@ export function generateConfig(deviceCellWidth: number, deviceCellHeight: number
     // For the static char atlas, we only use the first 16 colors, but we need all 256 for the
     // dynamic character atlas.
     ansi: colors.ansi.slice(),
-    contrastCache: colors.contrastCache
+    contrastCache: colors.contrastCache,
+    halfContrastCache: colors.halfContrastCache
   };
   return {
     customGlyphs: options.customGlyphs,

src/browser/renderer/shared/TextureAtlas.ts

@@ -15,6 +15,7 @@ import { FourKeyMap } from 'common/MultiKeyMap';
 import { IdleTaskQueue } from 'common/TaskQueue';
 import { IBoundingBox, ICharAtlasConfig, IRasterizedGlyph, IRequestRedrawEvent, ITextureAtlas } from 'browser/renderer/shared/Types';
 import { EventEmitter } from 'common/EventEmitter';
+import { IColorContrastCache } from 'browser/Types';
 
 /**
  * A shared object which is used to draw nothing for a particular cell.
@@ -309,8 +310,7 @@ export class TextureAtlas implements ITextureAtlas {
   }
 
   private _getForegroundColor(bg: number, bgColorMode: number, bgColor: number, fg: number, fgColorMode: number, fgColor: number, inverse: boolean, dim: boolean, bold: boolean, excludeFromContrastRatioDemands: boolean): IColor {
-    // TODO: Pass dim along to get min contrast?
-    const minimumContrastColor = this._getMinimumContrastColor(bg, bgColorMode, bgColor, fg, fgColorMode, fgColor, false, bold, excludeFromContrastRatioDemands);
+    const minimumContrastColor = this._getMinimumContrastColor(bg, bgColorMode, bgColor, fg, fgColorMode, fgColor, false, bold, dim, excludeFromContrastRatioDemands);
     if (minimumContrastColor) {
       return minimumContrastColor;
     }
@@ -385,23 +385,26 @@ export class TextureAtlas implements ITextureAtlas {
     }
   }
 
-  private _getMinimumContrastColor(bg: number, bgColorMode: number, bgColor: number, fg: number, fgColorMode: number, fgColor: number, inverse: boolean, bold: boolean, excludeFromContrastRatioDemands: boolean): IColor | undefined {
+  private _getMinimumContrastColor(bg: number, bgColorMode: number, bgColor: number, fg: number, fgColorMode: number, fgColor: number, inverse: boolean, bold: boolean, dim: boolean, excludeFromContrastRatioDemands: boolean): IColor | undefined {
     if (this._config.minimumContrastRatio === 1 || excludeFromContrastRatioDemands) {
       return undefined;
     }
 
     // Try get from cache first
-    const adjustedColor = this._config.colors.contrastCache.getColor(bg, fg);
+    const cache = this._getContrastCache(dim);
+    const adjustedColor = cache.getColor(bg, fg);
     if (adjustedColor !== undefined) {
       return adjustedColor || undefined;
     }
 
     const bgRgba = this._resolveBackgroundRgba(bgColorMode, bgColor, inverse);
     const fgRgba = this._resolveForegroundRgba(fgColorMode, fgColor, inverse, bold);
-    const result = rgba.ensureContrastRatio(bgRgba, fgRgba, this._config.minimumContrastRatio);
+    // Dim cells only require half the contrast, otherwise they wouldn't be distinguishable from
+    // non-dim cells
+    const result = rgba.ensureContrastRatio(bgRgba, fgRgba, this._config.minimumContrastRatio / (dim ? 2 : 1));
 
     if (!result) {
-      this._config.colors.contrastCache.setColor(bg, fg, null);
+      cache.setColor(bg, fg, null);
       return undefined;
     }
 
@@ -410,11 +413,18 @@ export class TextureAtlas implements ITextureAtlas {
       (result >> 16) & 0xFF,
       (result >> 8) & 0xFF
     );
-    this._config.colors.contrastCache.setColor(bg, fg, color);
+    cache.setColor(bg, fg, color);
 
     return color;
   }
 
+  private _getContrastCache(dim: boolean): IColorContrastCache {
+    if (dim) {
+      return this._config.colors.halfContrastCache;
+    }
+    return this._config.colors.contrastCache;
+  }
+
   private _drawToCache(codeOrChars: number | string, bg: number, fg: number, ext: number, restrictToCellHeight: boolean = false): IRasterizedGlyph {
     const chars = typeof codeOrChars === 'number' ? String.fromCharCode(codeOrChars) : codeOrChars;
 

src/browser/services/ThemeService.ts

@@ -81,7 +81,8 @@ export class ThemeService extends Disposable implements IThemeService {
   public serviceBrand: undefined;
 
   private _colors: IColorSet;
-  private _contrastCache: IColorContrastCache;
+  private _contrastCache: IColorContrastCache = new ColorContrastCache();
+  private _halfContrastCache: IColorContrastCache = new ColorContrastCache();
   private _restoreColors!: IRestoreColorSet;
 
   public get colors(): ReadonlyColorSet { return this._colors; }
@@ -94,7 +95,6 @@ export class ThemeService extends Disposable implements IThemeService {
   ) {
     super();
 
-    this._contrastCache = new ColorContrastCache();
     this._colors = {
       foreground: DEFAULT_FOREGROUND,
       background: DEFAULT_BACKGROUND,
@@ -106,7 +106,8 @@ export class ThemeService extends Disposable implements IThemeService {
       selectionInactiveBackgroundTransparent: DEFAULT_SELECTION,
       selectionInactiveBackgroundOpaque: color.blend(DEFAULT_BACKGROUND, DEFAULT_SELECTION),
       ansi: DEFAULT_ANSI_COLORS.slice(),
-      contrastCache: this._contrastCache
+      contrastCache: this._contrastCache,
+      halfContrastCache: this._halfContrastCache
     };
     this._updateRestoreColors();
     this._setTheme(this._optionsService.rawOptions.theme);
@@ -172,6 +173,7 @@ export class ThemeService extends Disposable implements IThemeService {
     }
     // Clear our the cache
     this._contrastCache.clear();
+    this._halfContrastCache.clear();
     this._updateRestoreColors();
     this._onChangeColors.fire(this.colors);
   }