diff --git a/addons/xterm-addon-webgl/src/WebglRenderer.api.ts b/addons/xterm-addon-webgl/src/WebglRenderer.api.ts
index 556061e76..18449e8ae 100644
--- a/addons/xterm-addon-webgl/src/WebglRenderer.api.ts
+++ b/addons/xterm-addon-webgl/src/WebglRenderer.api.ts
@@ -53,6 +53,32 @@ describe.only('WebGL Renderer Integration Tests', function(): void {
       await pollFor(page, () => getCellColor(8, 1), [22, 23, 24, 255]);
     });
 
+    it('foreground 0-7 drawBoldTextInBrightColors', async () => {
+      const theme: ITheme = {
+        brightBlack: '#010203',
+        brightRed: '#040506',
+        brightGreen: '#070809',
+        brightYellow: '#0a0b0c',
+        brightBlue: '#0d0e0f',
+        brightMagenta: '#101112',
+        brightCyan: '#131415',
+        brightWhite: '#161718'
+      };
+      await page.evaluate(`
+        window.term.setOption('theme', ${JSON.stringify(theme)});
+        window.term.setOption('drawBoldTextInBrightColors', true);
+      `);
+      await writeSync(`\\x1b[1;30m█\\x1b[1;31m█\\x1b[1;32m█\\x1b[1;33m█\\x1b[1;34m█\\x1b[1;35m█\\x1b[1;36m█\\x1b[1;37m█`);
+      await pollFor(page, () => getCellColor(1, 1), [1, 2, 3, 255]);
+      await pollFor(page, () => getCellColor(2, 1), [4, 5, 6, 255]);
+      await pollFor(page, () => getCellColor(3, 1), [7, 8, 9, 255]);
+      await pollFor(page, () => getCellColor(4, 1), [10, 11, 12, 255]);
+      await pollFor(page, () => getCellColor(5, 1), [13, 14, 15, 255]);
+      await pollFor(page, () => getCellColor(6, 1), [16, 17, 18, 255]);
+      await pollFor(page, () => getCellColor(7, 1), [19, 20, 21, 255]);
+      await pollFor(page, () => getCellColor(8, 1), [22, 23, 24, 255]);
+    });
+
     it('background 0-15', async () => {
       const theme: ITheme = {
         black: '#010203',
@@ -393,7 +419,6 @@ describe.only('WebGL Renderer Integration Tests', function(): void {
     });
 
     it('foreground true color red inverse', async function(): Promise<void> {
-      this.timeout(60000);
       let data = '';
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
diff --git a/addons/xterm-addon-webgl/src/atlas/CharAtlasUtils.ts b/addons/xterm-addon-webgl/src/atlas/CharAtlasUtils.ts
index 03867b410..ec7d9a7e8 100644
--- a/addons/xterm-addon-webgl/src/atlas/CharAtlasUtils.ts
+++ b/addons/xterm-addon-webgl/src/atlas/CharAtlasUtils.ts
@@ -35,6 +35,7 @@ export function generateConfig(scaledCharWidth: number, scaledCharHeight: number
     fontWeight: terminal.getOption('fontWeight') as FontWeight,
     fontWeightBold: terminal.getOption('fontWeightBold') as FontWeight,
     allowTransparency: terminal.getOption('allowTransparency'),
+    drawBoldTextInBrightColors: terminal.getOption('drawBoldTextInBrightColors'),
     colors: clonedColors
   };
 }
diff --git a/addons/xterm-addon-webgl/src/atlas/Types.d.ts b/addons/xterm-addon-webgl/src/atlas/Types.d.ts
index 1de843e08..5b96adb06 100644
--- a/addons/xterm-addon-webgl/src/atlas/Types.d.ts
+++ b/addons/xterm-addon-webgl/src/atlas/Types.d.ts
@@ -25,5 +25,6 @@ export interface ICharAtlasConfig {
   scaledCharWidth: number;
   scaledCharHeight: number;
   allowTransparency: boolean;
+  drawBoldTextInBrightColors: boolean;
   colors: IColorSet;
 }
diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
index b4d3f822f..6325ca920 100644
--- a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
+++ b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
@@ -68,7 +68,10 @@ export class WebglCharAtlas implements IDisposable {
 
   private _workBoundingBox: IBoundingBox = { top: 0, left: 0, bottom: 0, right: 0 };
 
-  constructor(document: Document, private _config: ICharAtlasConfig) {
+  constructor(
+    document: Document,
+    private _config: ICharAtlasConfig
+  ) {
     this.cacheCanvas = document.createElement('canvas');
     this.cacheCanvas.width = TEXTURE_WIDTH;
     this.cacheCanvas.height = TEXTURE_HEIGHT;
@@ -204,10 +207,13 @@ export class WebglCharAtlas implements IDisposable {
     }
   }
 
-  private _getForegroundCss(fgColorMode: number, fgColor: number, inverse: boolean): string {
+  private _getForegroundCss(fgColorMode: number, fgColor: number, inverse: boolean, bold: boolean): string {
     switch (fgColorMode) {
       case Attributes.CM_P16:
       case Attributes.CM_P256:
+        if (this._config.drawBoldTextInBrightColors && bold && fgColor < 8) {
+          fgColor += 8;
+        }
         return this._getColorFromAnsiIndex(fgColor).css;
       case Attributes.CM_RGB:
         const arr = AttributeData.toColorRGB(fgColor);
@@ -248,12 +254,6 @@ export class WebglCharAtlas implements IDisposable {
       bgColorMode = temp2;
     }
 
-    // TODO: Pass drawBoldTextInBrightColors through
-    // Apply drawBoldTextInBrightColors
-    // if (terminal.options.drawBoldTextInBrightColors && this._workCell.isBold() && fg & FgFlags.BOLD && this._workCell.getFgColor() < 8) {
-    //   fg += 8;
-    // }
-
     // draw the background
     const backgroundColor = this._getBackgroundColor(bgColorMode, bgColor, inverse);
     // Use a 'copy' composite operation to clear any existing glyph out of _tmpCtxWithAlpha, regardless of
@@ -270,7 +270,7 @@ export class WebglCharAtlas implements IDisposable {
       `${fontStyle} ${fontWeight} ${this._config.fontSize * this._config.devicePixelRatio}px ${this._config.fontFamily}`;
     this._tmpCtx.textBaseline = 'top';
 
-    this._tmpCtx.fillStyle = this._getForegroundCss(fgColorMode, fgColor, inverse);
+    this._tmpCtx.fillStyle = this._getForegroundCss(fgColorMode, fgColor, inverse, bold);
 
     // Apply alpha to dim the character
     if (dim) {