Cara membuat brand guidelines satu halaman, lengkap dengan pasangan warna yang lolos

Sebagian besar brand sheet menjawab pertanyaan klien, “apa saja warna kami?”, lalu melewatkan pertanyaan yang diajukan developer berikutnya: “mana yang boleh dipakai sebagai latar teks?” Lembar satu halaman bisa menjawab keduanya, dan jawaban kedua itulah yang mencegah brand dipakai secara keliru.

Isi minimal sebuah brand sheet

Empat hal, dan masing-masing ada karena seseorang di tahap berikutnya akan bertindak berdasarkan isinya:

• Logo, sebagai file. Lembar ini merujuk ke logo; tidak mendesain ulang.
• Palet, setiap warna diberi nama sesuai perannya dan dicantumkan nilai hex-nya, supaya tidak ada yang perlu mengambil sampel warna dari PDF.
• Satu pasangan huruf: satu huruf untuk judul dan satu untuk body. Mencantumkan tiga pilihan hampir menjamin tidak satu pun diikuti.
• Matriks kombinasi yang disetujui, bagian yang paling sering dihilangkan dari template.

Matriks kombinasi yang disetujui (approved-combinations matrix) adalah kisi yang menampilkan setiap warna brand sebagai teks di atas setiap warna lain, dengan kontras terukur dan status lolos atau gagal di tiap sel. Matriks ini mengubah palet menjadi panduan, karena lima kode hex tidak memberi tahu developer warna mana yang boleh dipakai sebagai teks di atas warna mana. Panduan brand yang dipublikasikan oleh UCLA, GOV.UK, sistem Carbon milik IBM, dan Scope semuanya memuat matriks seperti ini, dengan kegagalan yang ditandai; UCLA melabelinya DNP, singkatan dari “does not pass” atau tidak lolos.

Yang boleh dihilangkan dari lembar satu halaman adalah teks brand voice dan pernyataan misi yang ditulis oleh alat. Kolom kosong untuk keduanya lebih jujur daripada isian asal-asalan.

Membuat lembarnya dengan alat ini

1. Buka Brand sheet generator dan pilih titik awal. I have a logo (saya punya logo) membaca hingga empat warna berbeda langsung dari gambar (PNG, JPEG, WebP, atau SVG). Start from scratch (mulai dari nol) dibuka dengan palet empat warna yang bisa Anda timpa.
2. Ketik namanya di Brand name.
3. Di Palette, atur setiap warna melalui kotak warnanya atau kolom hex-nya, lalu ganti namanya. Add menambah palet hingga enam warna dan Remove mengurangi hingga dua. Jika Anda memulai dari logo, periksa namanya: warna-warna diberi label Primary, Ink, Surface, dan Accent sesuai urutan ditemukannya, bukan sesuai fungsinya.
4. Di Typography, pilih satu pasangan huruf. Filter di bagian atas (All, Modern, Editorial, Technical, Warm, Classic, Expressive) mempersempit daftar, dan Explore all 16 pairings menampilkan sisanya. Semua huruf tersedia di Google Fonts dengan lisensi OFL.
5. Baca Approved combinations. Baris di bawah judulnya menghitung jumlah pasangan yang gagal. Tabelnya memiliki empat kolom: Text on background, WCAG, APCA, dan Use instead. Di bawah tabel, pasangan warna mana pun yang runtuh dalam simulasi buta warna akan disebutkan.
6. Ekspor dari bilah di bagian bawah: PDF untuk dokumen A4 yang siap dikirim, PNG untuk lembar sebagai satu gambar yang bisa dimasukkan ke slide presentasi, dan Tokens untuk warna dalam format W3C DTCG JSON. Save here menyimpan lembar di perangkat ini.

Sertakan warna yang Anda curigai akan gagal. Matriks yang sengaja membuang warna-warna bermasalah bukanlah panduan.

Contoh matriks empat warna, dikerjakan lengkap

Palet awal alat ini adalah kasus uji yang berguna karena tampak aman: Primary #2563EB, Ink #0F172A, Surface #FFFFFF, dan Accent #F59E0B.

Setiap sel adalah rasio kontras WCAG: (luminans yang lebih terang + 0.05) ÷ (luminans yang lebih gelap + 0.05). Luminans relatif keempat warna itu adalah 0.1532, 0.0088, 1, dan 0.4389. Empat warna menghasilkan 4 × 3 = 12 sel, karena “Ink di atas Surface” dan “Surface di atas Ink” adalah baris yang terpisah. Rasionya sama dari kedua arah, jadi berikut enam pasangan yang berbeda:

