diff --git a/demos/side-by-side/index.html.in b/demos/side-by-side/index.html.in
index 45547452ad..edb9bcc971 100644
--- a/demos/side-by-side/index.html.in
+++ b/demos/side-by-side/index.html.in
@@ -40,6 +40,26 @@
                 <td>Rotate:</td>
                 <td>shift+drag (WebGL only)</td>
             </tr>
+            <tr>
+                <td>Brightness/contrast:</td>
+                <td><code>b</code>/<code>B</code>/<code>c</code>/<code>C</code> keys (WebGL only)</td>
+            </tr>
+            <tr>
+                <td>Hue/saturation:</td>
+                <td><code>h</code>/<code>H</code>/<code>s</code>/<code>S</code> keys (WebGL only)</td>
+            </tr>
+            <tr>
+                <td>Opacity:</td>
+                <td><code>o</code>/<code>O</code> keys</td>
+            </tr>
+            <tr>
+                <td>Visibility:</td>
+                <td><code>v</code>/<code>V</code> keys</td>
+            </tr>
+            <tr>
+                <td>Reset</td>
+                <td><code>0</code> key</td>
+            </tr>
         </table>
         <script src="@SRC@" type="text/javascript"></script>
     </body>
diff --git a/demos/side-by-side/side-by-side.js b/demos/side-by-side/side-by-side.js
index 3d670e8b76..68387625b8 100644
--- a/demos/side-by-side/side-by-side.js
+++ b/demos/side-by-side/side-by-side.js
@@ -1,4 +1,5 @@
 goog.require('ol.RendererHint');
+goog.require('ol.control.Keyboard');
 goog.require('ol.createMap');
 goog.require('ol.layer.MapQuestOpenAerial');
 goog.require('ol.view.Attribution');
@@ -29,6 +30,50 @@ var attributionView = new ol.view.Attribution(domMap);
 document.getElementById('attribution').appendChild(
     attributionView.getElement());
 
+var keyboardControl = new ol.control.Keyboard();
+keyboardControl.addCallback('0', function() {
+  layer.setBrightness(0);
+  layer.setContrast(0);
+  layer.setHue(0);
+  layer.setSaturation(0);
+  layer.setOpacity(1);
+  layer.setVisible(true);
+});
+keyboardControl.addCallback('b', function() {
+  layer.setBrightness(layer.getBrightness() - 0.1);
+});
+keyboardControl.addCallback('B', function() {
+  layer.setBrightness(layer.getBrightness() + 0.1);
+});
+keyboardControl.addCallback('c', function() {
+  layer.setContrast(layer.getContrast() - 0.1);
+});
+keyboardControl.addCallback('C', function() {
+  layer.setContrast(layer.getContrast() + 0.1);
+});
+keyboardControl.addCallback('h', function() {
+  layer.setHue(layer.getHue() - 0.1);
+});
+keyboardControl.addCallback('H', function() {
+  layer.setHue(layer.getHue() + 0.1);
+});
+keyboardControl.addCallback('o', function() {
+  layer.setOpacity(layer.getOpacity() - 0.1);
+});
+keyboardControl.addCallback('O', function() {
+  layer.setOpacity(layer.getOpacity() + 0.1);
+});
+keyboardControl.addCallback('s', function() {
+  layer.setSaturation(layer.getSaturation() - 0.1);
+});
+keyboardControl.addCallback('S', function() {
+  layer.setSaturation(layer.getSaturation() + 0.1);
+});
+keyboardControl.addCallback('vV', function() {
+  layer.setVisible(!layer.getVisible());
+});
+domMap.getControls().push(keyboardControl);
+
 goog.exportSymbol('layer', layer);
 goog.exportSymbol('layers', layers);
 goog.exportSymbol('domMap', domMap);