Warna yang dikerjakan benar

Warna adalah saluran visual yang paling sering digunakan sekaligus paling sering disalahgunakan. Topik ini mengajarkan peta warna (colormap) sebagai fungsi dari nilai ke warna, tiga keluarga peta warna menurut struktur data, dan kaidah palet yang aman untuk buta warna. Setelah membaca topik ini, pembaca dapat memilih keluarga peta warna yang cocok untuk struktur datanya serta memeriksa paletnya terhadap keterbatasan penglihatan warna.

Peta warna dan tiga keluarganya#

Peta warna (colormap) adalah fungsi yang memetakan nilai numerik ke warna, biasanya ditampilkan sebagai deretan warna dari nilai terkecil sampai nilai terbesar. Keluarga pertama adalah sequential, peta warna berurutan untuk data yang bergerak dari rendah ke tinggi, dengan kecerahan yang berubah monoton sepanjang deret. Keluarga kedua adalah diverging, yaitu peta warna untuk data yang berpusat pada titik tengah yang bermakna, misalnya deviasi dari rata-rata, dengan dua ragam warna di kedua ujung dan titik tengah yang netral. Keluarga ketiga adalah kualitatif (qualitative) untuk kategori tanpa urutan, berupa warna-warna terpisah tanpa gradien.

Kolom contoh menampilkan nama peta warna bawaan matplotlib yang dipanggil sebagai string, misalnya viridis atau coolwarm, dan seluruhnya tersedia pada galeri peta warna di dokumentasi. Pilihan keluarga ditentukan oleh struktur data, bukan oleh selera warna, karena struktur yang salah membuat grafik menyatakan hubungan yang tidak ada. Data kategori yang digambar dengan peta warna berurutan, misalnya, mengundang pembaca mencari urutan yang tidak pernah ada.

Mengapa jet menyesatkan#

Peta warna yang baik untuk data berurutan harus seragam persepsional (perceptually uniform), yaitu perubahan nilai yang sama besar menghasilkan perubahan warna yang dirasakan sama besar. Peta warna jet yang lama tidak memenuhi syarat itu karena kecerahannya naik dan turun sepanjang deret. Akibatnya, data yang halus memunculkan pita terang dan gelap yang terlihat seperti batas wilayah, padahal tidak ada batas pada datanya. Pembaca yang melihat pita tersebut membagi data menjadi wilayah artifaktual yang tidak pernah ada.

Warna pada jet juga melompat dari biru ke hijau ke kuning lalu ke merah dalam satu deret, sehingga dua nilai berdekatan dapat memiliki warna yang sangat berbeda. Matplotlib mengganti defaultnya ke viridis sejak versi 2.0, yaitu peta warna yang dirancang seragam persepsional sekaligus ramah untuk buta warna. Peta warna pelangi semacam jet masih tersedia demi kecocokan dengan data lama, tetapi tidak lagi menjadi pilihan yang disarankan untuk data baru.

Pemilihan peta warna yang keliru sama berbahayanya dengan pemilihan saluran yang keliru. Peta jet pada data halus menciptakan batas palsu sehingga pembaca menarik kesimpulan tentang wilayah yang tidak ada, sedangkan palet merah hijau murni pada nilai yang selisihnya tipis membuat perbedaan itu tidak terlihat sama sekali. Grafiknya dirender tanpa keluhan dan angkanya benar, tetapi kesimpulan yang dibawa pembacanya sudah keliru sejak pembacaan pertama.

Palet yang aman untuk buta warna#

Buta warna, yang dalam literatur disebut color vision deficiency, dialami oleh sekitar satu dari dua belas pria dan jauh lebih jarang pada wanita. Karena itu, grafik yang mengandalkan selisih warna hampir selalu dibaca juga oleh seseorang dengan penglihatan warna terbatas. Kaidah pertama adalah tidak menyandikan informasi hanya pada selisih merah dan hijau murni, karena kombinasi itu paling mudah tertukar. Kaidah kedua adalah membebani informasi pada lebih dari satu saluran, misalnya kecerahan yang ikut berubah bersama ragam warna, sehingga perbedaan tetap terbaca meskipun satu saluran tidak terbaca.

Kaidah ketiga adalah memilih palet yang sudah diuji. viridis dan cividis dirancang agar tetap terbaca untuk buta warna, dengan cividis dibangun secara khusus untuk tujuan tersebut. Palet colorblind pada seaborn dan galeri peta warna matplotlib menyediakan titik awal yang aman untuk kategori. Untuk data yang dipublikasikan ke khalayak luas, simulasi buta warna menjadi pemeriksaan akhir yang murah sebelum grafik dikirim.

Deretan swatch peta warna#

Skrip berikut menggambar enam peta warna sebagai deretan swatch dan mencetak nama peta warna, jumlah warna di dalamnya, serta warna awal dan akhir deretnya. Gradien yang digambar berisi 256 tingkat dari nilai 0 sampai 1, sehingga seluruh rentang peta warna terlihat dalam satu baris. Nilai awal dan akhir yang tercetak pada keluaran menjadi acuan cepat untuk mengenali arah kecerahan tiap peta warna.

