diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 00000000..dccd0c5d
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Question
+    url:  https://stackoverflow.com/questions/tagged/xtermjs
+    about: Please ask and answer questions here.
diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md
deleted file mode 100644
index 1fe5c763..00000000
--- a/.github/ISSUE_TEMPLATE/question.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-name: Question
-about: The issue tracker is not for questions. Please ask questions on https://stackoverflow.com/questions/tagged/xtermjs
----
-
-🛑 The issue tracker is not for questions 🛑
-
-If you have a question, please ask it on https://stackoverflow.com/questions/tagged/xtermjs.
diff --git a/addons/xterm-addon-webgl/src/GlyphRenderer.ts b/addons/xterm-addon-webgl/src/GlyphRenderer.ts
index 3d4d43d1..7b35949d 100644
--- a/addons/xterm-addon-webgl/src/GlyphRenderer.ts
+++ b/addons/xterm-addon-webgl/src/GlyphRenderer.ts
@@ -101,7 +101,6 @@ export class GlyphRenderer {
     private _dimensions: IRenderDimensions
   ) {
     const gl = this._gl;
-
     const program = throwIfFalsy(createProgram(gl, vertexShaderSource, fragmentShaderSource));
     this._program = program;
 
@@ -184,7 +183,7 @@ export class GlyphRenderer {
 
     let rasterizedGlyph: IRasterizedGlyph;
     if (!this._atlas) {
-      throw new Error('atlas must be set before updating cell');
+      return;
     }
     if (chars && chars.length > 1) {
       rasterizedGlyph = this._atlas.getRasterizedGlyphCombinedChar(chars, bg, fg);
diff --git a/addons/xterm-addon-webgl/src/RectangleRenderer.ts b/addons/xterm-addon-webgl/src/RectangleRenderer.ts
index b52a506e..2246cddd 100644
--- a/addons/xterm-addon-webgl/src/RectangleRenderer.ts
+++ b/addons/xterm-addon-webgl/src/RectangleRenderer.ts
@@ -22,13 +22,13 @@ const enum VertexAttribLocations {
 const vertexShaderSource = `#version 300 es
 layout (location = ${VertexAttribLocations.POSITION}) in vec2 a_position;
 layout (location = ${VertexAttribLocations.SIZE}) in vec2 a_size;
-layout (location = ${VertexAttribLocations.COLOR}) in vec3 a_color;
+layout (location = ${VertexAttribLocations.COLOR}) in vec4 a_color;
 layout (location = ${VertexAttribLocations.UNIT_QUAD}) in vec2 a_unitquad;
 
 uniform mat4 u_projection;
 uniform vec2 u_resolution;
 
-out vec3 v_color;
+out vec4 v_color;
 
 void main() {
   vec2 zeroToOne = (a_position + (a_unitquad * a_size)) / u_resolution;
@@ -39,12 +39,12 @@ void main() {
 const fragmentShaderSource = `#version 300 es
 precision lowp float;
 
-in vec3 v_color;
+in vec4 v_color;
 
 out vec4 outColor;
 
 void main() {
-  outColor = vec4(v_color, 1);
+  outColor = v_color;
 }`;
 
 interface IVertices {
diff --git a/addons/xterm-addon-webgl/src/WebglRenderer.api.ts b/addons/xterm-addon-webgl/src/WebglRenderer.api.ts
index e26e054a..bf877dd8 100644
--- a/addons/xterm-addon-webgl/src/WebglRenderer.api.ts
+++ b/addons/xterm-addon-webgl/src/WebglRenderer.api.ts
@@ -702,6 +702,22 @@ describe('WebGL Renderer Integration Tests', function(): void {
       await pollFor(page, () => getCellColor(8, 2), [64, 64, 64, 255]);
     });
   });
+
+  describe('allowTransparency', async () => {
+    before(async () => setupBrowser({ rendererType: 'dom', allowTransparency: true}));
+    after(async () => browser.close());
+    beforeEach(async () => page.evaluate(`window.term.reset()`));
+    it('transparent background inverse', async () => {
+      const theme: ITheme = {
+        background: '#ff000080'
+      };
+      await page.evaluate(`window.term.setOption('theme', ${JSON.stringify(theme)});`);
+      const data = `\\x1b[7m█\x1b[0m`;
+      await writeSync(data);
+      // Inverse background should be opaque
+      await pollFor(page, () => getCellColor(1, 1), [255, 0, 0, 255]);
+    });
+  });
 });
 
 async function openTerminal(options: ITerminalOptions = {}): Promise<void> {
@@ -732,7 +748,7 @@ async function getCellColor(col: number, row: number): Promise<number[]> {
   return await page.evaluate(`Array.from(window.result)`);
 }
 
-async function setupBrowser(): Promise<void> {
+async function setupBrowser(options: ITerminalOptions = { rendererType: 'dom' }): Promise<void> {
   browser = await puppeteer.launch({
     headless: process.argv.indexOf('--headless') !== -1,
     args: [`--window-size=${width},${height}`, `--no-sandbox`]
@@ -740,9 +756,7 @@ async function setupBrowser(): Promise<void> {
   page = (await browser.pages())[0];
   await page.setViewport({ width, height });
   await page.goto(APP);
-  await openTerminal({
-    rendererType: 'dom'
-  });
+  await openTerminal(options);
   await page.evaluate(`
     window.addon = new WebglAddon(true);
     window.term.loadAddon(window.addon);
diff --git a/addons/xterm-addon-webgl/src/WebglRenderer.ts b/addons/xterm-addon-webgl/src/WebglRenderer.ts
index 46fd2730..6f98d2c1 100644
--- a/addons/xterm-addon-webgl/src/WebglRenderer.ts
+++ b/addons/xterm-addon-webgl/src/WebglRenderer.ts
@@ -37,6 +37,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
   public dimensions: IRenderDimensions;
 
   private _core: ITerminal;
+  private _isAttached: boolean;
 
   private _onRequestRefreshRows = new EventEmitter<IRequestRefreshRowsEvent>();
   public get onRequestRefreshRows(): IEvent<IRequestRefreshRowsEvent> { return this._onRequestRefreshRows.event; }
@@ -89,6 +90,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
     // Update dimensions and acquire char atlas
     this.onCharSizeChanged();
+
+    this._isAttached = document.body.contains(this._core.screenElement);
   }
 
   public dispose(): void {
@@ -99,7 +102,6 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
   public setColors(colors: IColorSet): void {
     this._colors = colors;
-
     // Clear layers and force a full render
     this._renderLayers.forEach(l => {
       l.setColors(this._terminal, this._colors);
@@ -192,6 +194,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
    */
   private _refreshCharAtlas(): void {
     if (this.dimensions.scaledCharWidth <= 0 && this.dimensions.scaledCharHeight <= 0) {
+      // Mark as not attached so char atlas gets refreshed on next render
+      this._isAttached = false;
       return;
     }
 
@@ -217,6 +221,16 @@ export class WebglRenderer extends Disposable implements IRenderer {
   }
 
   public renderRows(start: number, end: number): void {
+    if (!this._isAttached) {
+      if (document.body.contains(this._core.screenElement) && (<any>this._core)._charSizeService.width && (<any>this._core)._charSizeService.height) {
+        this._updateDimensions();
+        this._refreshCharAtlas();
+        this._isAttached = true;
+      } else {
+        return;
+      }
+    }
+
     // Update render layers
     this._renderLayers.forEach(l => l.onGridChanged(this._terminal, start, end));
 
diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
index cda20225..c96c2a69 100644
--- a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
+++ b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
@@ -6,7 +6,7 @@
 import { ICharAtlasConfig } from './Types';
 import { DIM_OPACITY } from 'browser/renderer/atlas/Constants';
 import { IRasterizedGlyph, IBoundingBox, IRasterizedGlyphSet } from '../Types';
-import { DEFAULT_COLOR, FgFlags, Attributes, BgFlags } from 'common/buffer/Constants';
+import { DEFAULT_COLOR, Attributes } from 'common/buffer/Constants';
 import { throwIfFalsy } from '../WebglUtils';
 import { IColor } from 'browser/Types';
 import { IDisposable } from 'xterm';
@@ -228,7 +228,12 @@ export class WebglCharAtlas implements IDisposable {
       case Attributes.CM_DEFAULT:
       default:
         if (inverse) {
-          return this._config.colors.background.css;
+          const bg = this._config.colors.background.css;
+          if (bg.length === 9) {
+            // Remove bg alpha channel if present
+            return bg.substr(0, 7);
+          }
+          return bg;
         }
         return this._config.colors.foreground.css;
     }
@@ -530,20 +535,3 @@ function toPaddedHex(c: number): string {
   const s = c.toString(16);
   return s.length < 2 ? '0' + s : s;
 }
-
-function getFgColor(fg: number): number {
-  switch (fg & Attributes.CM_MASK) {
-    case Attributes.CM_P16:
-    case Attributes.CM_P256:  return fg & Attributes.PCOLOR_MASK;
-    case Attributes.CM_RGB:   return fg & Attributes.RGB_MASK;
-    default:                  return -1;  // CM_DEFAULT defaults to -1
-  }
-}
-function getBgColor(bg: number): number {
-  switch (bg & Attributes.CM_MASK) {
-    case Attributes.CM_P16:
-    case Attributes.CM_P256:  return bg & Attributes.PCOLOR_MASK;
-    case Attributes.CM_RGB:   return bg & Attributes.RGB_MASK;
-    default:                  return -1;  // CM_DEFAULT defaults to -1
-  }
-}
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index 0f61dfe1..f6f892c7 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -127,6 +127,8 @@ jobs:
   condition: and(succeeded(), or(eq(variables['Build.SourceBranch'], 'refs/heads/master'), eq(variables['FORCE_RELEASE'], 'true')))
   pool:
     vmImage: 'ubuntu-16.04'
+  variables:
+    PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
   steps:
   - task: NodeTool@0
     inputs:
@@ -140,6 +142,7 @@ jobs:
     inputs:
       key: yarn2 | $(Agent.OS) | yarn.lock
       path: node_modules
+    displayName: Cache node modules
   - script: yarn --frozen-lockfile
     displayName: 'Install dependencies and build'
   - script: NPM_AUTH_TOKEN="$(NPM_AUTH_TOKEN)" node ./bin/publish.js
diff --git a/bin/publish.js b/bin/publish.js
index 9d58ed15..9050c344 100644
--- a/bin/publish.js
+++ b/bin/publish.js
@@ -97,7 +97,7 @@ function getNextBetaVersion(packageJson) {
   const nextStableVersion = `${stableVersion[0]}.${parseInt(stableVersion[1]) + 1}.0`;
   const publishedVersions = getPublishedVersions(packageJson, nextStableVersion, tag);
   if (publishedVersions.length === 0) {
-    return `${nextStableVersion}-${tag}1`;
+    return `${nextStableVersion}-${tag}.1`;
   }
   const latestPublishedVersion = publishedVersions.sort((a, b) => {
     const aVersion = parseInt(a.substr(a.search(/[0-9]+$/)));
@@ -105,14 +105,14 @@ function getNextBetaVersion(packageJson) {
     return aVersion > bVersion ? -1 : 1;
   })[0];
   const latestTagVersion = parseInt(latestPublishedVersion.substr(latestPublishedVersion.search(/[0-9]+$/)), 10);
-  return `${nextStableVersion}-${tag}${latestTagVersion + 1}`;
+  return `${nextStableVersion}-${tag}.${latestTagVersion + 1}`;
 }
 
 function getPublishedVersions(packageJson, version, tag) {
   const versionsProcess = cp.spawnSync('npm', ['view', packageJson.name, 'versions', '--json']);
   const versionsJson = JSON.parse(versionsProcess.stdout);
   if (tag) {
-    return versionsJson.filter(v => !v.search(new RegExp(`${version}-${tag}[0-9]+`)));
+    return versionsJson.filter(v => !v.search(new RegExp(`${version}-${tag}.[0-9]+`)));
   }
   return versionsJson;
 }
diff --git a/src/InputHandler.ts b/src/InputHandler.ts
index db395313..00344075 100644
--- a/src/InputHandler.ts
+++ b/src/InputHandler.ts
@@ -545,6 +545,7 @@ export class InputHandler extends Disposable implements IInputHandler {
     // make buffer local for faster access
     const buffer = this._bufferService.buffer;
 
+    this._dirtyRowService.markDirty(buffer.y);
     if (this._optionsService.options.convertEol) {
       buffer.x = 0;
     }
@@ -559,6 +560,7 @@ export class InputHandler extends Disposable implements IInputHandler {
     if (buffer.x >= this._bufferService.cols) {
       buffer.x--;
     }
+    this._dirtyRowService.markDirty(buffer.y);
 
     this._onLineFeed.fire();
   }
@@ -623,12 +625,14 @@ export class InputHandler extends Disposable implements IInputHandler {
     this._bufferService.buffer.y = this._terminal.originMode
       ? Math.min(this._bufferService.buffer.scrollBottom, Math.max(this._bufferService.buffer.scrollTop, this._bufferService.buffer.y))
       : Math.min(this._bufferService.rows - 1, Math.max(0, this._bufferService.buffer.y));
+    this._dirtyRowService.markDirty(this._bufferService.buffer.y);
   }
 
   /**
    * Set absolute cursor position.
    */
   private _setCursor(x: number, y: number): void {
+    this._dirtyRowService.markDirty(this._bufferService.buffer.y);
     if (this._terminal.originMode) {
       this._bufferService.buffer.x = x;
       this._bufferService.buffer.y = this._bufferService.buffer.scrollTop + y;
@@ -637,6 +641,7 @@ export class InputHandler extends Disposable implements IInputHandler {
       this._bufferService.buffer.y = y;
     }
     this._restrictCursor();
+    this._dirtyRowService.markDirty(this._bufferService.buffer.y);
   }
 
   /**
diff --git a/src/browser/Color.test.ts b/src/browser/Color.test.ts
index 673fffc8..cbeeaba9 100644
--- a/src/browser/Color.test.ts
+++ b/src/browser/Color.test.ts
@@ -4,7 +4,7 @@
  */
 
 import { assert } from 'chai';
-import { blend, fromCss, toPaddedHex, toCss, toRgba, rgbRelativeLuminance, contrastRatio, ensureContrastRatioRgba } from 'browser/Color';
+import { blend, fromCss, toPaddedHex, toCss, toRgba, fromRgba, opaque, rgbRelativeLuminance, contrastRatio, ensureContrastRatioRgba } from 'browser/Color';
 
 describe('Color', () => {
   describe('blend', () => {
@@ -135,6 +135,51 @@ describe('Color', () => {
       assert.equal(toRgba(0xff, 0xff, 0xff, 0xff), 0xffffffff);
     });
   });
+
+  describe('fromRgba', () => {
+    it('should convert an rgba number to an rgba array', () => {
+      assert.deepEqual(fromRgba(0x00000000), [0x00, 0x00, 0x00, 0x00]);
+      assert.deepEqual(fromRgba(0x10101010), [0x10, 0x10, 0x10, 0x10]);
+      assert.deepEqual(fromRgba(0x20202020), [0x20, 0x20, 0x20, 0x20]);
+      assert.deepEqual(fromRgba(0x30303030), [0x30, 0x30, 0x30, 0x30]);
+      assert.deepEqual(fromRgba(0x40404040), [0x40, 0x40, 0x40, 0x40]);
+      assert.deepEqual(fromRgba(0x50505050), [0x50, 0x50, 0x50, 0x50]);
+      assert.deepEqual(fromRgba(0x60606060), [0x60, 0x60, 0x60, 0x60]);
+      assert.deepEqual(fromRgba(0x70707070), [0x70, 0x70, 0x70, 0x70]);
+      assert.deepEqual(fromRgba(0x80808080), [0x80, 0x80, 0x80, 0x80]);
+      assert.deepEqual(fromRgba(0x90909090), [0x90, 0x90, 0x90, 0x90]);
+      assert.deepEqual(fromRgba(0xa0a0a0a0), [0xa0, 0xa0, 0xa0, 0xa0]);
+      assert.deepEqual(fromRgba(0xb0b0b0b0), [0xb0, 0xb0, 0xb0, 0xb0]);
+      assert.deepEqual(fromRgba(0xc0c0c0c0), [0xc0, 0xc0, 0xc0, 0xc0]);
+      assert.deepEqual(fromRgba(0xd0d0d0d0), [0xd0, 0xd0, 0xd0, 0xd0]);
+      assert.deepEqual(fromRgba(0xe0e0e0e0), [0xe0, 0xe0, 0xe0, 0xe0]);
+      assert.deepEqual(fromRgba(0xf0f0f0f0), [0xf0, 0xf0, 0xf0, 0xf0]);
+      assert.deepEqual(fromRgba(0xffffffff), [0xff, 0xff, 0xff, 0xff]);
+    });
+  });
+
+  describe('opaque', () => {
+    it('should make the color opaque', () => {
+      assert.deepEqual(opaque({ css: '#00000000', rgba: 0x00000000 }), { css: '#000000', rgba: 0x000000FF });
+      assert.deepEqual(opaque({ css: '#10101010', rgba: 0x10101010 }), { css: '#101010', rgba: 0x101010FF });
+      assert.deepEqual(opaque({ css: '#20202020', rgba: 0x20202020 }), { css: '#202020', rgba: 0x202020FF });
+      assert.deepEqual(opaque({ css: '#30303030', rgba: 0x30303030 }), { css: '#303030', rgba: 0x303030FF });
+      assert.deepEqual(opaque({ css: '#40404040', rgba: 0x40404040 }), { css: '#404040', rgba: 0x404040FF });
+      assert.deepEqual(opaque({ css: '#50505050', rgba: 0x50505050 }), { css: '#505050', rgba: 0x505050FF });
+      assert.deepEqual(opaque({ css: '#60606060', rgba: 0x60606060 }), { css: '#606060', rgba: 0x606060FF });
+      assert.deepEqual(opaque({ css: '#70707070', rgba: 0x70707070 }), { css: '#707070', rgba: 0x707070FF });
+      assert.deepEqual(opaque({ css: '#80808080', rgba: 0x80808080 }), { css: '#808080', rgba: 0x808080FF });
+      assert.deepEqual(opaque({ css: '#90909090', rgba: 0x90909090 }), { css: '#909090', rgba: 0x909090FF });
+      assert.deepEqual(opaque({ css: '#a0a0a0a0', rgba: 0xa0a0a0a0 }), { css: '#a0a0a0', rgba: 0xa0a0a0FF });
+      assert.deepEqual(opaque({ css: '#b0b0b0b0', rgba: 0xb0b0b0b0 }), { css: '#b0b0b0', rgba: 0xb0b0b0FF });
+      assert.deepEqual(opaque({ css: '#c0c0c0c0', rgba: 0xc0c0c0c0 }), { css: '#c0c0c0', rgba: 0xc0c0c0FF });
+      assert.deepEqual(opaque({ css: '#d0d0d0d0', rgba: 0xd0d0d0d0 }), { css: '#d0d0d0', rgba: 0xd0d0d0FF });
+      assert.deepEqual(opaque({ css: '#e0e0e0e0', rgba: 0xe0e0e0e0 }), { css: '#e0e0e0', rgba: 0xe0e0e0FF });
+      assert.deepEqual(opaque({ css: '#f0f0f0f0', rgba: 0xf0f0f0f0 }), { css: '#f0f0f0', rgba: 0xf0f0f0FF });
+      assert.deepEqual(opaque({ css: '#ffffffff', rgba: 0xffffffff }), { css: '#ffffff', rgba: 0xffffffFF });
+    });
+  });
+
   describe('rgbRelativeLuminance', () => {
     it('should calculate the relative luminance of the color', () => {
       assert.equal(rgbRelativeLuminance(0x000000), 0);
diff --git a/src/browser/Color.ts b/src/browser/Color.ts
index d4cbfe0e..e40ff9e1 100644
--- a/src/browser/Color.ts
+++ b/src/browser/Color.ts
@@ -39,7 +39,10 @@ export function toPaddedHex(c: number): string {
   return s.length < 2 ? '0' + s : s;
 }
 
-export function toCss(r: number, g: number, b: number): string {
+export function toCss(r: number, g: number, b: number, a?: number): string {
+  if (a !== undefined) {
+    return `#${toPaddedHex(r)}${toPaddedHex(g)}${toPaddedHex(b)}${toPaddedHex(a)}`;
+  }
   return `#${toPaddedHex(r)}${toPaddedHex(g)}${toPaddedHex(b)}`;
 }
 
@@ -48,6 +51,19 @@ export function toRgba(r: number, g: number, b: number, a: number = 0xFF): numbe
   return (r << 24 | g << 16 | b << 8 | a) >>> 0;
 }
 
+export function fromRgba(value: number): [number, number, number, number] {
+  return [(value >> 24) & 0xFF, (value >> 16) & 0xFF, (value >> 8) & 0xFF, value & 0xFF];
+}
+
+export function opaque(color: IColor): IColor {
+  const rgba = (color.rgba | 0xFF) >>> 0;
+  const [r, g, b] = fromRgba(rgba);
+  return {
+    css: toCss(r, g, b),
+    rgba
+  };
+}
+
 /**
  * Gets the relative luminance of an RGB color, this is useful in determining the contrast ratio
  * between two colors.
@@ -92,7 +108,7 @@ export function contrastRatio(l1: number, l2: number): number {
   return (l1 + 0.05) / (l2 + 0.05);
 }
 
-function rgbaToColor(r: number, g: number, b: number): IColor {
+export function rgbaToColor(r: number, g: number, b: number): IColor {
   return {
     css: toCss(r, g, b),
     rgba: toRgba(r, g, b)
diff --git a/src/browser/ColorManager.ts b/src/browser/ColorManager.ts
index 92994cfc..b4bcdde0 100644
--- a/src/browser/ColorManager.ts
+++ b/src/browser/ColorManager.ts
@@ -5,7 +5,7 @@
 
 import { IColorManager, IColor, IColorSet, IColorContrastCache } from 'browser/Types';
 import { ITheme } from 'common/services/Services';
-import { fromCss, toCss, blend, toRgba } from 'browser/Color';
+import { fromCss, toCss, blend, toRgba, toPaddedHex } from 'browser/Color';
 import { ColorContrastCache } from 'browser/ColorContrastCache';
 
 const DEFAULT_FOREGROUND = fromCss('#ffffff');
@@ -159,28 +159,55 @@ export class ColorManager implements IColorManager {
     this._ctx.fillRect(0, 0, 1, 1);
     const data = this._ctx.getImageData(0, 0, 1, 1).data;
 
-    if (!allowTransparency && data[3] !== 0xFF) {
-      // Ideally we'd just ignore the alpha channel, but...
-      //
-      // Browsers may not give back exactly the same RGB values we put in, because most/all
-      // convert the color to a pre-multiplied representation. getImageData converts that back to
-      // a un-premultipled representation, but the precision loss may make the RGB channels unuable
-      // on their own.
-      //
-      // E.g. In Chrome #12345610 turns into #10305010, and in the extreme case, 0xFFFFFF00 turns
-      // into 0x00000000.
-      //
-      // "Note: Due to the lossy nature of converting to and from premultiplied alpha color values,
-      // pixels that have just been set using putImageData() might be returned to an equivalent
-      // getImageData() as different values."
-      // -- https://html.spec.whatwg.org/multipage/canvas.html#pixel-manipulation
-      //
-      // So let's just use the fallback color in this case instead.
-      console.warn(
-        `Color: ${css} is using transparency, but allowTransparency is false. ` +
-        `Using fallback ${fallback.css}.`
-      );
-      return fallback;
+    // Check if the printed color was transparent
+    if (data[3] !== 0xFF) {
+      if (!allowTransparency) {
+        // Ideally we'd just ignore the alpha channel, but...
+        //
+        // Browsers may not give back exactly the same RGB values we put in, because most/all
+        // convert the color to a pre-multiplied representation. getImageData converts that back to
+        // a un-premultipled representation, but the precision loss may make the RGB channels unuable
+        // on their own.
+        //
+        // E.g. In Chrome #12345610 turns into #10305010, and in the extreme case, 0xFFFFFF00 turns
+        // into 0x00000000.
+        //
+        // "Note: Due to the lossy nature of converting to and from premultiplied alpha color values,
+        // pixels that have just been set using putImageData() might be returned to an equivalent
+        // getImageData() as different values."
+        // -- https://html.spec.whatwg.org/multipage/canvas.html#pixel-manipulation
+        //
+        // So let's just use the fallback color in this case instead.
+        console.warn(
+          `Color: ${css} is using transparency, but allowTransparency is false. ` +
+          `Using fallback ${fallback.css}.`
+        );
+        return fallback;
+      }
+      let r: number;
+      let g: number;
+      let b: number;
+      let a: number;
+      let rgba: number;
+      if (css.length === 5) {
+        const num = parseInt(css.substr(1), 16);
+        r = ((num >> 12) & 0xF) * 16;
+        g = ((num >> 8) & 0xF) * 16;
+        b = ((num >> 4) & 0xF) * 16;
+        a = (num & 0xF) * 16;
+        rgba = toRgba(r, g, b, a);
+      } else {
+        rgba = parseInt(css.substr(1), 16);
+        r = (rgba >> 24) & 0xFF;
+        g = (rgba >> 16) & 0xFF;
+        b = (rgba >>  8) & 0xFF;
+        a = (rgba      ) & 0xFF;
+      }
+
+      return {
+        rgba,
+        css: toCss(r, g, b, a)
+      };
     }
 
     return {
diff --git a/src/browser/renderer/BaseRenderLayer.ts b/src/browser/renderer/BaseRenderLayer.ts
index 599ab114..f55a130d 100644
--- a/src/browser/renderer/BaseRenderLayer.ts
+++ b/src/browser/renderer/BaseRenderLayer.ts
@@ -15,7 +15,7 @@ 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';
+import { toCss, ensureContrastRatioRgba, opaque } from 'browser/Color';
 
 export abstract class BaseRenderLayer implements IRenderLayer {
   private _canvas: HTMLCanvasElement;
@@ -325,7 +325,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
       if (fgOverride) {
         this._ctx.fillStyle = fgOverride.css;
       } else if (cell.isBgDefault()) {
-        this._ctx.fillStyle = this._colors.background.css;
+        this._ctx.fillStyle = opaque(this._colors.background).css;
       } else if (cell.isBgRGB()) {
         this._ctx.fillStyle = `rgb(${AttributeData.toColorRGB(cell.getBgColor()).join(',')})`;
       } else {
diff --git a/src/browser/renderer/atlas/DynamicCharAtlas.ts b/src/browser/renderer/atlas/DynamicCharAtlas.ts
index 40103bc7..84a50160 100644
--- a/src/browser/renderer/atlas/DynamicCharAtlas.ts
+++ b/src/browser/renderer/atlas/DynamicCharAtlas.ts
@@ -11,6 +11,7 @@ import { LRUMap } from 'browser/renderer/atlas/LRUMap';
 import { isFirefox, isSafari } from 'common/Platform';
 import { IColor } from 'browser/Types';
 import { throwIfFalsy } from 'browser/renderer/RendererUtils';
+import { opaque } from 'browser/Color';
 
 // In practice we're probably never going to exhaust a texture this large. For debugging purposes,
 // however, it can be useful to set this to a really tiny value, to verify that LRU eviction works.
@@ -222,7 +223,7 @@ export class DynamicCharAtlas extends BaseCharAtlas {
 
   private _getForegroundColor(glyph: IGlyphIdentifier): IColor {
     if (glyph.fg === INVERTED_DEFAULT_COLOR) {
-      return this._config.colors.background;
+      return opaque(this._config.colors.background);
     } else if (glyph.fg < 256) {
       // 256 color support
       return this._getColorFromAnsiIndex(glyph.fg);
diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts
index 23c5a3a1..018e63e5 100644
--- a/src/browser/renderer/dom/DomRenderer.ts
+++ b/src/browser/renderer/dom/DomRenderer.ts
@@ -11,6 +11,7 @@ import { IColorSet, ILinkifierEvent, ILinkifier } from 'browser/Types';
 import { ICharSizeService } from 'browser/services/Services';
 import { IOptionsService, IBufferService } from 'common/services/Services';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
+import { opaque } from 'browser/Color';
 
 const TERMINAL_CLASS_PREFIX = 'xterm-dom-renderer-owner-';
 const ROW_CONTAINER_CLASS = 'xterm-rows';
@@ -230,7 +231,7 @@ export class DomRenderer extends Disposable implements IRenderer {
           `${this._terminalSelector} .${BG_CLASS_PREFIX}${i} { background-color: ${c.css}; }`;
     });
     styles +=
-        `${this._terminalSelector} .${FG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { color: ${this._colors.background.css}; }` +
+        `${this._terminalSelector} .${FG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { color: ${opaque(this._colors.background).css}; }` +
         `${this._terminalSelector} .${BG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { background-color: ${this._colors.foreground.css}; }`;
 
     this._themeStyleElement.innerHTML = styles;
diff --git a/src/browser/renderer/dom/DomRendererRowFactory.ts b/src/browser/renderer/dom/DomRendererRowFactory.ts
index cffc5624..bd922f57 100644
--- a/src/browser/renderer/dom/DomRendererRowFactory.ts
+++ b/src/browser/renderer/dom/DomRendererRowFactory.ts
@@ -8,7 +8,7 @@ import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
 import { NULL_CELL_CODE, WHITESPACE_CELL_CHAR, Attributes } from 'common/buffer/Constants';
 import { CellData } from 'common/buffer/CellData';
 import { IOptionsService } from 'common/services/Services';
-import { ensureContrastRatio } from 'browser/Color';
+import { ensureContrastRatio, rgbaToColor } from 'browser/Color';
 import { IColorSet, IColor } from 'browser/Types';
 
 export const BOLD_CLASS = 'xterm-bold';
@@ -129,7 +129,14 @@ export class DomRendererRowFactory {
           }
           break;
         case Attributes.CM_RGB:
-          charElement.setAttribute('style', `${charElement.getAttribute('style') || ''}color:#${padStart(fg.toString(16), '0', 6)};`);
+          const color = rgbaToColor(
+            (fg >> 16) & 0xFF,
+            (fg >>  8) & 0xFF,
+            (fg      ) & 0xFF
+          );
+          if (!this._applyMinimumContrast(charElement, this._colors.background, color)) {
+            this._addStyle(charElement, `color:#${padStart(fg.toString(16), '0', 6)}`);
+          }
           break;
         case Attributes.CM_DEFAULT:
         default:
@@ -147,7 +154,7 @@ export class DomRendererRowFactory {
           charElement.classList.add(`xterm-bg-${bg}`);
           break;
         case Attributes.CM_RGB:
-          charElement.setAttribute('style', `${charElement.getAttribute('style') || ''}background-color:#${padStart(bg.toString(16), '0', 6)};`);
+          this._addStyle(charElement, `background-color:#${padStart(bg.toString(16), '0', 6)}`);
           break;
         case Attributes.CM_DEFAULT:
         default:
@@ -176,12 +183,16 @@ export class DomRendererRowFactory {
     }
 
     if (adjustedColor) {
-      element.setAttribute('style', `${element.getAttribute('style') || ''}color:${adjustedColor.css}`);
+      this._addStyle(element, `color:${adjustedColor.css}`);
       return true;
     }
 
     return false;
   }
+
+  private _addStyle(element: HTMLElement, style: string): void {
+    element.setAttribute('style', `${element.getAttribute('style') || ''}${style};`);
+  }
 }
 
 function padStart(text: string, padChar: string, length: number): string {
diff --git a/src/common/services/OptionsService.ts b/src/common/services/OptionsService.ts
index a4f3ab85..d1568ea0 100644
--- a/src/common/services/OptionsService.ts
+++ b/src/common/services/OptionsService.ts
@@ -51,8 +51,8 @@ export const DEFAULT_OPTIONS: ITerminalOptions = Object.freeze({
   screenKeys: false,
   cancelEvents: false,
   useFlowControl: false,
-  wordSeparator: ' ()[]{}\',:;"',
-  unicodeVersion: '6'
+  unicodeVersion: '6',
+  wordSeparator: ' ()[]{}\',:;"`'
 });
 
 /**