diff --git a/TODO.md b/TODO.md
index c9e13b620..b12e3e3cd 100644
--- a/TODO.md
+++ b/TODO.md
@@ -30,7 +30,7 @@
 
 - Make gtk2 check/radio buttons a bit smaller for Qt apps ([#78](../../issues/78))
 
-- Use `#757575` as check/radio buttons color for only web interfaces ([#123](../../issues/123), if possible)
+- Use `#757575` as check/radio buttons color for some web interfaces ([#123](../../issues/123), if possible)
 
 - Make compact variant more compact ([#79](../../issues/79))
 
diff --git a/src/_sass/gtk/apps/_misc.scss b/src/_sass/gtk/apps/_misc.scss
index caa928e1f..cfe64f90d 100644
--- a/src/_sass/gtk/apps/_misc.scss
+++ b/src/_sass/gtk/apps/_misc.scss
@@ -80,6 +80,16 @@ window.background:not(.csd) {
     > checkbutton > check { @extend %small_check; }
 
     > radiobutton > radio { @extend %small_radio; }
+
+    // make check/radio visible regardless of whether the background is bright or dark
+    > checkbutton > check:not(:checked),
+    > radiobutton > radio:not(:checked) {
+      color: $grey_600;
+
+      &:hover, &:active { color: $grey_900; }
+
+      &:disabled { color: rgba($grey_600, 0.5); }
+    }
   }
 
   // remove ugly border around the menus
diff --git a/src/gtk/3.20/gtk-compact.css b/src/gtk/3.20/gtk-compact.css
index 07a7f3bfb..9f4ee5ce3 100644
--- a/src/gtk/3.20/gtk-compact.css
+++ b/src/gtk/3.20/gtk-compact.css
@@ -4572,6 +4572,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;
diff --git a/src/gtk/3.20/gtk-dark-compact.css b/src/gtk/3.20/gtk-dark-compact.css
index e8acab3fb..2cba7b4ad 100644
--- a/src/gtk/3.20/gtk-dark-compact.css
+++ b/src/gtk/3.20/gtk-dark-compact.css
@@ -4572,6 +4572,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;
diff --git a/src/gtk/3.20/gtk-dark.css b/src/gtk/3.20/gtk-dark.css
index 13b6c5c35..23dc6ef11 100644
--- a/src/gtk/3.20/gtk-dark.css
+++ b/src/gtk/3.20/gtk-dark.css
@@ -4572,6 +4572,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;
diff --git a/src/gtk/3.20/gtk-light-compact.css b/src/gtk/3.20/gtk-light-compact.css
index fc25a1974..8241dea3d 100644
--- a/src/gtk/3.20/gtk-light-compact.css
+++ b/src/gtk/3.20/gtk-light-compact.css
@@ -4572,6 +4572,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;
diff --git a/src/gtk/3.20/gtk-light.css b/src/gtk/3.20/gtk-light.css
index 955979afe..1995daf36 100644
--- a/src/gtk/3.20/gtk-light.css
+++ b/src/gtk/3.20/gtk-light.css
@@ -4572,6 +4572,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;
diff --git a/src/gtk/3.20/gtk.css b/src/gtk/3.20/gtk.css
index 63898a0d7..dcd897a6d 100644
--- a/src/gtk/3.20/gtk.css
+++ b/src/gtk/3.20/gtk.css
@@ -4572,6 +4572,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;
diff --git a/src/gtk/3.22/gtk-compact.css b/src/gtk/3.22/gtk-compact.css
index 105667458..6dcd3750a 100644
--- a/src/gtk/3.22/gtk-compact.css
+++ b/src/gtk/3.22/gtk-compact.css
@@ -4824,6 +4824,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;
diff --git a/src/gtk/3.22/gtk-dark-compact.css b/src/gtk/3.22/gtk-dark-compact.css
index 3c47626e5..552af8d10 100644
--- a/src/gtk/3.22/gtk-dark-compact.css
+++ b/src/gtk/3.22/gtk-dark-compact.css
@@ -4824,6 +4824,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;
diff --git a/src/gtk/3.22/gtk-dark.css b/src/gtk/3.22/gtk-dark.css
index c2969ec38..ebeca1b37 100644
--- a/src/gtk/3.22/gtk-dark.css
+++ b/src/gtk/3.22/gtk-dark.css
@@ -4824,6 +4824,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;
diff --git a/src/gtk/3.22/gtk-light-compact.css b/src/gtk/3.22/gtk-light-compact.css
index e67d8f93f..22ca9cf28 100644
--- a/src/gtk/3.22/gtk-light-compact.css
+++ b/src/gtk/3.22/gtk-light-compact.css
@@ -4824,6 +4824,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;
diff --git a/src/gtk/3.22/gtk-light.css b/src/gtk/3.22/gtk-light.css
index 6a31ed7fc..6679ea4db 100644
--- a/src/gtk/3.22/gtk-light.css
+++ b/src/gtk/3.22/gtk-light.css
@@ -4824,6 +4824,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;
diff --git a/src/gtk/3.22/gtk.css b/src/gtk/3.22/gtk.css
index e393b9ef9..7f313b8f6 100644
--- a/src/gtk/3.22/gtk.css
+++ b/src/gtk/3.22/gtk.css
@@ -4824,6 +4824,22 @@ window.background:not(.csd) > widget > button > button:active {
   background-image: image(alpha(currentColor, 0.1));
 }
 
+window.background:not(.csd) > widget > checkbutton > check:not(:checked),
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
+  color: #757575;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
+  color: #212121;
+}
+
+window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
+window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
+  color: rgba(117, 117, 117, 0.5);
+}
+
 window.background:not(.csd) > window > menu,
 window.background:not(.csd) > menu > menu {
   border: none;