diff --git a/addons/xterm-addon-webgl/src/GlyphRenderer.ts b/addons/xterm-addon-webgl/src/GlyphRenderer.ts
index dd83131e1..00b216295 100644
--- a/addons/xterm-addon-webgl/src/GlyphRenderer.ts
+++ b/addons/xterm-addon-webgl/src/GlyphRenderer.ts
@@ -10,7 +10,7 @@ import { INDICIES_PER_CELL } from './WebglRenderer';
 import { COMBINED_CHAR_BIT_MASK } from './RenderModel';
 import { fill } from 'common/TypedArrayUtils';
 import { slice } from './TypedArray';
-import { NULL_CELL_CODE, WHITESPACE_CELL_CODE } from 'common/buffer/Constants';
+import { NULL_CELL_CODE, WHITESPACE_CELL_CODE, Attributes } from 'common/buffer/Constants';
 import { getLuminance } from './ColorUtils';
 import { Terminal, IBufferLine } from 'xterm';
 import { IColorSet } from 'browser/Types';
@@ -223,8 +223,8 @@ export class GlyphRenderer {
     // TODO: Make fg and bg configurable, currently since the buffer doesn't
     // support truecolor the char atlas cannot store it.
     const lumi = getLuminance(this._colors.background);
-    const fg = lumi > 0.5 ? 7 : 0;
-    const bg = lumi > 0.5 ? 0 : 7;
+    const fg = (lumi > 0.5 ? 7 : 0) | Attributes.CM_P16;
+    const bg = (lumi > 0.5 ? 0 : 7) | Attributes.CM_P16;
 
     if (columnSelectMode) {
       const startCol = model.selection.startCol;
diff --git a/addons/xterm-addon-webgl/src/WebglRenderer.ts b/addons/xterm-addon-webgl/src/WebglRenderer.ts
index afdb7fa40..a9a2f8607 100644
--- a/addons/xterm-addon-webgl/src/WebglRenderer.ts
+++ b/addons/xterm-addon-webgl/src/WebglRenderer.ts
@@ -271,15 +271,15 @@ export class WebglRenderer extends Disposable implements IRenderer {
           this._model.lineLengths[y] = x + 1;
         }
 
-        // Nothing has changed, no updates needed
-        if (this._model.cells[i] === code && this._model.cells[i + 1] === attr) {
-          continue;
-        }
-
-        // Resolve bg and fg and cache in the model
+        // Resolve bg and fg
         let bg = this._workCell.bg;
         let fg = this._workCell.fg;
 
+        // Nothing has changed, no updates needed
+        if (this._model.cells[i] === code && this._model.cells[i + 2] === bg && this._model.cells[i + 3] === fg) {
+          continue;
+        }
+
         // If inverse flag is on, the foreground should become the background.
         if (this._workCell.isInverse()) {
           const temp = bg;
@@ -303,6 +303,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
           code = code | COMBINED_CHAR_BIT_MASK;
         }
 
+        // Cache the results in the model
         this._model.cells[i    ] = code;
         // TODO: Remove attr from model
         this._model.cells[i + 1] = attr;