diff --git a/modules/ve-mw/ui/styles/widgets/ve.ui.MWTransclusionOutlineWidget.less b/modules/ve-mw/ui/styles/widgets/ve.ui.MWTransclusionOutlineWidget.less
index 7325c82605..5e6a6040d5 100644
--- a/modules/ve-mw/ui/styles/widgets/ve.ui.MWTransclusionOutlineWidget.less
+++ b/modules/ve-mw/ui/styles/widgets/ve.ui.MWTransclusionOutlineWidget.less
@@ -2,15 +2,15 @@
 
 // Copied from wikimedia-ui-base.less
 @wmui-color-accent50: #36c;
-@wmui-color-accent90: #eaf3ff;
 @color-base--subtle: #72777d;
 
 @selected-text-color: @wmui-color-accent50;
-@selected-background: @wmui-color-accent90;
+// This shade on a white background results in #eaf3ff a.k.a. @wmui-color-accent90
+@selected-shading: rgba( 0, 109, 255, 21/255 );
 
 // This shade on a white background results in #eaecf0 a.k.a. @background-color-base--hover a.k.a.
 // @wmui-color-base80
-@hover-shading: rgba( 0, 24, 73, 0.082 );
+@hover-shading: rgba( 0, 24, 73, 21/255 );
 
 @on-click-text-color: @wmui-color-accent50;
 // Same as .oo-ui-optionWidget-pressed, a.k.a. @background-color-primary--hover
@@ -76,10 +76,10 @@
 
 			/* selected */
 			&.oo-ui-optionWidget-selected > .oo-ui-buttonElement-button {
-				background-color: @selected-background;
+				background-color: @selected-shading;
 
 				&:hover {
-					background-color: @selected-background;
+					background-color: @selected-shading;
 					color: @selected-text-color;
 				}
 			}
@@ -151,7 +151,7 @@
 		&.ve-ui-mwTransclusionOutlineParameterWidget-activePage,
 		&.ve-ui-mwTransclusionOutlineParameterWidget-activePage:hover,
 		&.ve-ui-mwTransclusionOutlineParameterWidget-activePage.oo-ui-optionWidget-highlighted {
-			background-color: @selected-background;
+			background-color: @selected-shading;
 			color: @selected-text-color;
 		}