diff --git a/umap/static/umap/js/umap.icon.js b/umap/static/umap/js/umap.icon.js
index 87cbb1c9..f98cc0c4 100644
--- a/umap/static/umap/js/umap.icon.js
+++ b/umap/static/umap/js/umap.icon.js
@@ -155,23 +155,27 @@ L.U.Icon.Cluster = L.DivIcon.extend({
         var container = L.DomUtil.create('div', 'leaflet-marker-icon marker-cluster'),
             div = L.DomUtil.create('div', '', container),
             span = L.DomUtil.create('span', '', div),
-            backgroundColor = this.datalayer.getColor(),
-            color;
+            backgroundColor = this.datalayer.getColor();
         span.innerHTML = this.cluster.getChildCount();
         div.style.backgroundColor = backgroundColor;
+        return container;
+    },
+
+    computeTextColor: function (el) {
+        var color,
+            backgroundColor = this.datalayer.getColor();
         if (this.datalayer.options.cluster && this.datalayer.options.cluster.textColor) {
             color = this.datalayer.options.cluster.textColor;
         }
         if (!color) {
             if (typeof _CACHE_COLOR[backgroundColor] === 'undefined') {
-                color = L.DomUtil.TextColorFromBackgroundColor(div);
+                color = L.DomUtil.TextColorFromBackgroundColor(el);
                 _CACHE_COLOR[backgroundColor] = color;
             } else {
                 color = _CACHE_COLOR[backgroundColor];
             }
         }
-        div.style.color = color;
-        return container;
+        return color;
     }
 
 });
diff --git a/umap/static/umap/js/umap.layer.js b/umap/static/umap/js/umap.layer.js
index 0e3753a8..b9dd679e 100644
--- a/umap/static/umap/js/umap.layer.js
+++ b/umap/static/umap/js/umap.layer.js
@@ -23,6 +23,19 @@ L.U.Layer.Default = L.FeatureGroup.extend({
 });
 
 
+L.U.MarkerCluster = L.MarkerCluster.extend({
+// Custom class so we can call computeTextColor
+// when element is already on the DOM.
+
+    _initIcon: function () {
+        L.MarkerCluster.prototype._initIcon.call(this);
+        var div = this._icon.querySelector('div');
+        // Compute text color only when icon is added to the DOM.
+        div.style.color = this._iconObj.computeTextColor(div);
+    }
+
+});
+
 L.U.Layer.Cluster = L.MarkerClusterGroup.extend({
     _type: 'Cluster',
     includes: [L.U.Layer],
@@ -41,6 +54,7 @@ L.U.Layer.Cluster = L.MarkerClusterGroup.extend({
             options.maxClusterRadius = this.datalayer.options.cluster.radius;
         }
         L.MarkerClusterGroup.prototype.initialize.call(this, options);
+        this._markerCluster = L.U.MarkerCluster;
     },
 
     getEditableOptions: function () {