Improve xkcd vs CSS colour comparison chart.

Select text colour based on luminance of the background, rather than
straight 50% black, which is invisible on some lines. Then tweak the
alignments settings to look nicer.

Author: QuLogic

tutorials/colors/colors.py

@@ -160,11 +160,11 @@ def demo(sty):
 # The visual below shows name collisions. Color names where color values agree
 # are in bold.
 
-import matplotlib._color_data as mcd
+import matplotlib.colors as mcolors
 import matplotlib.patches as mpatch
 
-overlap = {name for name in mcd.CSS4_COLORS
-           if "xkcd:" + name in mcd.XKCD_COLORS}
+overlap = {name for name in mcolors.CSS4_COLORS
+           if f'xkcd:{name}' in mcolors.XKCD_COLORS}
 
 fig = plt.figure(figsize=[9, 5])
 ax = fig.add_axes([0, 0, 1, 1])
@@ -173,23 +173,30 @@ def demo(sty):
 n_rows = len(overlap) // n_groups + 1
 
 for j, color_name in enumerate(sorted(overlap)):
-    css4 = mcd.CSS4_COLORS[color_name]
-    xkcd = mcd.XKCD_COLORS["xkcd:" + color_name].upper()
+    css4 = mcolors.CSS4_COLORS[color_name]
+    xkcd = mcolors.XKCD_COLORS[f'xkcd:{color_name}'].upper()
+
+    # Pick text colour based on perceived luminance.
+    rgba = mcolors.to_rgba_array([css4, xkcd])
+    luma = 0.299 * rgba[:, 0] + 0.587 * rgba[:, 1] + 0.114 * rgba[:, 2]
+    css4_text_color = 'k' if luma[0] > 0.5 else 'w'
+    xkcd_text_color = 'k' if luma[1] > 0.5 else 'w'
 
     col_shift = (j // n_rows) * 3
     y_pos = j % n_rows
-    text_args = dict(va='center', fontsize=10,
-                     weight='bold' if css4 == xkcd else None)
+    text_args = dict(fontsize=10, weight='bold' if css4 == xkcd else None)
     ax.add_patch(mpatch.Rectangle((0 + col_shift, y_pos), 1, 1, color=css4))
     ax.add_patch(mpatch.Rectangle((1 + col_shift, y_pos), 1, 1, color=xkcd))
-    ax.text(0 + col_shift, y_pos + .5, '  ' + css4, alpha=0.5, **text_args)
-    ax.text(1 + col_shift, y_pos + .5, '  ' + xkcd, alpha=0.5, **text_args)
-    ax.text(2 + col_shift, y_pos + .5, '  ' + color_name, **text_args)
+    ax.text(0.5 + col_shift, y_pos + .7, css4,
+            color=css4_text_color, ha='center', **text_args)
+    ax.text(1.5 + col_shift, y_pos + .7, xkcd,
+            color=xkcd_text_color, ha='center', **text_args)
+    ax.text(2 + col_shift, y_pos + .7, f'  {color_name}', **text_args)
 
 for g in range(n_groups):
     ax.hlines(range(n_rows), 3*g, 3*g + 2.8, color='0.7', linewidth=1)
-    ax.text(0.5 + 3*g, -0.5, 'X11', ha='center', va='center')
-    ax.text(1.5 + 3*g, -0.5, 'xkcd', ha='center', va='center')
+    ax.text(0.5 + 3*g, -0.3, 'X11/CSS4', ha='center')
+    ax.text(1.5 + 3*g, -0.3, 'xkcd', ha='center')
 
 ax.set_xlim(0, 3 * n_groups)
 ax.set_ylim(n_rows, -1)