diff --git a/apps/website/screens/components/checkbox/overview/images/checkbox_anatomy.png b/apps/website/screens/components/checkbox/overview/images/checkbox_anatomy.png
index ff4051b3d0..d3a73f9739 100644
Binary files a/apps/website/screens/components/checkbox/overview/images/checkbox_anatomy.png and b/apps/website/screens/components/checkbox/overview/images/checkbox_anatomy.png differ
diff --git a/packages/lib/src/checkbox/Checkbox.tsx b/packages/lib/src/checkbox/Checkbox.tsx
index 7f747f0463..06badf4663 100644
--- a/packages/lib/src/checkbox/Checkbox.tsx
+++ b/packages/lib/src/checkbox/Checkbox.tsx
@@ -24,7 +24,7 @@ const Checkbox = styled.span<{
   display: flex;
   border-radius: var(--border-radius-s);
   color: ${({ disabled, readOnly }) =>
-    disabled || readOnly ? "var(--color-fg-neutral-medium)" : "var(--color-fg-secondary-medium)"};
+    disabled || readOnly ? "var(--color-fg-neutral-medium)" : "var(--color-fg-primary-strong)"};
   ${({ disabled }) => disabled && "pointer-events: none;"}
 
   &:focus {
@@ -62,11 +62,11 @@ const CheckboxContainer = styled.div<{
 
   &:hover ${Checkbox} {
     ${({ disabled, readOnly }) =>
-      !disabled && `color: ${readOnly ? "var(--color-fg-neutral-strong)" : "var(--color-fg-secondary-strong)"}`};
+      !disabled && `color: ${readOnly ? "var(--color-fg-neutral-strong)" : "var(--color-fg-primary-stronger)"}`};
   }
   &:active ${Checkbox} {
     ${({ disabled, readOnly }) =>
-      !disabled && `color: ${readOnly ? "var(--color-fg-neutral-strong)" : "var(--color-fg-secondary-strong)"}`};
+      !disabled && `color: ${readOnly ? "var(--color-fg-neutral-strong)" : "var(--color-fg-primary-stronger)"}`};
   }
 `;