diff --git a/addons/xterm-addon-canvas/src/SelectionRenderLayer.ts b/addons/xterm-addon-canvas/src/SelectionRenderLayer.ts
index 3b25ec8f..12af5f75 100644
--- a/addons/xterm-addon-canvas/src/SelectionRenderLayer.ts
+++ b/addons/xterm-addon-canvas/src/SelectionRenderLayer.ts
@@ -85,7 +85,7 @@ export class SelectionRenderLayer extends BaseRenderLayer {
       return;
     }
 
-    this._ctx.fillStyle = this._colors.selectionTransparent.css;
+    this._ctx.fillStyle = this._colors.selectionBackgroundTransparent.css;
 
     if (columnSelectMode) {
       const startCol = start[0];
diff --git a/addons/xterm-addon-canvas/src/atlas/CharAtlasUtils.ts b/addons/xterm-addon-canvas/src/atlas/CharAtlasUtils.ts
index 4c84c86a..5d44b859 100644
--- a/addons/xterm-addon-canvas/src/atlas/CharAtlasUtils.ts
+++ b/addons/xterm-addon-canvas/src/atlas/CharAtlasUtils.ts
@@ -15,7 +15,7 @@ export function generateConfig(scaledCharWidth: number, scaledCharHeight: number
     background: colors.background,
     cursor: undefined,
     cursorAccent: undefined,
-    selection: undefined,
+    selectionBackground: undefined,
     ansi: colors.ansi.slice()
   };
   return {
diff --git a/addons/xterm-addon-webgl/src/WebglRenderer.ts b/addons/xterm-addon-webgl/src/WebglRenderer.ts
index 9e6266bd..4a57ae91 100644
--- a/addons/xterm-addon-webgl/src/WebglRenderer.ts
+++ b/addons/xterm-addon-webgl/src/WebglRenderer.ts
@@ -405,7 +405,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
     // Apply the selection color if needed
     if (this._isCellSelected(x, y)) {
-      bgOverride = this._colors.selectionOpaque.rgba >> 8 & 0xFFFFFF;
+      bgOverride = this._colors.selectionBackgroundOpaque.rgba >> 8 & 0xFFFFFF;
       if (this._colors.selectionForeground) {
         fgOverride = this._colors.selectionForeground.rgba >> 8 & 0xFFFFFF;
       }
diff --git a/addons/xterm-addon-webgl/src/atlas/CharAtlasUtils.ts b/addons/xterm-addon-webgl/src/atlas/CharAtlasUtils.ts
index 92cfd4a9..bfcbc689 100644
--- a/addons/xterm-addon-webgl/src/atlas/CharAtlasUtils.ts
+++ b/addons/xterm-addon-webgl/src/atlas/CharAtlasUtils.ts
@@ -21,8 +21,8 @@ export function generateConfig(scaledCellWidth: number, scaledCellHeight: number
     background: colors.background,
     cursor: NULL_COLOR,
     cursorAccent: NULL_COLOR,
-    selectionTransparent: NULL_COLOR,
-    selectionOpaque: NULL_COLOR,
+    selectionBackgroundTransparent: NULL_COLOR,
+    selectionBackgroundOpaque: NULL_COLOR,
     selectionForeground: NULL_COLOR,
     // For the static char atlas, we only use the first 16 colors, but we need all 256 for the
     // dynamic character atlas.
diff --git a/addons/xterm-addon-webgl/test/WebglRenderer.api.ts b/addons/xterm-addon-webgl/test/WebglRenderer.api.ts
index 797f0531..53073092 100644
--- a/addons/xterm-addon-webgl/test/WebglRenderer.api.ts
+++ b/addons/xterm-addon-webgl/test/WebglRenderer.api.ts
@@ -832,7 +832,7 @@ describe('WebGL Renderer Integration Tests', async () => {
     });
   });
 
-  describe('selection', async () => {
+  describe('selectionBackground', async () => {
     if (areTestsEnabled) {
       before(async () => setupBrowser());
       after(async () => browser.close());
@@ -843,7 +843,7 @@ describe('WebGL Renderer Integration Tests', async () => {
       const theme: ITheme = {
         foreground: '#FF0000',
         background: '#00FF00',
-        selection: '#0000FF'
+        selectionBackground: '#0000FF'
       };
       await page.evaluate(`window.term.options.theme = ${JSON.stringify(theme)};`);
       await writeSync(page, ` █\\x1b[7m█\\x1b[0m`);
diff --git a/demo/client.ts b/demo/client.ts
index 3ee533d0..41b1b085 100644
--- a/demo/client.ts
+++ b/demo/client.ts
@@ -106,7 +106,7 @@ const paddingElement = <HTMLInputElement>document.getElementById('padding');
 const xtermjsTheme = {
   foreground: '#F8F8F8',
   background: '#2D2E2C',
-  selection: '#5DA5D533',
+  selectionBackground: '#5DA5D533',
   black: '#1E1E1D',
   brightBlack: '#262625',
   red: '#CE5C5C',
diff --git a/src/browser/ColorManager.ts b/src/browser/ColorManager.ts
index 9e9891c3..92a3c6b5 100644
--- a/src/browser/ColorManager.ts
+++ b/src/browser/ColorManager.ts
@@ -102,8 +102,8 @@ export class ColorManager implements IColorManager {
       background: DEFAULT_BACKGROUND,
       cursor: DEFAULT_CURSOR,
       cursorAccent: DEFAULT_CURSOR_ACCENT,
-      selectionTransparent: DEFAULT_SELECTION,
-      selectionOpaque: color.blend(DEFAULT_BACKGROUND, DEFAULT_SELECTION),
+      selectionBackgroundTransparent: DEFAULT_SELECTION,
+      selectionBackgroundOpaque: color.blend(DEFAULT_BACKGROUND, DEFAULT_SELECTION),
       selectionForeground: undefined,
       ansi: DEFAULT_ANSI_COLORS.slice(),
       contrastCache: this._contrastCache
@@ -132,8 +132,8 @@ export class ColorManager implements IColorManager {
     this.colors.background = this._parseColor(theme.background, DEFAULT_BACKGROUND);
     this.colors.cursor = this._parseColor(theme.cursor, DEFAULT_CURSOR, true);
     this.colors.cursorAccent = this._parseColor(theme.cursorAccent, DEFAULT_CURSOR_ACCENT, true);
-    this.colors.selectionTransparent = this._parseColor(theme.selection, DEFAULT_SELECTION, true);
-    this.colors.selectionOpaque = color.blend(this.colors.background, this.colors.selectionTransparent);
+    this.colors.selectionBackgroundTransparent = this._parseColor(theme.selectionBackground, DEFAULT_SELECTION, true);
+    this.colors.selectionBackgroundOpaque = color.blend(this.colors.background, this.colors.selectionBackgroundTransparent);
     const nullColor: IColor = {
       css: '',
       rgba: 0
@@ -147,9 +147,9 @@ export class ColorManager implements IColorManager {
      * If selection color is opaque, blend it with background with 0.3 opacity
      * Issue #2737
      */
-    if (color.isOpaque(this.colors.selectionTransparent)) {
+    if (color.isOpaque(this.colors.selectionBackgroundTransparent)) {
       const opacity = 0.3;
-      this.colors.selectionTransparent = color.opacity(this.colors.selectionTransparent, opacity);
+      this.colors.selectionBackgroundTransparent = color.opacity(this.colors.selectionBackgroundTransparent, opacity);
     }
     this.colors.ansi = DEFAULT_ANSI_COLORS.slice();
     this.colors.ansi[0] = this._parseColor(theme.black, DEFAULT_ANSI_COLORS[0]);
diff --git a/src/browser/Types.d.ts b/src/browser/Types.d.ts
index f0e70437..1eb1d1b7 100644
--- a/src/browser/Types.d.ts
+++ b/src/browser/Types.d.ts
@@ -115,9 +115,9 @@ export interface IColorSet {
   background: IColor;
   cursor: IColor;
   cursorAccent: IColor;
-  selectionTransparent: IColor;
+  selectionBackgroundTransparent: IColor;
   /** The selection blended on top of background. */
-  selectionOpaque: IColor;
+  selectionBackgroundOpaque: IColor;
   selectionForeground: IColor | undefined;
   ansi: IColor[];
   contrastCache: IColorContrastCache;
@@ -136,7 +136,7 @@ export interface IPartialColorSet {
   background: IColor;
   cursor?: IColor;
   cursorAccent?: IColor;
-  selection?: IColor;
+  selectionBackground?: IColor;
   ansi: IColor[];
 }
 
diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts
index 991938e4..b800a73b 100644
--- a/src/browser/renderer/dom/DomRenderer.ts
+++ b/src/browser/renderer/dom/DomRenderer.ts
@@ -222,7 +222,7 @@ export class DomRenderer extends Disposable implements IRenderer {
       `}` +
       `${this._terminalSelector} .${SELECTION_CLASS} div {` +
       ` position: absolute;` +
-      ` background-color: ${this._colors.selectionOpaque.css};` +
+      ` background-color: ${this._colors.selectionBackgroundOpaque.css};` +
       `}`;
     // Colors
     this._colors.ansi.forEach((c, i) => {
diff --git a/src/browser/renderer/dom/DomRendererRowFactory.ts b/src/browser/renderer/dom/DomRendererRowFactory.ts
index 35b8b0e7..33e92c0b 100644
--- a/src/browser/renderer/dom/DomRendererRowFactory.ts
+++ b/src/browser/renderer/dom/DomRendererRowFactory.ts
@@ -218,7 +218,7 @@ export class DomRendererRowFactory {
       // If in the selection, force the element to be above the selection to improve contrast and
       // support opaque selections
       if (isInSelection) {
-        bgOverride = this._colors.selectionOpaque;
+        bgOverride = this._colors.selectionBackgroundOpaque;
         isTop = true;
       }
 
diff --git a/src/common/services/Services.ts b/src/common/services/Services.ts
index 248d5644..7fa13fe7 100644
--- a/src/common/services/Services.ts
+++ b/src/common/services/Services.ts
@@ -250,7 +250,7 @@ export interface ITheme {
   background?: string;
   cursor?: string;
   cursorAccent?: string;
-  selection?: string;
+  selectionBackground?: string;
   selectionForeground?: string;
   black?: string;
   red?: string;
diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts
index 6619d4e6..1a1ef905 100644
--- a/typings/xterm.d.ts
+++ b/typings/xterm.d.ts
@@ -267,7 +267,7 @@ declare module 'xterm' {
     /** The accent color of the cursor (fg color for a block cursor) */
     cursorAccent?: string;
     /** The selection background color (can be transparent) */
-    selection?: string;
+    selectionBackground?: string;
     /** The selection foreground color */
     selectionForeground?: string;
     /** ANSI black (eg. `\x1b[30m`) */