diff --git a/.changeset/grumpy-seas-switch.md b/.changeset/grumpy-seas-switch.md
new file mode 100644
index 0000000000..85cf0e22fe
--- /dev/null
+++ b/.changeset/grumpy-seas-switch.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Improve high contrast mode with the Dev Overlay
diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
index 0e89ae3e92..648bbd325b 100644
--- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
@@ -83,6 +83,12 @@ export class AstroDevOverlay extends HTMLElement {
 				box-shadow: 0px 0px 0px 0px rgba(19, 21, 26, 0.30), 0px 1px 2px 0px rgba(19, 21, 26, 0.29), 0px 4px 4px 0px rgba(19, 21, 26, 0.26), 0px 10px 6px 0px rgba(19, 21, 26, 0.15), 0px 17px 7px 0px rgba(19, 21, 26, 0.04), 0px 26px 7px 0px rgba(19, 21, 26, 0.01);
 			}
 
+			@media (forced-colors: active) {
+				#dev-bar {
+					background: white;
+				}
+			}
+
 			#dev-bar .item {
 				display: flex;
 				justify-content: center;
@@ -132,6 +138,7 @@ export class AstroDevOverlay extends HTMLElement {
 				pointer-events: none;
 			}
 
+
 			#dev-bar .item-tooltip::after{
 				content: '';
 				position: absolute;
@@ -147,6 +154,12 @@ export class AstroDevOverlay extends HTMLElement {
 				opacity: 1;
 			}
 
+			@media (forced-colors: active) {
+				#dev-bar .item:hover .item-tooltip, #dev-bar .item:not(.active):focus-visible .item-tooltip {
+					background: white;
+				}
+			}
+
 			#dev-bar #bar-container .item.active .notification {
 				border-color: rgba(71, 78, 94, 1);
 			}
@@ -165,6 +178,12 @@ export class AstroDevOverlay extends HTMLElement {
 				margin: auto;
 			}
 
+			@media (forced-colors: active) {
+				#dev-bar .item svg path[fill="#fff"] {
+					fill: black;
+				}
+			}
+
 			#dev-bar .item .notification {
 				display: none;
 				position: absolute;
diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts
index 53fbc6502e..6707459f4c 100644
--- a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts
@@ -315,6 +315,12 @@ export default {
 				#integration-list astro-dev-overlay-card p {
 					font-size: 14px;
 				}
+
+				@media (forced-colors: active) {
+					svg path[fill="#fff"] {
+						fill: black;
+					}
+				}
 			</style>
 
 			<header>
diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/icon.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/icon.ts
index 65ef7c2702..34cf3150db 100644
--- a/packages/astro/src/runtime/client/dev-overlay/ui-library/icon.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/icon.ts
@@ -34,7 +34,19 @@ export class DevOverlayIcon extends HTMLElement {
 	}
 
 	buildTemplate() {
-		this.shadowRoot.innerHTML = `<style>svg { width: 100%; height: 100%;}</style>\n${this.getIconHTML(
+		this.shadowRoot.innerHTML = `
+			<style>
+				svg {
+					width: 100%;
+					height: 100%;
+				}
+
+				@media (forced-colors: active) {
+					svg path[fill="#fff"] {
+						fill: black;
+					}
+				}
+			</style>\n${this.getIconHTML(
 			this._icon
 		)}`;
 	}
diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts
index 63dcba65e3..1fb0b686a9 100644
--- a/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts
@@ -30,6 +30,14 @@ export class DevOverlayToggle extends HTMLElement {
 				position: relative;
 			}
 
+			@media (forced-colors: active) {
+				input::after {
+					border: 1px solid black;
+					top: 0px;
+					left: 0px;
+				}
+			}
+
 			input:checked {
 				border: 1px solid rgba(213, 249, 196, 1);
 				background-color: rgba(61, 125, 31, 1);
diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts
index 2f5357a507..00a4ace869 100644
--- a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts
@@ -30,6 +30,12 @@ export class DevOverlayWindow extends HTMLElement {
 					box-shadow: 0px 0px 0px 0px rgba(19, 21, 26, 0.30), 0px 1px 2px 0px rgba(19, 21, 26, 0.29), 0px 4px 4px 0px rgba(19, 21, 26, 0.26), 0px 10px 6px 0px rgba(19, 21, 26, 0.15), 0px 17px 7px 0px rgba(19, 21, 26, 0.04), 0px 26px 7px 0px rgba(19, 21, 26, 0.01);
 				}
 
+				@media (forced-colors: active) {
+					:host {
+						background: white;
+					}
+				}
+
 				::slotted(h1), ::slotted(h2), ::slotted(h3), ::slotted(h4), ::slotted(h5) {
 					font-weight: 600;
 					color: #fff;