diff --git a/web/src/config/colors/light.js b/web/src/config/colors/light.js
index 38f7fd13ca..0df99ef413 100644
--- a/web/src/config/colors/light.js
+++ b/web/src/config/colors/light.js
@@ -4,7 +4,7 @@ const options = { safe: true, delimiter: '_' };
 export const nestedColors = {
 	base: {
 		background: '#f8f8f8',
-		'top-bar-navigation': '#f3f3f3',
+		'top-bar-navigation': '#000000',
 		'secondary-navigation-bar': '#e9e9e9',
 		'wallet-sidebar-and-popup': '#f8f8f8',
 		footer: '#000000',
diff --git a/web/src/utils/color.js b/web/src/utils/color.js
index fdc8b7d23c..f6f7d12dd2 100644
--- a/web/src/utils/color.js
+++ b/web/src/utils/color.js
@@ -155,10 +155,10 @@ export const filterTheme = (theme) => {
 };
 
 export const CALCULATED_COLOR_RATIO_OBJECT = {
-	'base_top-bar-navigation': 0.7,
-	'base_secondary-navigation-bar': 0.5,
-	'base_wallet-sidebar-and-popup': 0.3,
-	base_footer: 0.6,
+	'base_top-bar-navigation': 1,
+	'base_secondary-navigation-bar': 0.1,
+	'base_wallet-sidebar-and-popup': 0,
+	base_footer: 1,
 };
 
 export const CALCULATED_COLOR_KEYS = Object.keys(CALCULATED_COLOR_RATIO_OBJECT);