Warna komplementer, triadik, dan analog: cara membuat setiap harmoni tetap terbaca

Harmoni warna adalah aturan praktis yang sudah lama dipakai, dan pertanyaan yang dijawabnya lebih sempit daripada yang sering diharapkan orang. Harmoni memberi tahu hue mana yang cocok satu sama lain. Harmoni tidak mengatakan apa pun tentang apakah satu hue bisa dibaca di atas hue lainnya, dan alasannya ada pada aritmetika kontras itu sendiri.

Definisi tiga harmoni

Warna komplementer adalah dua hue yang berseberangan di roda hue, terpisah 180°.

Warna triadik adalah tiga hue yang berjarak merata di sekeliling roda, 120° satu sama lain.

Warna analog adalah hue dasar beserta tetangganya; alat harmoni warna memakai hue 30° di kedua sisinya.

Aturan-aturan ini adalah konvensi yang sudah lama berlaku, bukan temuan dari pengukuran. Nilainya terletak pada kemampuannya memangkas ruang pilihan yang tak terbatas menjadi segelintir pilihan yang bisa Anda pertanggungjawabkan. Alat ini menawarkan enam, dan catatan yang ditampilkannya di bawah masing-masing layak dibaca sebagai label peringatan.

Harmoni	Selisih hue dari warna dasar	Jumlah warna	Pemisahnya	Catatan alat
Analogous (analog)	0°, −30°, +30°	3	Hue	Hue bertetangga. Tenang, dan pilihan bawaan paling aman untuk antarmuka.
Complementary (komplementer)	0°, 180°	2	Hue	Hue berseberangan. Pemisahan maksimum, yang juga membuatnya paling mudah dipakai berlebihan.
Triadic (triadik)	0°, 120°, 240°	3	Hue	Tiga hue berjarak merata. Hidup, dan sulit diseimbangkan tanpa ada satu yang mendominasi.
Split complementary (komplementer terbelah)	0°, 150°, 210°	3	Hue	Hue seberang, dibelah dua. Sebagian besar kontrasnya, dengan ketegangan yang lebih sedikit.
Tetradic (tetradik)	0°, 90°, 180°, 270°	4	Hue	Dua pasangan komplementer. Kaya, dan biasanya kelebihan satu pasangan untuk UI.
Monochromatic (monokromatik)	Tidak ada; kecerahan 0.32, 0.52, dan 0.72	3	Kecerahan	Satu hue dalam berbagai kecerahan. Bertahan pada semua jenis buta warna.

“Pemisahan maksimum” dalam catatan komplementer adalah pemisahan hue. Seperti yang ditunjukkan bagian berikutnya, itu bukan pemisahan kontras.

Mengapa harmoni tidak bisa menjanjikan kontras

Rasio kontras WCAG dihitung dari luminans relatif dan tidak ada yang lain. Luminans adalah jumlah berbobot dari kanal merah, hijau, dan biru yang sudah dilinearkan, 0.2126 R + 0.7152 G + 0.0722 B, dan tidak ada suku untuk hue dalam rasio tersebut. Dua warna dengan hue apa pun pada luminans yang sama mendapat skor 1:1.

Alat harmoni membuat hal ini nyata. Setiap warna hasil rotasi dibangun pada kecerahan dan kroma OKLCH milik warna dasar, dan hanya hue-nya yang diputar. Jika hue yang diputar tidak mampu mempertahankan kroma itu di layar, kromanya diturunkan dan kecerahannya dibiarkan. Jadi setiap anggota set komplementer, triadik, analog, komplementer terbelah, atau tetradik memiliki kecerahan OKLCH yang sama dengan warna dasar.

Untuk warna netral, kecerahan OKLCH yang sama berarti luminans yang persis sama, sehingga rasionya tepat 1:1. Hue nyata pada satu kecerahan sedikit berbeda luminansnya, jadi perkirakan rasio antaranggota mendekati 1:1, jauh dari 3:1 yang dibutuhkan bahkan oleh teks besar. Pasangan komplementer bisa tampak mencolok dan tetap tidak terbaca ketika satu warna dipakai sebagai teks di atas warna lainnya.

Monokromatik adalah pengecualian karena yang divariasikan justru kecerahannya. Ketiga warnanya dibangun pada kecerahan OKLCH 0.32, 0.52, dan 0.72 dengan hue warna dasar, berapa pun kecerahan warna dasar itu sendiri, sehingga warna yang Anda masukkan tidak termasuk di antaranya kecuali kecerahannya kebetulan sama dengan salah satunya. Untuk versi netral, di mana luminans relatif adalah pangkat tiga dari kecerahan OKLCH, hitungannya sebagai berikut:

• tergelap di atas paling terang: (0.72³ + 0.05) ÷ (0.32³ + 0.05) ≈ 5.1:1
• tengah di atas paling terang: (0.72³ + 0.05) ÷ (0.52³ + 0.05) ≈ 2.2:1
• tergelap di atas tengah: (0.52³ + 0.05) ÷ (0.32³ + 0.05) ≈ 2.3:1

