diff --git a/src/components/Atoms/Checkbox/Checkbox.js b/src/components/Atoms/Checkbox/Checkbox.js
index 8a71f32de..d545754d6 100644
--- a/src/components/Atoms/Checkbox/Checkbox.js
+++ b/src/components/Atoms/Checkbox/Checkbox.js
@@ -5,50 +5,67 @@ import styled from 'styled-components';
 import Text from '../Text/Text';
 import checkBoxIcon from './assets/tick.svg';
 
+// This label wraps both the input and the span that is the visual square checkbox you see */
+const Label = styled.label`
+  display: flex;
+  ${({ hasLabelAsString }) => hasLabelAsString && 'align-items: center;'}
+  margin-bottom: 8px;
+  ${({ labelColour }) => labelColour && `color: ${labelColour};`}
+`;
+
 const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
-  font-size: ${({ theme }) => theme.fontSize('sm')};
-  display: block;
-  box-sizing: border-box;
-  opacity: 0;
-  position: absolute;
-  left: 0px;
-  width: 24px;
-  height: 24px;
+  /* This input is not visible */
+  width: 0;
+  height: 0;
   margin: 0;
-  border: 1px solid ${({ theme }) => theme.color('grey')};
+  /* This span is actually the visual square Checkbox you see */
   + span {
     margin-right: 12px;
     width: 24px;
     height: 24px;
     border-radius: 4px;
-    background-color: ${({ theme }) => theme.color('white')};
-    border: 1px solid ${({ theme }) => theme.color('grey')};
+    background-color: ${({ theme, checkboxBg }) => (checkboxBg ? theme.color(checkboxBg) : theme.color('white'))};
+    border: 1px solid ${({ theme, checkboxBorder }) => (checkboxBorder ? theme.color(checkboxBorder) : theme.color('grey'))};
     float: left;
     flex-shrink: 0;
   }
