Support min contrast ratio in canvas renderer too:

src/browser/renderer/BaseRenderLayer.ts

@@ -5,16 +5,17 @@
 
 import { IRenderDimensions, IRenderLayer } from 'browser/renderer/Types';
 import { ICellData } from 'common/Types';
-import { DEFAULT_COLOR, WHITESPACE_CELL_CHAR, WHITESPACE_CELL_CODE } from 'common/buffer/Constants';
+import { DEFAULT_COLOR, WHITESPACE_CELL_CHAR, WHITESPACE_CELL_CODE, Attributes } from 'common/buffer/Constants';
 import { IGlyphIdentifier } from 'browser/renderer/atlas/Types';
 import { DIM_OPACITY, INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
 import { BaseCharAtlas } from 'browser/renderer/atlas/BaseCharAtlas';
 import { acquireCharAtlas } from 'browser/renderer/atlas/CharAtlasCache';
 import { AttributeData } from 'common/buffer/AttributeData';
-import { IColorSet } from 'browser/Types';
+import { IColorSet, IColor } from 'browser/Types';
 import { CellData } from 'common/buffer/CellData';
 import { IBufferService, IOptionsService } from 'common/services/Services';
 import { throwIfFalsy } from 'browser/renderer/RendererUtils';
+import { toCss, ensureContrastRatioRgba } from 'browser/Color';
 
 export abstract class BaseRenderLayer implements IRenderLayer {
   private _canvas: HTMLCanvasElement;
@@ -262,13 +263,14 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param bold Whether the text is bold.
    */
   protected _drawChars(cell: ICellData, x: number, y: number): void {
+    const contrastColor = this._getContrastColor(cell);
 
     // skip cache right away if we draw in RGB
     // Note: to avoid bad runtime JoinedCellData will be skipped
     //       in the cache handler itself (atlasDidDraw == false) and
     //       fall through to uncached later down below
-    if (cell.isFgRGB() || cell.isBgRGB()) {
-      this._drawUncachedChars(cell, x, y);
+    if (contrastColor || cell.isFgRGB() || cell.isBgRGB()) {
+      this._drawUncachedChars(cell, x, y, contrastColor);
       return;
     }
 
@@ -314,13 +316,15 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param x The column to draw at.
    * @param y The row to draw at.
    */
-  private _drawUncachedChars(cell: ICellData, x: number, y: number): void {
+  private _drawUncachedChars(cell: ICellData, x: number, y: number, fgOverride?: IColor): void {
     this._ctx.save();
     this._ctx.font = this._getFont(!!cell.isBold(), !!cell.isItalic());
     this._ctx.textBaseline = 'middle';
 
     if (cell.isInverse()) {
-      if (cell.isBgDefault()) {
+      if (fgOverride) {
+        this._ctx.fillStyle = fgOverride.css;
+      } else if (cell.isBgDefault()) {
         this._ctx.fillStyle = this._colors.background.css;
       } else if (cell.isBgRGB()) {
         this._ctx.fillStyle = `rgb(${AttributeData.toColorRGB(cell.getBgColor()).join(',')})`;
@@ -332,7 +336,9 @@ export abstract class BaseRenderLayer implements IRenderLayer {
         this._ctx.fillStyle = this._colors.ansi[bg].css;
       }
     } else {
-      if (cell.isFgDefault()) {
+      if (fgOverride) {
+        this._ctx.fillStyle = fgOverride.css;
+      } else if (cell.isFgDefault()) {
         this._ctx.fillStyle = this._colors.foreground.css;
       } else if (cell.isFgRGB()) {
         this._ctx.fillStyle = `rgb(${AttributeData.toColorRGB(cell.getFgColor()).join(',')})`;
@@ -383,5 +389,88 @@ export abstract class BaseRenderLayer implements IRenderLayer {
 
     return `${fontStyle} ${fontWeight} ${this._optionsService.options.fontSize * window.devicePixelRatio}px ${this._optionsService.options.fontFamily}`;
   }
+
+  private _getContrastColor(cell: CellData): IColor | undefined {
+    if (this._optionsService.options.minimumContrastRatio === 1) {
+      return undefined;
+    }
+
+    // Try get from cache first
+    const adjustedColor = this._colors.contrastCache.getColor(cell.bg, cell.fg);
+    if (adjustedColor !== undefined) {
+      return adjustedColor || undefined;
+    }
+
+    let fgColor = cell.getFgColor();
+    let fgColorMode = cell.getFgColorMode();
+    let bgColor = cell.getBgColor();
+    let bgColorMode = cell.getBgColorMode();
+    const isInverse = !!cell.isInverse();
+    const isBold = !!cell.isInverse();
+    if (isInverse) {
+      const temp = fgColor;
+      fgColor = bgColor;
+      bgColor = temp;
+      const temp2 = fgColorMode;
+      fgColorMode = bgColorMode;
+      bgColorMode = temp2;
+    }
+
+    const bgRgba = this._resolveBackgroundRgba(bgColorMode, bgColor, isInverse);
+    const fgRgba = this._resolveForegroundRgba(fgColorMode, fgColor, isInverse, isBold);
+    const result = ensureContrastRatioRgba(bgRgba, fgRgba, this._optionsService.options.minimumContrastRatio);
+
+    if (!result) {
+      this._colors.contrastCache.setColor(cell.bg, cell.fg, null);
+      return undefined;
+    }
+
+    const color: IColor = {
+      css: toCss(
+        (result >> 24) & 0xFF,
+        (result >> 16) & 0xFF,
+        (result >> 8) & 0xFF
+      ),
+      rgba: result
+    };
+    this._colors.contrastCache.setColor(cell.bg, cell.fg, color);
+
+    return color;
+  }
+
+  private _resolveBackgroundRgba(bgColorMode: number, bgColor: number, inverse: boolean): number {
+    switch (bgColorMode) {
+      case Attributes.CM_P16:
+      case Attributes.CM_P256:
+        return this._colors.ansi[bgColor].rgba;
+      case Attributes.CM_RGB:
+        return bgColor << 8;
+      case Attributes.CM_DEFAULT:
+      default:
+        if (inverse) {
+          return this._colors.foreground.rgba;
+        }
+        return this._colors.background.rgba;
+    }
+  }
+
+  private _resolveForegroundRgba(fgColorMode: number, fgColor: number, inverse: boolean, bold: boolean): number {
+    switch (fgColorMode) {
+      case Attributes.CM_P16:
+      case Attributes.CM_P256:
+        if (this._optionsService.options.drawBoldTextInBrightColors && bold && fgColor < 8) {
+          fgColor += 8;
+        }
+        return this._colors.ansi[fgColor].rgba;
+      case Attributes.CM_RGB:
+        return fgColor << 8;
+      case Attributes.CM_DEFAULT:
+      default:
+        if (inverse) {
+          return this._colors.background.rgba;
+        }
+        return this._colors.foreground.rgba;
+    }
+  }
 }