diff --git a/.changeset/curvy-lions-raise.md b/.changeset/curvy-lions-raise.md
new file mode 100644
index 0000000000..ca227fc30b
--- /dev/null
+++ b/.changeset/curvy-lions-raise.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": patch
+---
+
+:bug: radio border blir mørkere hvis bakgrunnen blir det
diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css
index 6463200fc3..c558672f3c 100644
--- a/@navikt/core/css/form/radio-checkbox.css
+++ b/@navikt/core/css/form/radio-checkbox.css
@@ -31,11 +31,12 @@
 .navds-radio__label::before {
   content: "";
   background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
-  width: 1.5rem;
-  height: 1.5rem;
+  height: 1.25rem;
+  width: 1.25rem;
+  margin: 2px;
   border-radius: var(--a-border-radius-medium);
   flex-shrink: 0;
+  border: 2px solid var(--ac-radio-checkbox-border, var(--a-border-default));
 }
 
 .navds-radio__label::before {
@@ -70,25 +71,25 @@
 
 .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
 .navds-radio__input:focus-visible + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:focus + .navds-checkbox__label::before,
   .navds-radio__input:focus + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--a-border-focus);
   }
 }
 
 .navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
 .navds-radio__input:hover:focus-visible + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
   .navds-radio__input:hover:focus + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--a-border-focus);
   }
 }
 
@@ -146,31 +147,31 @@
 
 .navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
 .navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
-  box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+  /* box-shadow: 0 0 0 1px white, 0px 0px 0 3px var(--a-border-focus, blue); */
 }
 
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
   .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
-    box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 1px red, 1px 1px 0 2px var(--a-border-focus, blue);
   }
 }
 
 .navds-radio__input:checked + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-    inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
   background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
 .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-    inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-radio__input:checked:focus + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-      inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
   }
 }
 
@@ -182,13 +183,15 @@
 .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
   + .navds-checkbox__label::before,
 .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
+/* :hover without focus-visible or any other pseudo-class
+ */
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
   .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
   }
 }
 
@@ -201,14 +204,18 @@
   > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }
 
+/* box shadow til alle pseudo-klasser av .navds-checkbox__input
+
+*/
+
 .navds-checkbox--error
   > .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
@@ -216,7 +223,7 @@
     > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
     + .navds-checkbox__label::before,
   .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
   }
 }
 
@@ -225,7 +232,7 @@
   + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }
 
 .navds-checkbox--error
@@ -233,7 +240,7 @@
   + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
@@ -242,7 +249,7 @@
     + .navds-checkbox__label::before,
   .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
     background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
   }
 
   .navds-checkbox--error
@@ -250,7 +257,7 @@
     + .navds-checkbox__label::before,
   .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
     background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
   }
 }
 
@@ -292,7 +299,7 @@
   > .navds-radio__input:hover:not(:checked):not(:indeterminate):not(:focus-visible)
   + .navds-radio__label::before {
   background-color: var(--__ac-radio-checkbox-readonly-bg);
-  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
@@ -301,7 +308,7 @@
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
   background-color: var(--__ac-radio-checkbox-readonly-bg);
 }
 
@@ -310,12 +317,12 @@
 }
 
 .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 4px var(--__ac-radio-checkbox-readonly-bg);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
   background-color: var(--a-icon-subtle);
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
-  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
   background-color: var(--__ac-radio-checkbox-readonly-bg);
 }
 
diff --git a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
index 3c885cd343..699fbc8344 100644
--- a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
+++ b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
@@ -224,3 +224,94 @@ export const Readonly = () => (
     </Checkbox>
   </div>
 );
