diff --git a/.changeset/bright-cars-explain.md b/.changeset/bright-cars-explain.md
new file mode 100644
index 000000000..05880522a
--- /dev/null
+++ b/.changeset/bright-cars-explain.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Add automatic color contrast in site header, restyle search button
diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx
index 87379d5b1..3c3e6ae9b 100644
--- a/packages/gitbook/src/components/Header/Header.tsx
+++ b/packages/gitbook/src/components/Header/Header.tsx
@@ -109,16 +109,21 @@ export function Header(props: {
                                 style={
                                     !isCustomizationDefault && withTopHeader
                                         ? [
-                                              'bg-header-background-400/8',
+                                              'bg-header-link/3',
                                               'shadow-sm',
-                                              'text-header-link/8',
-                                              'ring-header-background-200/5',
-                                              '[&>span]:text-header-link/7',
+                                              'ring-header-link/3',
+                                              '[&>span]:!text-header-link/7',
                                               '[&_svg]:text-header-link',
-                                              'dark:bg-header-link-600/3',
-                                              'dark:ring-header-link-600/2',
-                                              'dark:text-header-link/7',
-                                              'dark:[&_svg]:text-header-link/7',
+                                              'contrast-more:bg-transparent',
+                                              'contrast-more:ring-header-link',
+                                              'contrast-more:[&>span]:!text-header-link',
+                                              'dark:bg-header-link/3',
+                                              'dark:ring-header-link/3',
+                                              '[&>span]:!text-header-link/7',
+                                              'dark:[&_svg]:text-header-link',
+                                              'dark:contrast-more:bg-transparent',
+                                              'dark:contrast-more:ring-header-link',
+                                              'dark:contrast-more:[&>span]:!text-header-link',
                                           ]
                                         : null
                                 }
diff --git a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx
index e9107a7c1..5b280374e 100644
--- a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx
+++ b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx
@@ -198,9 +198,16 @@ function generateHeaderTheme(customization: CustomizationSettings | SiteCustomiz
                     dark: customization.styling.primaryColor.dark,
                 },
                 linkColor: {
-                    // TODO: should depend on the color of the background
-                    light: colors.white,
-                    dark: colors.black,
+                    light: colorContrast(
+                        customization.styling.primaryColor.light,
+                        [colors.white, colors.black],
+                        'aaa',
+                    ),
+                    dark: colorContrast(
+                        customization.styling.primaryColor.dark,
+                        [colors.white, colors.black],
+                        'aaa',
+                    ),
                 },
             };
         }
diff --git a/packages/gitbook/src/components/Search/SearchButton.tsx b/packages/gitbook/src/components/Search/SearchButton.tsx
index 11d23902f..7a5ba598b 100644
--- a/packages/gitbook/src/components/Search/SearchButton.tsx
+++ b/packages/gitbook/src/components/Search/SearchButton.tsx
@@ -50,9 +50,15 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV
                 'ring-1',
                 'ring-inset',
                 'ring-dark/1',
+                'contrast-more:ring-dark',
+                'contrast-more:bg-light',
+                'contrast-more:text-dark',
                 'dark:bg-light/1',
                 'dark:ring-light/1',
                 'dark:text-light/7',
+                'contrast-more:dark:ring-light',
+                'contrast-more:dark:bg-dark',
+                'contrast-more:dark:text-light',
                 '[&>p]:hidden',
                 '[&>span]:hidden',
                 'md:justify-start',
@@ -97,11 +103,13 @@ const Shortcut = () => {
                 'justify-end',
                 'text-xs',
                 'text-dark/5',
+                'contrast-more:text-dark',
                 'dark:text-light/5',
+                'contrast-more:dark:text-light',
                 `[font-feature-settings:"calt",_"case"]`,
             )}
         >
-            {operatingSystem === 'mac' ? '⌘' : 'Ctrl'} + K
+            {operatingSystem === 'mac' ? '⌘' : 'Ctrl +'} K
         </span>
     );
 };