+  /* Visual checkbox when ticked */
   :checked + span {
     background: url(${checkBoxIcon}) no-repeat center;
-    background-color: ${({ theme }) => theme.color('red')};
-    border-color: ${({ theme }) => theme.color('red')};
     background-size: contain;
+    background-color: ${({ theme, checkboxBgChecked }) => (checkboxBgChecked ? theme.color(checkboxBgChecked) : theme.color('red'))};
+    border: 1px solid ${({ theme, checkboxBorderChecked }) => (checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red'))};
   }
+  /* Visual checkbox when focused */
   :focus + span {
-    border-color: ${({ theme }) => theme.color('red')};
-    border-width: 1px;
+    border: 1px solid ${({ theme, checkboxBorderChecked }) => (checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red'))};
   }
 `;
 
-const Label = styled.label`
-  display: flex;
-  ${({ hasLabelAsString }) => hasLabelAsString && 'align-items: center;'}
-  margin-bottom: 8px;
-`;
-
 const Checkbox = React.forwardRef(({
-  label = undefined, value, children = undefined, ...rest
+  label = undefined,
+  value,
+  children = undefined,
+  labelColour,
+  checkboxBg,
+  checkboxBorder,
+  checkboxBgChecked,
+  checkboxBorderChecked,
+  ...rest
 }, ref) => (
-  <Label hasLabelAsString={!!label}>
-    <StyledCheckboxInput {...rest} value={value} ref={ref} />
+  <Label
+    hasLabelAsString={!!label}
+    labelColour={labelColour}
+  >
+    <StyledCheckboxInput
+      {...rest}
+      value={value}
+      ref={ref}
+      checkboxBg={checkboxBg}
+      checkboxBorder={checkboxBorder}
+      checkboxBgChecked={checkboxBgChecked}
+      checkboxBorderChecked={checkboxBorderChecked}
+    />
     <span />
     {label ? <Text weight="bold">{label}</Text> : children}
   </Label>
@@ -57,8 +74,13 @@ const Checkbox = React.forwardRef(({
 Checkbox.propTypes = {
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
+  children: PropTypes.node,
   label: PropTypes.string,
-  children: PropTypes.node
+  labelColour: PropTypes.string,
+  checkboxBg: PropTypes.string,
+  checkboxBorder: PropTypes.string,
+  checkboxBgChecked: PropTypes.string,
+  checkboxBorderChecked: PropTypes.string
 };
 
 export default Checkbox;
diff --git a/src/components/Atoms/Checkbox/Checkbox.md b/src/components/Atoms/Checkbox/Checkbox.md
index 804a4964d..d08b154f8 100644
--- a/src/components/Atoms/Checkbox/Checkbox.md
+++ b/src/components/Atoms/Checkbox/Checkbox.md
@@ -27,7 +27,16 @@ const LongLabel = () => (
     <Checkbox name="sport" value="Tennis" label="Tennis" />
     <Checkbox name="sport" value="Basketball" label="Basketball" />
     <Checkbox name="sport" value="Cycling" label="Cycling" />
-    <Checkbox name="sport" value="Football" label="Football" />
+    <Checkbox
+        name="sport"
+        value="Football"
+        label="Tennis (with wacky styling to test props)"
+        labelColour="pink"
+        checkboxBg="red"
+        checkboxBorder="blue"
+        checkboxBgChecked="green"
+        checkboxBorderChecked="red"
+    />
     <br/>
     <p>A checkbox with a long label containing links</p>
     <Checkbox name="node_label" value="node_label">
diff --git a/src/components/Atoms/Checkbox/Checkbox.test.js b/src/components/Atoms/Checkbox/Checkbox.test.js
index 7d52623fd..f91ae674f 100644
--- a/src/components/Atoms/Checkbox/Checkbox.test.js
+++ b/src/components/Atoms/Checkbox/Checkbox.test.js
@@ -22,16 +22,22 @@ it('renders correctly', () => {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
+    .c0 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+
     .c1 {
-      display: block;
-      box-sizing: border-box;
-      opacity: 0;
-      position: absolute;
-      left: 0px;
-      width: 24px;
-      height: 24px;
+      width: 0;
+      height: 0;
       margin: 0;
-      border: 1px solid #969598;
     }
 
     .c1 + span {
@@ -49,26 +55,13 @@ it('renders correctly', () => {
 
     .c1:checked + span {
       background: url(mock.asset) no-repeat center;
-      background-color: #E52630;
-      border-color: #E52630;
       background-size: contain;
+      background-color: #E52630;
+      border: 1px solid #E52630;
     }
 
     .c1:focus + span {
-      border-color: #E52630;
-      border-width: 1px;
-    }
-
-    .c0 {
-      display: -webkit-box;
-      display: -webkit-flex;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-align-items: center;
-      -webkit-box-align: center;
-      -ms-flex-align: center;
-      align-items: center;
-      margin-bottom: 8px;
+      border: 1px solid #E52630;
     }
 
     <label
@@ -98,16 +91,22 @@ it('renders correctly', () => {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
+    .c0 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+
     .c1 {
-      display: block;
-      box-sizing: border-box;
-      opacity: 0;
-      position: absolute;
-      left: 0px;
-      width: 24px;
-      height: 24px;
+      width: 0;
+      height: 0;
       margin: 0;
-      border: 1px solid #969598;
     }
 
     .c1 + span {
@@ -125,26 +124,13 @@ it('renders correctly', () => {
 
     .c1:checked + span {
       background: url(mock.asset) no-repeat center;
-      background-color: #E52630;
-      border-color: #E52630;
       background-size: contain;
+      background-color: #E52630;
+      border: 1px solid #E52630;
     }
 
     .c1:focus + span {
-      border-color: #E52630;
-      border-width: 1px;
-    }
-
-    .c0 {
-      display: -webkit-box;
-      display: -webkit-flex;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-align-items: center;
-      -webkit-box-align: center;
-      -ms-flex-align: center;
-      align-items: center;
-      margin-bottom: 8px;
+      border: 1px solid #E52630;
     }
 
     <label