diff --git a/src/components/checkboxgroup/_checkboxgroup.scss b/src/components/checkboxgroup/_checkboxgroup.scss
index 8bcdac8..2800fca 100644
--- a/src/components/checkboxgroup/_checkboxgroup.scss
+++ b/src/components/checkboxgroup/_checkboxgroup.scss
@@ -35,6 +35,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    border: 1px solid $light-gray;
   }
 
   &__label:hover input[type='checkbox'] {
diff --git a/src/components/radiobutton/_radiobutton.scss b/src/components/radiobutton/_radiobutton.scss
index f47761f..aa9b3e8 100644
--- a/src/components/radiobutton/_radiobutton.scss
+++ b/src/components/radiobutton/_radiobutton.scss
@@ -58,6 +58,7 @@
     appearance: none;
     margin: 0;
     border-radius: 1rem;
+    border: 1px solid $light-gray;
   }
 
   input[type='radio']:checked {
diff --git a/src/site/_mixins.scss b/src/site/_mixins.scss
index ac137a2..e930f4e 100644
--- a/src/site/_mixins.scss
+++ b/src/site/_mixins.scss
@@ -69,7 +69,7 @@
 @mixin widget {
   margin: $space-xs 0;
   border: $border-light;
-  border-color: $very-light-gray;
+  border-color: $light-gray;
   height: $field-height;
   color: $secondary;
   padding: 0 $space-s;
@@ -80,7 +80,7 @@
   box-shadow: 0 8px 16px 0px rgba($color: #000000, $alpha: .02);
 
   &:hover:not([disabled]) {
-    border-color: $light-gray;
+    border-color: $gray;
   }
 
   &:focus:not([disabled]) {
diff --git a/src/site/_variables.scss b/src/site/_variables.scss
index 8b3fa5a..1803d10 100644
--- a/src/site/_variables.scss
+++ b/src/site/_variables.scss
@@ -10,8 +10,8 @@ $background-color: #eee;
 $error: #c61d17;
 $light-error: rgba(235,60,54,0.05);
 $white: #fff;
-$gray: rgb(109, 109, 109);
-$light-gray: #969696;
+$gray: rgb(107, 107, 107);
+$light-gray: #8E8E8E;
 $very-light-gray: #ddd;
 $disabled-color: $background-color;