diff --git a/src/CCAcontroller.js b/src/CCAcontroller.js
index d66c661..244c73b 100644
--- a/src/CCAcontroller.js
+++ b/src/CCAcontroller.js
@@ -20,6 +20,7 @@ class CCAController {
         ipcMain.on('changeRGBComponent', this.updateRGBComponent.bind(this))
         ipcMain.on('changeForeground', this.updateForegroundFromString.bind(this))
         ipcMain.on('changeBackground', this.updateBackgroundFromString.bind(this))
+        ipcMain.on('switchColors', this.switchColors.bind(this))
     }
 
     updateRGBComponent(event, group, component, value, synced = false) {
@@ -112,6 +113,19 @@ class CCAController {
         this.sendEventToAll('backgroundColorChanged')
     }
 
+    switchColors(event) {
+        let background = this.sharedObject.normal.backgroundColor
+        this.sharedObject.normal.backgroundColor = this.sharedObject.normal.foregroundColorMixed
+        this.sharedObject.normal.foregroundColor = background
+        this.sharedObject.normal.foregroundColorMixed = this.sharedObject.normal.foregroundColor.mixed(this.sharedObject.normal.backgroundColor)
+        this.updateDeficiencyForeground()
+        this.updateDeficiencyBackground()
+        this.updateContrastRatio()
+        this.updateAdvanced()
+        this.sendEventToAll('foregroundColorChanged')    
+        this.sendEventToAll('backgroundColorChanged')        
+    }
+
     updateDeficiencyForeground() {
         this.sharedObject.protanopia.foregroundColor = this.sharedObject.normal.foregroundColorMixed.protanopia()
         this.sharedObject.deuteranopia.foregroundColor = this.sharedObject.normal.foregroundColorMixed.deuteranopia()
diff --git a/src/views/css/main.css b/src/views/css/main.css
index 00fb379..12c2bde 100644
--- a/src/views/css/main.css
+++ b/src/views/css/main.css
@@ -107,6 +107,10 @@ section#background-color button.text {
     background-image: url('../icons/text.svg');
 }
 
+section#foreground-color button.switch {
+    background-image: url('../icons/switch.svg');
+}
+
 /* Text input sections */
 section#foreground-text input,
 section#background-text input {
diff --git a/src/views/icons/switch.svg b/src/views/icons/switch.svg
new file mode 100644
index 0000000..06c4c00
--- /dev/null
+++ b/src/views/icons/switch.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-471 271 16 16" style="enable-background:new -471 271 16 16;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+</style>
+<g>
+	<polygon points="-467,271 -470,275 -468,275 -468,285 -466,285 -466,275 -464,275 	"/>
+	<polygon points="-459,287 -462,283 -460,283 -460,273 -458,273 -458,283 -456,283 	"/>
+	<rect x="-471" y="271" class="st0" width="16" height="16"/>
+</g>
+</svg>
diff --git a/src/views/js/main.js b/src/views/js/main.js
index 630ec9d..96af94a 100644
--- a/src/views/js/main.js
+++ b/src/views/js/main.js
@@ -50,6 +50,8 @@ function initEvents () {
     document.querySelector('#background-color .text').onclick = function() {showHide(this)}
     document.querySelector('#foreground-text input').oninput = function() {validateForegroundText(this.value)}
     document.querySelector('#background-text input').oninput = function() {validateBackgroundText(this.value)}
+    document.querySelector('#foreground-color .switch').onclick = function() {ipcRenderer.send('switchColors')}
+
     // initDetails
     document.querySelectorAll('details').forEach(function(details) {
         details.ontoggle = function() {
diff --git a/src/views/main.html b/src/views/main.html
index 8d68676..d050169 100644
--- a/src/views/main.html
+++ b/src/views/main.html
@@ -22,6 +22,7 @@ <h2>Foreground Colour</h2>
           <button class="text" aria-label="Foreground text input" aria-controls="foreground-text" aria-expanded="false"></button>
           <button class="rgb" aria-label="Foreground rgb sliders" aria-controls="foreground-rgb" aria-expanded="false"></button>
           <button class="picker" aria-label="Foreground color picker"></button>
+          <button class="switch" aria-label="Switch Colors"></button>
       </div>
     </section>
     <section id="foreground-text" hidden>