diff --git a/src-web/components/core/Checkbox.tsx b/src-web/components/core/Checkbox.tsx
index a7344b47..faa3f74d 100644
--- a/src-web/components/core/Checkbox.tsx
+++ b/src-web/components/core/Checkbox.tsx
@@ -34,8 +34,8 @@ export function Checkbox({
         <input
           aria-hidden
           className={classNames(
-            'opacity-50 appearance-none w-4 h-4 flex-shrink-0 border border-[currentColor]',
-            'rounded hocus:border-focus hocus:bg-focus/[5%] hocus:opacity-100 outline-none ring-0',
+            'appearance-none w-4 h-4 flex-shrink-0 border border-highlight',
+            'rounded hocus:border-focus hocus:bg-focus/[5%] outline-none ring-0',
           )}
           type="checkbox"
           disabled={disabled}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 2a57e0cd..0a35369e 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -63,8 +63,8 @@ module.exports = {
       selection: 'hsl(var(--color-violet-500) / 0.3)',
       focus: 'hsl(var(--color-blue-500) / 0.7)',
       invalid: 'hsl(var(--color-red-500))',
-      highlight: 'hsl(var(--color-gray-300) / 0.35)',
-      highlightSecondary: 'hsl(var(--color-gray-300) / 0.2)',
+      highlight: 'hsl(var(--color-gray-500) / 0.3)',
+      highlightSecondary: 'hsl(var(--color-gray-500) / 0.15)',
       transparent: 'transparent',
       white: 'hsl(0 100% 100% / <alpha-value>)',
       black: 'hsl(0 100% 0% / <alpha-value>)',