Hanya tergelap di atas paling terang yang layak menjadi pasangan teks isi, dan itu pun dengan selisih yang tidak lebar. Alat ini menampilkan rasio setiap warna terhadap putih dan terhadap hitam, tetapi tidak antaranggota, jadi untuk membandingkan dua swatch satu sama lain, bagi angka “on white” yang lebih besar dengan yang lebih kecil. Angka 1.05 dalam rumus saling meniadakan, sehingga hasilnya tepat sebelum pembulatan.

Membuat harmoni dan membaca auditnya

1. Atur warna dasar. Gunakan swatch atau ketik di kolom hex di sebelahnya; kolom ini menerima hex, rgb(), hsl(), atau oklch(). Alat ini terbuka dengan #2563eb.
2. Pilih harmoni. Ada enam tombol di bawah Harmony, dengan catatan untuk harmoni yang sedang aktif di bawahnya. Tombol H berpindah ke harmoni berikutnya dengan warna dasar yang sama, dan Random base (atau tombol R) mempertahankan harmoni sambil memilih warna dasar baru.
3. Baca setiap swatch. Di bawah kode hex-nya ada dua baris: on white dan on black, masing-masing dengan rasio dan putusan “AA”, “large only”, atau “fails”. Karena hasil kali kedua rasio sebuah warna selalu 21, setiap swatch lolos AA di salah satu dari dua latar itu. Yang penting adalah di latar mana teks Anda akan berada.
4. Baca panel audit. Judulnya bertuliskan “Every pair survives colour blindness” atau menyebutkan berapa pasangan yang menyatu. Setiap pasangan yang menyatu dicantumkan bersama jenis penglihatan tempat ia gagal. Pengujiannya menyimulasikan delapan jenis defisiensi penglihatan warna dan menandai pasangan yang jarak CIEDE2000-nya turun di bawah 11.
5. Salin CSS-nya. Panel di bagian bawah menuliskan set sebagai --palette-1, --palette-2, dan seterusnya, dan Copy menyalinnya ke clipboard. Share menyalin tautan ke set yang sama, dan Save here menyimpannya di perangkat ini.

Membuat setiap harmoni tetap terbaca

Langkah yang sama untuk semuanya: pakai harmoni untuk isian, aksen, dan seri grafik, lalu ambil warna teks dari perubahan kecerahan pada salah satu hue-nya.

Komplementer

Dua warna pada satu kecerahan. Tidak satu pun berfungsi sebagai teks di atas yang lain, jadi biarkan satu warna menguasai sebagian besar area dan pakai yang lain secukupnya. Untuk teks, gunakan langkah gelap dari salah satu hue; generator ramp dan token membuat sebelas langkah dari satu hue dan menunjukkan langkah yang mencapai 4.5:1 di atas putih.

Triadik dan komplementer terbelah

Tiga hue pada satu kecerahan, semuanya bersaing dengan bobot visual yang sama. Pilih satu untuk mendominasi, seperti saran catatan alat, dan ambil warna teks dari netral atau langkah gelap, bukan dari set itu. Set-set ini juga yang sepenuhnya mengandalkan hue untuk membedakan, jadi baca auditnya sebelum Anda memakainya untuk membedakan apa pun, misalnya seri dalam grafik.

Analog

Tetangga yang berjarak 30° dengan kecerahan yang sama sepenuhnya bergantung pada hue agar tetap bisa dibedakan. Itu membuatnya tenang sebagai latar dan aksen, dan berarti audit penglihatan warna adalah pemeriksaan yang bisa dipercaya jika dua di antaranya harus bermakna berbeda. Pisahkan keduanya dengan kecerahan, atau tambahkan isyarat kedua: catatan alat menunjuk ke WCAG 1.4.1, yang meminta agar warna tidak pernah menjadi satu-satunya pembawa makna.

Monokromatik

Sudah terpisah oleh kecerahan, itulah sebabnya catatan alat menyebutnya bertahan pada semua jenis buta warna. Inilah satu-satunya harmoni yang memuat pasangan teksnya sendiri: anggota tergelap di atas yang paling terang, sekitar 5:1 menurut hitungan netral di atas.

Cara lain melakukannya

Tidak ada metode bawaan di macOS, Windows, atau iPhone untuk membuat harmoni warna, dan tidak ada jalur command line di antara yang dijamin oleh panduan-panduan ini. Di atas kertas, roda hue memberi Anda sudutnya; pemeriksa kontras lalu memberi tahu hasil mana yang bisa membawa teks, beserta versi terdekat dari masing-masing yang bisa.

Memastikan tidak ada yang dikirim

Tidak ada yang diunggah, karena memang tidak ada yang perlu diunggah: warna dasar dan harmoni disimpan setelah tanda # di bilah alamat, dan browser tidak mengirim bagian URL itu ke server. Amati panel Network di DevTools saat Anda berganti harmoni, dan Anda tidak akan melihat apa pun yang membawanya.

Buka harmoni warna, coba warna dasar Anda sebagai triad lalu sebagai set monokromatik, dan bandingkan apa kata auditnya. Untuk membuat set yang bertahan terhadap defisiensi penglihatan warna sejak awal, lihat Cara membuat palet warna yang aman untuk buta warna.