Cara membuat palet warna aksesibel dari satu warna brand

Kebanyakan panduan brand hanya memberi Anda satu kode hex dan sebuah logo. Mengubahnya menjadi sesuatu yang bisa dipakai untuk membangun antarmuka adalah pekerjaan sistematis, dan mengerjakannya dengan perkiraan mata adalah saat masalah aksesibilitas tertanam sejak awal.

Langkah 1: temukan hue

Konversikan warna brand ke OKLCH dan catat sudut hue-nya. Angka itulah brand Anda. Selebihnya bisa disesuaikan.

#2563eb  →  oklch(54.6% 0.215 262.9)

Hue 262.9 kini dikunci untuk seluruh ramp. Kecerahan (lightness) dan kroma adalah variabelnya.

Langkah 2: bangun ramp

Sepuluh langkah, berjarak merata dalam kecerahan, dengan kroma memuncak di tengah dan menurun di kedua ujung. Warna yang sangat terang dan sangat gelap tidak bisa mempertahankan kroma tinggi tanpa keluar dari rentang yang dapat ditampilkan layar.

--brand-50:  oklch(97% 0.015 263);
--brand-100: oklch(93% 0.035 263);
--brand-200: oklch(87% 0.070 263);
--brand-300: oklch(79% 0.120 263);
--brand-400: oklch(67% 0.180 263);
--brand-500: oklch(55% 0.215 263);  /* the original */
--brand-600: oklch(48% 0.200 263);
--brand-700: oklch(40% 0.165 263);
--brand-800: oklch(31% 0.120 263);
--brand-900: oklch(22% 0.075 263);

Karena kecerahan OKLCH seragam secara perseptual, langkah-langkah ini terlihat merata. Latihan yang sama di HSL menghasilkan ramp yang menumpuk di tengah dan melompat di kedua ujungnya.

Langkah 3: tetapkan peran berdasarkan pengukuran, bukan perkiraan mata

Inilah langkah yang menentukan apakah sistem Anda aksesibel, dan justru langkah inilah yang paling sering dikerjakan berdasarkan intuisi.

Jangan memilih “yang paling bagus” untuk teks. Mulailah dari kebutuhan kontras, lalu telusuri mundur:

Peran	Kebutuhan	Langkah yang umum
Teks isi di atas putih	4.5:1	600–700
Teks besar di atas putih	3:1	500–600
Latar tombol dengan label putih	4.5:1 untuk labelnya	600
Border dan pemisah	3:1 jika bermakna	400 (300 terukur 1.95:1 di atas putih, jadi hanya untuk dekorasi)
Latar halus	tidak ada	50–100

Wawasan yang berguna: warna brand Anda biasanya bukan warna teks Anda. Langkah 500 yang cerah dibuat untuk dilihat dalam ukuran besar, pada logo. Pakai sebagai teks isi 16px dan biasanya ia tidak mencapai 4.5:1. Langkah 600 atau 700 itulah yang dibutuhkan teks isi, dan warnanya masih jelas dikenali sebagai biru Anda.

Langkah 4: buat varian dark mode

Jangan berasumsi ramp bisa dibalik begitu saja. Tidak bisa, karena dua alasan.

Rumus WCAG 2 menambahkan konstanta flare tetap yang mendominasi di ujung gelap, sehingga pasangan warna gelap bisa mencatat rasio lolos padahal terlihat redup. Selain itu, warna yang sangat jenuh tampak bergetar di atas latar gelap, hal yang tidak terjadi di atas putih.

Jadi setiap peran semantik memerlukan nilai kedua, yang lebih terang dan biasanya kurang jenuh:

:root {
  --text-brand: var(--brand-700);
  --surface-brand: var(--brand-50);
  --border-brand: var(--brand-400);
}

:root[data-theme='dark'] {
  --text-brand: var(--brand-300);
  --surface-brand: var(--brand-900);
  --border-brand: var(--brand-700);
}

Ramp yang sama, langkah yang berbeda. Inilah mengapa membangun ramp lebih dulu terbayar: dark mode menjadi pemetaan ulang, bukan latihan desain kedua.

Langkah 5: beri nama berdasarkan peran, bukan nilai

--brand-600 adalah nilai. --text-brand adalah peran. Komponen sebaiknya merujuk ke peran.

Alasannya praktis: ketika warna brand berubah (dan itu pasti terjadi), Anda cukup membuat ulang ramp, dan peran-peran tetap menunjuk ke langkah yang tepat. Jika komponen merujuk langsung ke --brand-600, semuanya harus ditinjau ulang satu per satu.

Cara ini juga yang membuat theming bisa dilakukan sama sekali. Sebuah peran bisa menunjuk ke langkah yang berbeda di tema yang berbeda. Nilai mentah tidak bisa.

Langkah 6: periksa pasangannya, bukan hanya ramp-nya

Ramp yang lolos uji kontras masih bisa gagal saat dipakai. Ada dua hal yang perlu diverifikasi:

Setiap kombinasi teks di atas permukaan yang benar-benar Anda rilis. Bukan semua pasangan yang mungkin, melainkan yang muncul di antarmuka. Teks isi di atas latar halaman, teks isi di atas kartu, tautan di atas kartu, label tombol di atas tombol.

Apakah ada dua warna yang menyatu bagi pengguna buta warna. Jika sistem Anda memiliki aksen kedua (misalnya hijau sukses di samping biru brand), periksa pasangan itu secara khusus. Pemeriksaan kontras membandingkan latar depan dengan latar belakang dan tidak pernah membandingkan latar depan dengan latar depan, sehingga kegagalan ini lolos dari setiap audit rasio.

Versi terpendeknya

Kunci hue. Naikkan kecerahan bertahap. Kurangi kroma di ujung. Tetapkan peran berdasarkan pengukuran, bukan perkiraan mata. Buat varian gelap alih-alih membalik. Beri nama berdasarkan peran.

Enam langkah dan satu warna brand menghasilkan sistem yang lolos di kedua tema, tanpa ada yang perlu bernegosiasi dengan panduan brand.

Pemeriksa kontras kami mengerjakan bagian pengukurannya: berikan sepasang warna dan alat ini menunjukkan rasionya, angka APCA pada ukuran dan ketebalan huruf Anda yang sebenarnya, serta warna terdekat yang lolos jika pasangan itu gagal.