diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
index 50f4ee7c96..0bcb708cc3 100644
--- a/ionic/components/checkbox/checkbox.ts
+++ b/ionic/components/checkbox/checkbox.ts
@@ -39,7 +39,7 @@ import {Form} from '../../util/form';
   },
   template:
     '<div class="item-inner">' +
-      '<div class="media-checkbox" disable-activated>' +
+      '<div class="checkbox-media" disable-activated>' +
         '<div class="checkbox-icon"></div>' +
       '</div>' +
       '<ion-item-content id="{{labelId}}">' +
diff --git a/ionic/components/checkbox/modes/ios.scss b/ionic/components/checkbox/modes/ios.scss
index 1999356935..e604762cb2 100644
--- a/ionic/components/checkbox/modes/ios.scss
+++ b/ionic/components/checkbox/modes/ios.scss
@@ -1,15 +1,27 @@
 @import "../../../globals.ios";
 
-
 // iOS Checkbox Structure
 // --------------------------------------------------
 
-$checkbox-ios-icon-size:             21px !default;
-$checkbox-ios-background-color-off:  $list-ios-background-color !default;
-$checkbox-ios-border-color-off:      $list-ios-border-color !default;
-$checkbox-ios-background-color-on:   map-get($colors-ios, primary) !default;
-$checkbox-ios-border-color-on:       map-get($colors-ios, primary) !default;
-$checkbox-ios-checkmark-color-on:    $background-ios-color !default;
+
+$checkbox-ios-background-color-off:       $list-ios-background-color !default;
+$checkbox-ios-background-color-on:        map-get($colors-ios, primary) !default;
+
+$checkbox-ios-icon-size:                  21px !default;
+$checkbox-ios-icon-border-color-on:       map-get($colors-ios, primary) !default;
+$checkbox-ios-icon-border-color-off:      $list-ios-border-color !default;
+$checkbox-ios-icon-border-width:          1px !default;
+$checkbox-ios-icon-border-style:          solid !default;
+$checkbox-ios-icon-border-radius:         50% !default;
+
+$checkbox-ios-icon-checkmark-width:       1px !default;
+$checkbox-ios-icon-checkmark-style:       solid !default;
+$checkbox-ios-icon-checkmark-color:       $background-ios-color !default;
+
+$checkbox-ios-media-margin:               $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px !default;
+
+$checkbox-ios-disabled-opacity:           0.5 !default;
+$checkbox-ios-disabled-text-color:        $subdued-text-ios-color !default;
 
 
 ion-checkbox {
@@ -18,12 +30,14 @@ ion-checkbox {
 
   &[aria-checked=true] .checkbox-icon {
     background-color: $checkbox-ios-background-color-on;
-    border-color: $checkbox-ios-border-color-on;
+    border-color: $checkbox-ios-icon-border-color-on;
   }
 
   &[aria-checked=true] .checkbox-icon:after {
     position: absolute;
-    border: 1px solid $checkbox-ios-checkmark-color-on;
+    border-width: $checkbox-ios-icon-checkmark-width;
+    border-style: $checkbox-ios-icon-checkmark-style;
+    border-color: $checkbox-ios-icon-checkmark-color;
     top: 3px;
     left: 7px;
     width: 4px;
@@ -35,19 +49,19 @@ ion-checkbox {
   }
 
   &.item.activated {
-    background-color: $list-ios-background-color;
+    background-color: $checkbox-ios-background-color-off;
   }
 
 }
 
 ion-checkbox[aria-disabled=true] {
-  opacity: 0.5;
-  color: $subdued-text-ios-color;
+  opacity: $checkbox-ios-disabled-opacity;
+  color: $checkbox-ios-disabled-text-color;
   pointer-events: none;
 }
 
-.media-checkbox {
-  margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px;
+.checkbox-media {
+  margin: $checkbox-ios-media-margin;
 }
 
 .checkbox-icon {
@@ -55,8 +69,10 @@ ion-checkbox[aria-disabled=true] {
   display: block;
   width: $checkbox-ios-icon-size;
   height: $checkbox-ios-icon-size;
-  border-radius: 50%;
-  border: 1px solid $checkbox-ios-border-color-off;
+  border-radius: $checkbox-ios-icon-border-radius;
+  border-width: $checkbox-ios-icon-border-width;
+  border-style: $checkbox-ios-icon-border-style;
+  border-color: $checkbox-ios-icon-border-color-off;
   background-color: $checkbox-ios-background-color-off;
 }
 
@@ -69,6 +85,10 @@ ion-checkbox[aria-disabled=true] {
   ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
     background-color: $bg-on;
     border-color: $bg-on;
+
+    &:after {
+      border-color: inverse($bg-on);
+    }
   }
 
 }
diff --git a/ionic/components/checkbox/modes/md.scss b/ionic/components/checkbox/modes/md.scss
index 528a216b1b..1d280bff94 100644
--- a/ionic/components/checkbox/modes/md.scss
+++ b/ionic/components/checkbox/modes/md.scss
@@ -3,14 +3,28 @@
 // Material Design Checkbox
 // --------------------------------------------------
 
-$checkbox-md-icon-size:             16px !default;
-$checkbox-md-background-color-off:  $list-md-background-color !default;
-$checkbox-md-border-width:          2px !default;
-$checkbox-md-border-radius:         2px !default;
-$checkbox-md-border-color-off:      darken($list-md-border-color, 40%) !default;
-$checkbox-md-background-color-on:   map-get($colors-md, primary) !default;
-$checkbox-md-border-color-on:       map-get($colors-md, primary) !default;
-$checkbox-md-checkmark-color-on:    $background-md-color !default;
+$checkbox-md-border-bottom-width:        1px !default;
+$checkbox-md-border-bottom-style:        solid !default;
+$checkbox-md-border-bottom-color:        $list-md-border-color !default;
+$checkbox-md-padding:                    $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0 !default;
+$checkbox-md-margin:                     0 !default;
+$checkbox-md-media-margin:               $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px !default;
+$checkbox-md-disabled-opacity:           0.5 !default;
+$checkbox-md-disabled-text-color:        $subdued-text-md-color !default;
+
+$checkbox-md-icon-background-color-off:  $list-md-background-color !default;
+$checkbox-md-icon-background-color-on:   map-get($colors-md, primary) !default;
+$checkbox-md-icon-size:                  16px !default;
+
+$checkbox-md-icon-checkmark-width:       2px !default;
+$checkbox-md-icon-checkmark-style:       solid !default;
+$checkbox-md-icon-checkmark-color:       $background-md-color !default;
+
+$checkbox-md-icon-border-width:          2px !default;
+$checkbox-md-icon-border-style:          solid !default;
+$checkbox-md-icon-border-radius:         2px !default;
+$checkbox-md-icon-border-color-off:      darken($list-md-border-color, 40%) !default;
+$checkbox-md-icon-border-color-on:       map-get($colors-md, primary) !default;
 
 
 ion-checkbox {
@@ -23,19 +37,23 @@ ion-checkbox {
   }
 
   ion-item-content {
-    border-bottom: 1px solid $list-md-border-color;
-    margin: 0;
-    padding: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0;
+    border-bottom-width: $checkbox-md-border-bottom-width;
+    border-bottom-style: $checkbox-md-border-bottom-style;
+    border-bottom-color: $checkbox-md-border-bottom-color;
+    margin: $checkbox-md-margin;
+    padding: $checkbox-md-padding;
   }
 
   &[aria-checked=true] .checkbox-icon {
-    background-color: $checkbox-md-background-color-on;
-    border-color: $checkbox-md-border-color-on;
+    background-color: $checkbox-md-icon-background-color-on;
+    border-color: $checkbox-md-icon-border-color-on;
   }
 
   &[aria-checked=true] .checkbox-icon:after {
     position: absolute;
-    border: 2px solid $checkbox-md-checkmark-color-on;
+    border-width: $checkbox-md-icon-checkmark-width;
+    border-style: $checkbox-md-icon-checkmark-style;
+    border-color: $checkbox-md-icon-checkmark-color;
     top: 0;
     left: 3px;
     width: 4px;
@@ -49,23 +67,24 @@ ion-checkbox {
 }
 
 ion-checkbox[aria-disabled=true] {
-  opacity: 0.5;
-  color: $subdued-text-md-color;
+  opacity: $checkbox-md-disabled-opacity;
+  color: $checkbox-md-disabled-text-color;
   pointer-events: none;
 }
 
-.media-checkbox {
-  // TODO convert these to sass variables
-  margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px;
+.checkbox-media {
+  margin: $checkbox-md-media-margin;
 }
 
 .checkbox-icon {
   position: relative;
   width: $checkbox-md-icon-size;
   height: $checkbox-md-icon-size;
-  border-radius: $checkbox-md-border-radius;
-  border: $checkbox-md-border-width solid $checkbox-md-border-color-off;
-  background-color: $checkbox-md-background-color-off;
+  border-radius: $checkbox-md-icon-border-radius;
+  border-width: $checkbox-md-icon-border-width;
+  border-style: $checkbox-md-icon-border-style;
+  border-color: $checkbox-md-icon-border-color-off;
+  background-color: $checkbox-md-icon-background-color-off;
 }
 
 
@@ -77,6 +96,10 @@ ion-checkbox[aria-disabled=true] {
   ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
     background-color: $bg-on;
     border-color: $bg-on;
+
+    &:after {
+      border-color: inverse($bg-on);
+    }
   }
 
 }
diff --git a/ionic/components/checkbox/test/basic/e2e.ts b/ionic/components/checkbox/test/basic/e2e.ts
index 3518ab9d8e..38ebef5a81 100644
--- a/ionic/components/checkbox/test/basic/e2e.ts
+++ b/ionic/components/checkbox/test/basic/e2e.ts
@@ -1,6 +1,6 @@
 
 it('should check apple, enable/check grape, submit form', function() {
-  element(by.css('[ng-control=appleCtrl] media-checkbox')).click();
+  element(by.css('[ng-control=appleCtrl] .checkbox-media')).click();
   element(by.css('.e2eGrapeDisabled')).click();
   element(by.css('.e2eGrapeChecked')).click();
   element(by.css('.e2eSubmit')).click();
diff --git a/ionic/components/checkbox/test/basic/main.html b/ionic/components/checkbox/test/basic/main.html
index b34a99b90c..775e4af06a 100644
--- a/ionic/components/checkbox/test/basic/main.html
+++ b/ionic/components/checkbox/test/basic/main.html
@@ -28,6 +28,10 @@
         secondary color
       </ion-checkbox>
 
+      <ion-checkbox light checked="true">
+        light color
+      </ion-checkbox>
+
     </ion-list>
 
   </form>