import numpy as np
import matplotlib.pyplot as plt
from matplotlib import colormaps
from matplotlib.colors import to_hex

nama_cmap = ["viridis", "plasma", "cividis", "coolwarm", "Blues", "jet"]
gradien = np.linspace(0.0, 1.0, 256).reshape(1, -1)

fig, axes = plt.subplots(len(nama_cmap), 1, figsize=(7, 4), layout="constrained")
for ax, nama in zip(axes, nama_cmap):
    cmap = colormaps[nama]
    ax.imshow(gradien, aspect="auto", cmap=cmap)
    ax.set_xticks([])
    ax.set_yticks([])
    ax.set_ylabel(nama, rotation=0, ha="right", va="center", fontsize=9)

fig.savefig("swatch-colormap.svg")

for nama in nama_cmap:
    cmap = colormaps[nama]
    print(f"{nama:9s} N={cmap.N:3d}  awal={to_hex(cmap(0.0))}  akhir={to_hex(cmap(1.0))}")

viridis   N=256  awal=#440154  akhir=#fde725
plasma    N=256  awal=#0d0887  akhir=#f0f921
cividis   N=256  awal=#00224e  akhir=#fee838
coolwarm  N=256  awal=#3b4cc0  akhir=#b40426
Blues     N=256  awal=#f7fbff  akhir=#08306b
jet       N=256  awal=#000080  akhir=#800000

Skrip menyimpan deretan tersebut sebagai berkas SVG, dan gambar berikut menampilkan keluarannya.

Baca deretan tersebut per baris dengan pertanyaan yang sama, yaitu bagaimana kecerahannya berubah. viridis dan plasma berangkat dari warna gelap dan berakhir terang secara mulus, sehingga nilai rendah dan tinggi mudah dibedakan. cividis berangkat dari biru gelap dan berakhir kuning, dirancang khusus agar perbedaannya tetap terlihat untuk buta warna. coolwarm memiliki dua ujung yang bermakna dengan tengah terang yang netral, sehingga cocok untuk data diverging, sedangkan Blues semakin gelap seiring nilai dan cocok untuk data berurutan tunggal. jet gelap di kedua ujung dan terang di tengah, dan pita terang dan gelap itu yang menciptakan batas artifaktual pada data halus.

Kesalahan umum#

• Menggunakan jet atau peta warna pelangi untuk data halus. Pita artifaktual membagi data menjadi wilayah yang tidak ada dan mengaburkan gradien sebenarnya. Masalahnya paling menonjol pada data yang berubah perlahan, karena pita terang dan gelapnya tumpang tindih dengan perubahan yang seharusnya terbaca. Gunakan viridis, plasma, atau peta warna berurutan lain yang seragam persepsional.
• Menggabungkan merah dan hijau sebagai satu-satunya pemisah. Selisih kedua warna tersebut paling mudah hilang bagi pembaca dengan buta warna. Gunakan kecerahan sebagai sandi kedua atau pindahkan ke palet yang sudah diuji, lalu periksa grafiknya melalui simulasi buta warna sebelum dikirim.
• Terlalu banyak kategori warna. Di atas sekitar delapan kategori, selisih ragam warna sulit dibedakan dan legenda harus dibaca berulang. Kelompokkan kategori yang kurang penting atau pecah grafiknya ke beberapa panel.
• Mengubah default tanpa memeriksa struktur data. Peta warna bawaan tidak selalu salah, tetapi pilihan yang tepat bergantung pada struktur data, misalnya diverging untuk deviasi dari titik tengah. Periksa struktur data terlebih dahulu, lalu pilih keluarga peta warnanya.

Ringkasan#

• Peta warna dipilih menurut struktur data, yaitu sequential untuk nilai berurutan, diverging untuk data di sekitar titik tengah, dan kualitatif untuk kategori tanpa urutan.
• Peta warna seragam persepsional seperti viridis menghindari pita artifaktual yang muncul pada peta warna pelangi seperti jet.
• Palet yang aman untuk buta warna menghindari merah hijau murni, membebani informasi pada kecerahan bersama ragam warna, dan menggunakan palet teruji seperti viridis, cividis, atau colorblind seaborn.

Referensi#

• Choosing Colormaps in Matplotlib — Matplotlib — Panduan resmi pemilihan peta warna beserta uraian peta seragam persepsional dan jet.
• Specifying colors — Matplotlib — Cara warna ditentukan di dalam matplotlib.
• Choosing color palettes — seaborn — Palet kategori dan palet colorblind pada seaborn.
• Continuous color scales and color bars in Python — Plotly — Peta warna yang setara tersedia pada plotly.
• Color Blindness — National Eye Institute — Penjelasan prevalensi buta warna yang lebih umum pada pria.