diff --git a/gr-image-diff-tool/gr-image-diff-tool.html b/gr-image-diff-tool/gr-image-diff-tool.html
index 68e7f07..7f55f9a 100644
--- a/gr-image-diff-tool/gr-image-diff-tool.html
+++ b/gr-image-diff-tool/gr-image-diff-tool.html
@@ -21,7 +21,10 @@
   <template>
     <style>
       :host {
+        border-top: 1px solid var(--border-color, #ddd);
         display: block;
+        margin-top: .5em;
+        padding: 1em var(--default-horizontal-margin);
       }
     </style>
 
diff --git a/gr-resemble-diff-mode/gr-resemble-diff-mode.html b/gr-resemble-diff-mode/gr-resemble-diff-mode.html
index 6ec3b16..a3ea88e 100644
--- a/gr-resemble-diff-mode/gr-resemble-diff-mode.html
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode.html
@@ -21,13 +21,37 @@
       :host {
         display: block;
       }
+      h2 {
+        display: none;
+      }
       #imageDiff {
         border: 1px solid var(--border-color, #ddd);
-        display: block;
-        margin: 0 auto;
+      }
+      :host([loading]) #imageDiff {
+        display: none;
+      }
+      :host([loading]) h2 {
+        display: inline;
+        padding: 1em 0;
+      }
+      .diffContainer {
+        display: flex;
+        justify-content: space-around;
+        width: 100%;
       }
     </style>
-    <img id="imageDiff">
+    <div class="diffContainer">
+      <h2>Loading...</h2>
+      <img id="imageDiff">
+    </div>
+    <label>
+      <input
+          id="ignoreColorsToggle"
+          type="checkbox"
+          checked$="[[_ignoreColors]]"
+          on-tap="_handleIgnoreColorsToggle">
+      Ignore colors
+    </label>
   </template>
   <script src="gr-resemble-diff-mode.js"></script>
 </dom-module>
\ No newline at end of file
diff --git a/gr-resemble-diff-mode/gr-resemble-diff-mode.js b/gr-resemble-diff-mode/gr-resemble-diff-mode.js
index 50661b8..1bce2ee 100644
--- a/gr-resemble-diff-mode/gr-resemble-diff-mode.js
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode.js
@@ -20,36 +20,83 @@
     properties: {
       baseImage: Object,
       revisionImage: Object,
+      _ignoreColors: {
+        type: Boolean,
+        value: false,
+      },
+      loading: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+      },
     },
 
     observers: [
       '_handleImageDiff(baseImage, revisionImage)',
     ],
 
