diff --git a/core/modules/color/color.js b/core/modules/color/color.js
index f9eebf21ded95b76a996954143bbcd85074bbc1d..a44f49f6200622a23e62fc85e9c022463b242534 100644
--- a/core/modules/color/color.js
+++ b/core/modules/color/color.js
@@ -210,9 +210,10 @@
           i = inputs.length;
           if (inputs.length) {
             var toggleClick = true;
-            var lock = $('<div class="lock"></div>').on('click', function () {
+            var lock = $('<button class="lock link">' + Drupal.t('Unlock') + '</button>').on('click', function (e) {
+              e.preventDefault();
               if (toggleClick) {
-                $(this).addClass('unlocked');
+                $(this).addClass('unlocked').html(Drupal.t('Lock'));
                 $(hooks[i - 1]).attr('class',
                   locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook up' : 'hook'
                 );
@@ -221,7 +222,7 @@
                 );
               }
               else {
-                $(this).removeClass('unlocked');
+                $(this).removeClass('unlocked').html(Drupal.t('Unlock'));
                 $(hooks[i - 1]).attr('class',
                   locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook both' : 'hook down'
                 );
diff --git a/core/modules/color/css/color.admin.css b/core/modules/color/css/color.admin.css
index 5da8c3581b059c6f44d1b152f4963ba10513671a..e904c85dc9fc429c7f9e32d3175b385cfe8f160b 100644
--- a/core/modules/color/css/color.admin.css
+++ b/core/modules/color/css/color.admin.css
@@ -63,6 +63,7 @@
   height: 19px;
   background: url(../images/lock.png) no-repeat 50% 0;
   cursor: pointer;
+  text-indent: -9999px;
 }
 [dir="rtl"] #palette .lock {
   float: right;