diff --git a/modules/ve-cite/ve.ui.MWReferenceSearchWidget.css b/modules/ve-cite/ve.ui.MWReferenceSearchWidget.css
index c972e270e..32c6b4516 100644
--- a/modules/ve-cite/ve.ui.MWReferenceSearchWidget.css
+++ b/modules/ve-cite/ve.ui.MWReferenceSearchWidget.css
@@ -11,8 +11,12 @@
 }
 
 .ve-ui-mwReferenceSearchWidget-name {
-	color: #72777d;
+	opacity: 0.53; /* results in #787878 which is almost exactly @wmui-color-base30 */
 	float: right;
 	margin-left: 0.75em;
 	margin-bottom: 0.05em;
 }
+
+.ve-ui-mwReferenceSearchWidget-name-autogenerated {
+	opacity: 0.2; /* results in #cccccc which is almost exactly @wmui-color-base70 */
+}
diff --git a/modules/ve-cite/ve.ui.MWReferenceSearchWidget.js b/modules/ve-cite/ve.ui.MWReferenceSearchWidget.js
index cb50bec17..2a326dbab 100644
--- a/modules/ve-cite/ve.ui.MWReferenceSearchWidget.js
+++ b/modules/ve-cite/ve.ui.MWReferenceSearchWidget.js
@@ -156,10 +156,6 @@ ve.ui.MWReferenceSearchWidget.prototype.buildIndex = function () {
 			// Use [\s\S]* instead of .* to catch esoteric whitespace (T263698)
 			var matches = refModel.getListKey().match( /^literal\/([\s\S]*)$/ );
 			var name = matches && matches[ 1 ] || '';
-			// Hide previously auto-generated reference names
-			if ( /^:[0-9]+$/.test( name ) ) {
-				name = '';
-			}
 
 			// TODO: At some point we need to make sure this text is updated in
 			// case the view node is still rendering. This shouldn't happen because
@@ -217,6 +213,7 @@ ve.ui.MWReferenceSearchWidget.prototype.addResults = function () {
 				.text( '[' + item.citation + ']' );
 			var $name = $( '<div>' )
 				.addClass( 've-ui-mwReferenceSearchWidget-name' )
+				.toggleClass( 've-ui-mwReferenceSearchWidget-name-autogenerated', /^:\d+$/.test( item.name ) )
 				.text( item.name );
 			items.push(
 				new ve.ui.MWReferenceResultWidget( {