-    _handleImageDiff(base, revision) {
-      if (base && revision) {
-        const baseEncoded = this.getDataUrl(base);
-        const revisionEncoded = this.getDataUrl(revision);
-        return this.compareImages(baseEncoded, revisionEncoded).then(src => {
-          this.$.imageDiff.setAttribute('src', src);
-        });
-      }
+    attached() {
+      resemble.outputSettings({
+        errorType: 'movement',
+        largeImageThreshold: 450,
+      });
     },
 
-    compareImages(baseEncoded, revisionEncoded) {
-      return new Promise((resolve, reject) =>
-          resemble(baseEncoded).compareTo(revisionEncoded).onComplete(data => {
-            if (data.error) {
-              reject();
-            } else {
-              resolve(data.getImageDataUrl());
-            }
-          })
-      );
+    _handleImageDiff() {
+      this.reload();
     },
 
-    getDataUrl(image) {
+    _setImageDiffSrc(src) {
+      delete this.$.imageDiff.src;
+      this.$.imageDiff.src = src;
+    },
+
+    _getDataUrl(image) {
       return 'data:' + image['type'] + ';base64,' + image['body'];
     },
+
+    _maybeIgnoreColors(diffProcess, ignoreColors) {
+      if (ignoreColors) {
+        diffProcess.ignoreColors();
+      } else {
+        diffProcess.ignoreNothing();
+      }
+      return diffProcess;
+    },
+
+    _createDiffProcess(base, rev, ignoreColors) {
+      const process = resemble(base).compareTo(rev);
+      return this._maybeIgnoreColors(process, ignoreColors);
+    },
+
+    /**
+     * Reloads the diff. Resemble 1.2.1 seems to have an issue with successive
+     * reloads via the repaint() function, so this implementation creates a
+     * fresh diff each time it is called.
+     *
+     * @return {Promise} resolves if and when the reload succeeds.
+     */
+    reload() {
+      this.loading = true;
+      if (this.baseImage && this.revisionImage) {
+        const base = this._getDataUrl(this.baseImage);
+        const rev = this._getDataUrl(this.revisionImage);
+
+        return new Promise((resolve, reject) => {
+          this._createDiffProcess(base, rev, this._ignoreColors)
+              .onComplete(data => {
+                this._setImageDiffSrc(data.getImageDataUrl());
+                this.loading = false;
+                resolve();
+              });
+        });
+      }
+      this.loading = false;
+    },
+
+    _handleIgnoreColorsToggle() {
+      this._ignoreColors = !this._ignoreColors;
+      this.reload();
+    },
   });
-})();
\ No newline at end of file
+})();
diff --git a/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html b/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
index 65460cc..c9ffb5d 100644
--- a/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
@@ -38,46 +38,60 @@
 <script>
   suite('gr-resemble-diff-mode tests', () => {
     let element;
+    let sandbox;
 
     setup(() => {
+      sandbox = sinon.sandbox.create();
       element = fixture('basicFixture');
     });
 
+    teardown(() => { sandbox.restore(); })
+
     test('test initialization', () => {
       assert.notEqual(element, null);
       assert.equal(element.baseImage, null);
       assert.equal(element.revisionImage, null);
     });
 
-    test('test getDataUrl', () => {
-      element.baseImage = {
-        type: 'image/png',
-        body: 'SGVsbG8=',
-      };
-      const desiredOutput = 'data:image/png;base64,SGVsbG8=';
-      assert.equal(element.getDataUrl(element.baseImage), desiredOutput);
+    test('_setImageDiffSrc', () => {
+      const img = element.$.imageDiff;
+      const src = 'data:image/png;base64,SGVsbG8=';
+      assert.notOk(img.getAttribute('src'));
+      element._setImageDiffSrc(src);
+      assert.equal(img.getAttribute('src'), src);
     });
 
-    test('test resemble mode image diff', () => {
-      const img = element.$.imageDiff;
-      const expected_result = 'data:image/png;base64,SGVsbG8V29ybGQ==';
-      assert.isFalse(img.hasAttribute('src'));
-      element.baseImage = {
-        type: 'image/png',
-        body: 'SGVsbG8=',
+    test('_maybeIgnoreColors', () => {
+      const dummyProcess = {
+        ignoreColors: sandbox.stub(),
+        ignoreNothing: sandbox.stub(),
       };
-      assert.isFalse(img.hasAttribute('src'));
-      element.revisionImage = {
-        type: 'image/png',
-        body: 'V29ybGQ=',
-      };
+      element._maybeIgnoreColors(dummyProcess, false);
+      assert.isFalse(dummyProcess.ignoreColors.called);
+      assert.isTrue(dummyProcess.ignoreNothing.called);
+      element._maybeIgnoreColors(dummyProcess, true);
+      assert.isTrue(dummyProcess.ignoreColors.called);
+    });
+
+    test('_handleIgnoreColorsToggle', () => {
+      sandbox.stub(element, 'reload');
+      element._ignoreColors = false;
+      assert.isFalse(element.$.ignoreColorsToggle.checked);
+      MockInteractions.tap(element.$.ignoreColorsToggle);
       flushAsynchronousOperations();
-      sinon.stub(element, 'compareImages')
-          .returns(Promise.resolve(expected_result));
-      return element._handleImageDiff(element.baseImage, element.revisionImage)
-          .then(() => {
-            assert.equal(img.src, expected_result);
-          });
+
+      assert.isTrue(element._ignoreColors);
+      assert.isTrue(element.reload.called);
+    });
+
+    test('calls reload', () => {
+      sandbox.stub(element, 'reload');
+      element.baseImage = {};
+      assert.equal(element.reload.callCount, 0);
+      element.revisionImage = {};
+      assert.equal(element.reload.callCount, 1);
+      MockInteractions.tap(element.$.ignoreColorsToggle);
+      assert.equal(element.reload.callCount, 2);
     });
   });
 </script>
\ No newline at end of file