diff --git a/packages/web/src/scss/components/Radio/_Radio.scss b/packages/web/src/scss/components/Radio/_Radio.scss
index e185d1f7fa..76914e3047 100644
--- a/packages/web/src/scss/components/Radio/_Radio.scss
+++ b/packages/web/src/scss/components/Radio/_Radio.scss
@@ -1,4 +1,8 @@
 // 1. Use `box-shadow` to ensure the state of the radio is visible when printed.
+// 2. We need to set the background-color of the non-disabled Radio input to initial color when it is hovered
+//    or active, because we need it contrasting with the background color.
+// 3. We need to set the color of the validation text and helper text to inherit when the Item is hovered or active,
+//    because we need it contrasting with the background color.
 
 @use 'sass:map';
 @use '../../theme/form-fields' as form-fields-theme;
@@ -20,11 +24,11 @@ $_field-name: 'Radio';
     margin: theme.$input-margin;
     font: inherit;
     border-radius: theme.$input-border-radius;
-    background-color: transparent;
+    background-color: form-fields-theme.$input-background-color;
     place-content: center;
 
     &:checked {
-        border-color: form-fields-theme.$inline-field-input-color-checked;
+        border-color: form-fields-theme.$inline-field-input-border-color-checked;
     }
 
     &::before {
@@ -47,7 +51,7 @@ $_field-name: 'Radio';
 .Radio__helperText {
     @include form-fields-tools.helper-text();
 
-    margin-left: form-fields-theme.$gap;
+    margin-left: form-fields-theme.$inline-field-gap;
 }
 
 @include form-fields-tools.input-field-validation-states(
@@ -59,7 +63,7 @@ $_field-name: 'Radio';
 .Radio__label {
     @include form-fields-tools.inline-field-label();
 
-    margin-left: form-fields-theme.$gap;
+    margin-left: form-fields-theme.$inline-field-gap;
 }
 
 .Radio__label--hidden {
@@ -70,54 +74,57 @@ $_field-name: 'Radio';
     @include form-fields-tools.label-required();
 }
 
-.Radio--disabled {
-    @include form-fields-tools.inline-field-root-disabled();
-}
+.Radio--item {
+    @include form-fields-tools.item();
 
-.Radio--disabled .Radio__label {
-    @include form-fields-tools.label-disabled();
+    display: flex;
 }
 
-.Radio--disabled .Radio__helperText {
-    @include form-fields-tools.helper-text-disabled();
+.Radio--item:is(.Radio--disabled, .Radio.is-disabled) {
+    @include form-fields-tools.item-disabled();
 }
 
-.Radio--disabled > .Radio__input,
-.Radio > .Radio__input:disabled {
-    border-color: form-fields-theme.$input-color-disabled;
-
-    &:checked {
-        border-color: form-fields-theme.$input-color-disabled;
-    }
+.Radio--item .Radio__label {
+    @include form-fields-tools.item-label();
 }
 
-.Radio--disabled > .Radio__input::before,
-.Radio > .Radio__input:disabled::before {
-    box-shadow: theme.$input-box-shadow-disabled; // 1.
+.Radio--item .Radio__helperText {
+    @include form-fields-tools.item-helper-text();
 }
 
-.Radio--item {
-    @include form-fields-tools.item();
+:is(.Radio--disabled, .Radio.is-disabled) {
+    @include form-fields-tools.inline-field-root-disabled();
+}
 
-    display: flex;
+:is(.Radio--disabled, .Radio.is-disabled) .Radio__label {
+    @include form-fields-tools.label-disabled();
 }
 
-.Radio--item.Radio--disabled {
-    @include form-fields-tools.item-disabled();
+:is(.Radio--disabled, .Radio.is-disabled) .Radio__helperText {
+    @include form-fields-tools.helper-text-disabled();
 }
 
-// stylelint-disable selector-max-class, selector-max-compound-selectors, selector-max-specificity -- We need to override the default styles for the label in Item.
-.Radio--item .Radio__input:checked ~ .Radio__label,
-.Radio--item .Radio__input:checked ~ .Radio__text > .Radio__label {
-    // stylelint-enable selector-max-class, selector-max-compound-selectors, selector-max-specificity
-    @include form-fields-tools.item-label-checked();
+:is(.Radio--disabled, .Radio.is-disabled) > .Radio__input,
+.Radio > .Radio__input:disabled {
+    border-color: form-fields-theme.$input-border-color-disabled;
+    background-color: form-fields-theme.$input-background-color-disabled;
+
+    &:checked {
+        border-color: form-fields-theme.$input-border-color-disabled;
+    }
+
+    &::before {
+        box-shadow: theme.$input-box-shadow-disabled; // 1.
+    }
 }
 
-.Radio--item .Radio__helperText {
-    @include form-fields-tools.item-helper-text();
+// stylelint-disable selector-max-specificity -- 2.
+.Radio--item:not(.Radio--disabled, .Radio.is-disabled) .Radio__input:is(:hover, :active):not(:checked) {
+    background-color: form-fields-theme.$input-background-color;
 }
 
-.Radio--item:not(.Radio--disabled):hover .Radio__helperText,
-.Radio--item:not(.Radio--disabled):active .Radio__helperText {
+// 3.
+.Radio--item:not(.Radio--disabled, .Radio.is-disabled):is(:hover, :active) .Radio__helperText {
     color: inherit;
 }
+// stylelint-enable selector-max-specificity
diff --git a/packages/web/src/scss/components/Radio/_theme.scss b/packages/web/src/scss/components/Radio/_theme.scss
index f4e43062c4..985bc36c72 100644
--- a/packages/web/src/scss/components/Radio/_theme.scss
+++ b/packages/web/src/scss/components/Radio/_theme.scss
@@ -1,16 +1,16 @@
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
 @use '../../settings/transitions';
 @use '../../theme/form-fields' as form-fields-theme;
 
-$input-border-radius: 50%;
+$input-border-radius: global-tokens.$radius-full;
 $input-size: 20px;
-$input-margin: 2px;
+$input-margin: global-tokens.$space-200;
 $input-inner-dot-size: 10px;
-$input-box-shadow-x: tokens.$space-600;
-$input-box-shadow-y: tokens.$space-600;
+$input-box-shadow-x: global-tokens.$space-700;
+$input-box-shadow-y: global-tokens.$space-700;
 $input-box-shadow-before: inset $input-box-shadow-x $input-box-shadow-y
-    form-fields-theme.$inline-field-input-color-checked;
+    form-fields-theme.$inline-field-input-background-color-checked;
 $input-box-shadow-disabled: inset $input-box-shadow-x $input-box-shadow-y form-fields-theme.$input-color-disabled;
 $input-transition-duration: transitions.$duration-100;
 $input-transition-timing: transitions.$timing-eased-in-out;
-$input-focus-shadow: tokens.$focus;
+$input-focus-shadow: global-tokens.$focus;
diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss
index 4dcbe6460b..e57df2b5d5 100644
--- a/packages/web/src/scss/components/index.scss
+++ b/packages/web/src/scss/components/index.scss
@@ -22,8 +22,7 @@
 
 // @forward 'Pill';
 @forward 'ProductLogo';
-
-// @forward 'Radio';
+@forward 'Radio';
 @forward 'ScrollView';
 
 // @forward 'Select';
diff --git a/tests/e2e/demo-components-compare.spec.ts b/tests/e2e/demo-components-compare.spec.ts
index 1a4ad3410a..3080a2cc75 100644
--- a/tests/e2e/demo-components-compare.spec.ts
+++ b/tests/e2e/demo-components-compare.spec.ts
@@ -16,7 +16,6 @@ const IGNORED_TESTS: string[] = [
   'Item',
   'Link',
   'Pill',
-  'Radio',
   'Select',
   'Spinner',
   'Stack',
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/radio-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/radio-chromium-linux.png
index cdc054aefe..1b93aee64b 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/radio-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/radio-chromium-linux.png differ