diff --git a/components/BlogBlocks.css b/components/BlogBlocks.css
index f4455e7..9404fea 100644
--- a/components/BlogBlocks.css
+++ b/components/BlogBlocks.css
@@ -20,7 +20,7 @@
 		margin: 0;
 		padding: var(--_gap) var(--_gap-half);
 		backdrop-filter: blur(var(--_blur));
-		background-color: var(--_translucent);
+		background-color: var(--_translucent-bg);
 		border-bottom: 1px solid currentColor;
 	}
 
@@ -65,7 +65,7 @@
 	justify-content: start;
 	padding: var(--_gap-half);
 	backdrop-filter: blur(var(--_blur));
-	background-color: var(--_translucent);
+	background-color: var(--_translucent-bg);
 	border-bottom: 1px solid currentColor;
 
 	& > a::before {
@@ -80,7 +80,7 @@
 	justify-content: start;
 	padding: var(--_gap-half);
 	backdrop-filter: blur(var(--_blur));
-	background-color: var(--_translucent);
+	background-color: var(--_translucent-bg);
 	border-bottom: 1px solid currentColor;
 
 	& > span::before {
@@ -149,7 +149,7 @@
 	& > * {
 		border: none;
 		padding: var(--_gap-half);
-		background-color: var(--_translucent);
+		background-color: var(--_translucent-bg);
 	}
 }
 
diff --git a/components/MemberCard.css b/components/MemberCard.css
index b89e63f..5ebf375 100644
--- a/components/MemberCard.css
+++ b/components/MemberCard.css
@@ -29,7 +29,7 @@
 }
 
 .components__member_card__content {
-	background-color: var(--_translucent);
+	background-color: var(--_translucent-bg);
 	backdrop-filter: blur(var(--_blur));
 	display: flex;
 	flex-direction: column;
diff --git a/src/stylesheets/base.css b/src/stylesheets/base.css
index fda5588..3543495 100644
--- a/src/stylesheets/base.css
+++ b/src/stylesheets/base.css
@@ -47,6 +47,7 @@
 	/* color */
 	--_accent-color: var(--lime-6);
 	--_translucent: hsl(from var(--_font-color) h s l / 0.1);
+	--_translucent-bg: hsl(from var(--_background-color) h s l / .6);
 
 	/* other */
 	--_background-color: var(--sand-0);