Pasangan	Hitungan	Rasio	Putusan
Ink dan Surface	1.05 ÷ 0.0588	17.85:1	AA
Ink dan Accent	0.4889 ÷ 0.0588	8.31:1	AA
Primary dan Surface	1.05 ÷ 0.2032	5.16:1	AA
Primary dan Ink	0.2032 ÷ 0.0588	3.45:1	Hanya teks besar
Primary dan Accent	0.4889 ÷ 0.2032	2.40:1	Tidak lolos
Surface dan Accent	1.05 ÷ 0.4889	2.14:1	Tidak lolos

Jadi, baris di atas tabel berbunyi “6 of 12 pairings fail AA for body text”. Separuh kombinasi palet tidak bisa dipakai untuk teks body, dan yang mengejutkan banyak orang adalah warna aksennya: amber di atas latar halaman putih hanya mencapai 2.14:1, jauh dari 4.5:1 yang dibutuhkan teks body. Warna ini bagus sebagai isian badge atau tombol dengan teks gelap di atasnya. Namun, ia bukan warna teks di atas putih.

Rasionya dipotong, bukan dibulatkan. 1.05 ÷ 0.2032 adalah 5.167, ditampilkan sebagai 5.16:1, sehingga pasangan bernilai 4.499 tidak akan pernah tampil sebagai 4.50 dan terlihat lolos.

Kolom pengganti

Menandai pasangan yang gagal baru separuh panduan. Separuh lainnya adalah apa yang harus dipakai sebagai gantinya, dan “pilih warna lain” bukan jawaban jika warna itu adalah brand Anda.

Setiap baris yang gagal menyertakan pengganti, jika ditemukan, dengan mempertahankan hue warna teks dan mencari nilai kecerahan terdekat yang lolos 4.5:1. Sel berarti “warna ini di atas warna itu”, jadi yang diganti selalu warna teksnya, tidak pernah latar belakangnya. Pengganti itu tetap terbaca sebagai warna brand, karena hue-lah yang membuat warna mudah dikenali, sedangkan kecerahan yang menentukan hasil pengukuran. Pemisahan itu dibahas mendalam dalam cara memperbaiki kontras warna tanpa mengubah warna brand Anda.

PDF memuat tabel yang sama dengan tiga putusan, yaitu AA, Large only, dan DNP, serta hex pengganti di mana pun tersedia. Kolom APCA tetap hanya di layar.

Batas matriks yang lolos semua

Matriks yang penuh dengan status lolos berarti palet yang tidak akan gagal dalam urusan kontras. Itu belum berarti brand yang aksesibel, dan ada tiga batasan yang layak dicetak di lembar itu sendiri:

• Teks besar punya definisi. WCAG menganggap teks besar mulai dari 24px, atau mulai dari 18.66px untuk huruf tebal. Pasangan berstatus teks besar saja cocok untuk judul, bukan untuk keterangan.
• Angka APCA dihitung untuk 16px dengan bobot regular. APCA adalah prediktor yang lebih baik untuk menilai keterbacaan teks body, karena itulah angkanya diletakkan di samping rasio WCAG, bukan menggantikannya.
• Kontras hanyalah satu kriteria. WCAG 1.4.1 secara terpisah mewajibkan agar warna tidak pernah menjadi satu-satunya cara menyampaikan informasi, dan hal itu tidak bisa diperiksa oleh audit palet mana pun. Baris buta warna di bawah tabel adalah pengingat untuk itu, dan cara membuat palet yang aman bagi buta warna membahasnya lebih jauh.

Cara lain untuk melakukannya

Tidak ada metode bawaan sistem operasi untuk membuat brand sheet atau matriksnya. Secara manual, Anda memerlukan spreadsheet: satu baris dan satu kolom per warna, diagonalnya dikosongkan, dan setiap sel sisanya diukur dengan pemeriksa kontras seperti Contrast checker. Jumlah selnya cepat bertambah. Empat warna berarti 4 × 3 = 12 pengukuran; enam warna berarti 6 × 5 = 30. Mencari pengganti untuk setiap kegagalan secara manual berarti menggeser kecerahan dan mengukur ulang sampai lolos.

Memastikan tidak ada yang diunggah

Logo yang Anda tambahkan dibaca ke dalam canvas di tab, dan PDF serta PNG juga dibuat di sana. Kode yang menulis setiap ekspor baru diunduh saat pertama kali Anda menekan tombolnya, dan di panel Network pada developer tools hal itu terlihat sebagai permintaan skrip yang masuk. Perhatikan panel yang sama saat Anda menambahkan logo dan mengekspor: tidak ada yang keluar membawa gambar atau palet Anda.

Selanjutnya

Buka Brand sheet generator dengan palet persis seperti yang diserahkan kepada Anda, dan baca baris yang gagal terlebih dahulu. Di situlah dokumen ini membuktikan manfaatnya.