+
+export const DifferentBackgroundDemo = () => {
+  const [checked, setChecked] = useState([true, false, false]);
+
+  const toggleChecked = (index) => {
+    setChecked((checked) =>
+      checked.map((value, i) => (i === index ? !value : value))
+    );
+  };
+  return (
+    <div className="colgap">
+      <CheckboxGroup
+        legend="Hvem vant Rumpeldunkserien i første året til Harry Potter?"
+        defaultValue={["3"]}
+      >
+        <Checkbox value="1">Griffing</Checkbox>
+        <Checkbox value="2">Smygard</Checkbox>
+        <Checkbox value="3">Håsblås</Checkbox>
+        <Checkbox value="4">Ravnklo</Checkbox>
+      </CheckboxGroup>
+      <CheckboxGroup
+        legend="Hvilke frukter vil du ha?"
+        defaultValue={["eple"]}
+        className="bg-blue-100"
+        style={{ backgroundColor: "grey" }}
+      >
+        <Checkbox value="eple">Eple</Checkbox>
+        <Checkbox value="druer">Druer</Checkbox>
+      </CheckboxGroup>
+      <CheckboxGroup
+        legend="Når har du ferie?"
+        defaultValue={["1"]}
+        style={{ backgroundColor: "lightblue" }}
+      >
+        <Checkbox value="1">August</Checkbox>
+        <Checkbox value="2">Juli</Checkbox>
+      </CheckboxGroup>
+      <CheckboxGroup
+        legend="Alt er feil"
+        error="Du gjør alt feil"
+        style={{ backgroundColor: "lightblue" }}
+      >
+        <Checkbox value="1">Feil</Checkbox>
+        <Checkbox value="2">Feil</Checkbox>
+      </CheckboxGroup>
+      <CheckboxGroup
+        legend="Du får ikke endre denne"
+        readOnly
+        defaultValue={["1"]}
+        style={{ backgroundColor: "lightgray" }}
+      >
+        <Checkbox value="1">Ikke</Checkbox>
+        <Checkbox value="2">Prøv</Checkbox>
+      </CheckboxGroup>
+      <CheckboxGroup
+        legend="Denne er disabled"
+        disabled
+        defaultValue={["1"]}
+        style={{ backgroundColor: "grey" }}
+      >
+        <Checkbox value="1">Klarer du</Checkbox>
+        <Checkbox value="2">Å lese dette?</Checkbox>
+      </CheckboxGroup>
+      <CheckboxGroup
+        legend="Hvilke filtre vil du bruke?"
+        style={{ backgroundColor: "darkgrey" }}
+      >
+        <Checkbox
+          checked={checked[0] && checked[1] && checked[2]}
+          indeterminate={new Set(checked).size === 2} // if both false and true are present
+          onChange={(e) =>
+            setChecked([e.target.checked, e.target.checked, e.target.checked])
+          }
+        >
+          Alle
+        </Checkbox>
+        <div style={{ paddingLeft: "2rem" }}>
+          <Checkbox checked={checked[0]} onChange={() => toggleChecked(0)}>
+            Filter 1
+          </Checkbox>
+          <Checkbox checked={checked[1]} onChange={() => toggleChecked(1)}>
+            Filter 2
+          </Checkbox>
+          <Checkbox checked={checked[2]} onChange={() => toggleChecked(2)}>
+            Filter 3
+          </Checkbox>
+        </div>
+      </CheckboxGroup>
+    </div>
+  );
+};
diff --git a/@navikt/core/react/src/form/radio/radio.stories.tsx b/@navikt/core/react/src/form/radio/radio.stories.tsx
index 5444a9e83f..87f7f9ae04 100644
--- a/@navikt/core/react/src/form/radio/radio.stories.tsx
+++ b/@navikt/core/react/src/form/radio/radio.stories.tsx
@@ -119,3 +119,60 @@ export const UUDemo = () => (
     </RadioGroup>
   </div>
 );
+
+export const DifferentBackgroundDemo = () => (
+  <div className="colgap">
+    <RadioGroup
+      legend="Hvem vant Rumpeldunkserien i første året til Harry Potter?"
+      defaultValue="3"
+    >
+      <Radio value="1">Griffing</Radio>
+      <Radio value="2">Smygard</Radio>
+      <Radio value="3">Håsblås</Radio>
+      <Radio value="4">Ravnklo</Radio>
+    </RadioGroup>
+    <RadioGroup
+      legend="Hvilken frukt vil du ha?"
+      defaultValue="eple"
+      className="bg-blue-100"
+      style={{ backgroundColor: "grey" }}
+    >
+      <Radio value="eple">Eple</Radio>
+      <Radio value="druer">Druer</Radio>
+    </RadioGroup>
+    <RadioGroup
+      legend="Når har du ferie?"
+      defaultValue="1"
+      style={{ backgroundColor: "lightblue" }}
+    >
+      <Radio value="1">August</Radio>
+      <Radio value="2">Juli</Radio>
+    </RadioGroup>
+    <RadioGroup
+      legend="Alt er feil"
+      error="Du gjør alt feil"
+      style={{ backgroundColor: "lightblue" }}
+    >
+      <Radio value="1">Feil</Radio>
+      <Radio value="2">Feil</Radio>
+    </RadioGroup>
+    <RadioGroup
+      legend="Du får ikke endre denne"
+      readOnly
+      defaultValue="1"
+      style={{ backgroundColor: "lightgray" }}
+    >
+      <Radio value="1">Ikke</Radio>
+      <Radio value="2">Prøv</Radio>
+    </RadioGroup>
+    <RadioGroup
+      legend="Denne er disabled"
+      disabled
+      defaultValue="1"
+      style={{ backgroundColor: "lightgray" }}
+    >
+      <Radio value="1">Klarer du</Radio>
+      <Radio value="2">Å lese dette?</Radio>
+    </RadioGroup>
+  </div>
+);