diff --git a/js/client.js b/js/client.js
index fdf7528df..611b1e02d 100644
--- a/js/client.js
+++ b/js/client.js
@@ -839,10 +839,11 @@
 		updateUserbar: function() {
 			var buf = '';
 			var name = ' '+app.user.get('name');
+			var color = hashColor(app.user.get('userid'));
 			if (app.user.get('named')) {
-				buf = '<i class="icon-user" style="color:#779EC5"></i> <span class="username" data-name="'+Tools.escapeHTML(name)+'">'+Tools.escapeHTML(name)+'</span>';
+				buf = '<span class="username" data-name="'+Tools.escapeHTML(name)+'" style="'+color+'"><i class="icon-user" style="color:#779EC5"></i> '+Tools.escapeHTML(name)+'</span>';
 			} else {
-				buf = '<i class="icon-user" style="color:#999"></i> <span class="username" data-name="'+Tools.escapeHTML(name)+'">'+Tools.escapeHTML(name)+'</span>';
+				buf = '<span class="username" data-name="'+Tools.escapeHTML(name)+'" style="color:#999"><i class="icon-user" style="color:#999"></i> '+Tools.escapeHTML(name)+'</span>';
 			}
 			this.$userbar.html(buf);
 		},
diff --git a/style/client.css b/style/client.css
index 3c506de95..ee008d98b 100644
--- a/style/client.css
+++ b/style/client.css
@@ -77,10 +77,14 @@ body {
 
 .userbar {
 	position: absolute;
-	top: 10px;
-	right: 10px;
+	top: 14px;
+	right: 14px;
 	font-weight: bold;
 }
+.userbar .username {
+	color: black;
+	text-shadow: 1px 1px 0 #f8f8f8, 1px -1px 0 #f8f8f8, -1px 1px 0 #f8f8f8, -1px -1px 0 #f8f8f8;
+}
 .username {
 	cursor: pointer;
 }