Warna dan desain
Desain dimulai di sini dari warna: bagaimana mata mengubah cahaya menjadi warna, bagaimana layar menuliskannya sebagai tiga angka, dan cara memeriksa apakah teks tetap mudah dibaca.
Tujuh unit pada satu ruang warna
Untuk sekarang mata pelajaran ini punya satu kursus, Teori warna, yang terdiri dari tujuh unit. Unit pertama menjelaskan cara kita melihat warna. Dua unit berikutnya membahas RGB dengan kode hex, lalu rona, saturasi, dan kecerahan. Unit keempat menyusun harmoni warna, unit kelima membandingkan pencampuran cahaya dengan pencampuran tinta, dan dua unit terakhir membahas kontras serta pemakaian warna dalam desain nyata. Sebagian besar unit memakai satu model yang bisa kamu putar dengan tetikus: kubus RGB dari 512 balok kecil, atau warna yang sama yang disusun ulang menjadi silinder HSL. Klik sebuah titik, dan panel di bawahnya menampilkan kode hex, nilai HSL, warna harmoninya, serta rasio kontrasnya terhadap latar yang kamu pilih.
Sel kerucut, prisma, dan kubus RGB
Apel merah sebenarnya tidak mengandung warna merah. Apel itu menyerap panjang gelombang pendek dan menengah dari sinar matahari lalu memantulkan yang panjang. Retina punya sekitar 6 juta sel kerucut dari tiga jenis, dan warna muncul saat otak membandingkan sinyal ketiganya. Karena itu cahaya kuning murni dan campuran cahaya merah dan hijau bisa tampak sama persis. Newton menguraikan sinar matahari dengan prisma pada tahun 1660-an dan menggambar salah satu lingkaran warna pertama dalam Opticks pada tahun 1704. Di web, setiap kanal bernilai dari 0 sampai 255, jadi rgb(0 0 0) adalah hitam dan rgb(255 255 255) adalah putih. Kode hex terdiri dari tiga pasang angka basis 16: pada #2273c3, pasangan c3 bernilai 12 × 16 + 3 = 195.
Sudut pada lingkaran rona
HSL menyatakan rona sebagai sudut: 0deg merah, 120deg hijau, dan 240deg biru. Pada saturasi 0%, rona tidak berpengaruh apa pun, dan kecerahan 50% menghasilkan versi rona yang paling cerah. Model ini punya batas, dan batas itu disebutkan terus terang: kuning dan biru pada kecerahan 50% yang sama memiliki luminans 0.9278 dan 0.0722. Setelah warna ditempatkan pada lingkaran, harmoni adalah sekumpulan sudut. Rona komplementer berjarak 180 derajat, triadik terdiri dari tiga rona yang berjarak 120 derajat, dan skema komplementer terbagi memakai 150 dan 210 derajat. Perhatikan satu perbedaan: lingkaran cahaya menempatkan biru di seberang kuning, sedangkan lingkaran pelukis menempatkannya di seberang oranye. Tinta bekerja kebalikan dari cahaya: sian menghilangkan merah, magenta menghilangkan hijau, kuning menghilangkan biru, dan percetakan menambahkan hitam karena tinta sungguhan hanya menghasilkan cokelat keruh.
Rasio yang menentukan keterbacaan
Keterbacaan teks diukur, bukan ditebak dengan mata. Luminans relatif menurut WCAG memberi bobot pada kanal yang sudah dilinearkan, yaitu 0.2126 untuk merah, 0.7152 untuk hijau, dan 0.0722 untuk biru, dan rasio kontrasnya adalah (L1 + 0.05) / (L2 + 0.05), dari 1:1 sampai 21:1. Level AA meminta 4.5:1 untuk teks isi dan 3:1 untuk teks besar dan bagian antarmuka, sedangkan AAA meminta 7:1. Abu-abu #767676 di atas putih mencapai 4.54:1 dan lolos, sedangkan merah #ff0000 hanya mencapai 4.00:1 dan gagal untuk teks isi. Unit terakhir menambahkan WCAG 1.4.1: warna tidak boleh menjadi satu-satunya cara menyampaikan informasi, karena buta warna merah-hijau dialami sekitar 8% laki-laki. Rencanakan dulu tingkat kecerahan, baru kemudian ronanya; dalam model, oranye merek dan biru komplementernya hanya mencapai 1.06:1.
Pertanyaan tentang mata pelajaran ini
Apa arti angka pada warna RGB?
Angka itu mengatur kanal merah, hijau, dan biru, biasanya dari nol sampai 255 dalam kode web. Nol mematikan kanal dan 255 menyalakannya penuh. Semua nol menghasilkan hitam, semua 255 putih. Warna heksadesimal merekam tiga kanal sama sebagai tiga pasang digit basis enam belas, bukan memakai kumpulan warna berbeda. Teori warna
Mengapa dua warna HSL dengan kecerahan sama bisa terlihat berbeda tingkat terangnya?
Kecerahan HSL adalah koordinat model warna, bukan ukuran langsung kecerahan yang dirasakan. Kuning dan biru jenuh penuh sama-sama memiliki kecerahan lima puluh persen, tetapi kuning tampak jauh lebih terang. Luminans relatif WCAG masing-masing 0.9278 dan 0.0722. Menyamakan angka HSL saja tidak memastikan kontras teks dan latar memadai. Teori warna
Mengapa mengubah rona tidak berpengaruh saat saturasi nol?
Pada saturasi nol, warna berada di sumbu abu-abu model HSL. Rona tidak lagi berpengaruh, sehingga pengaturan sudut merah dan sian pada kecerahan lima puluh persen memberi abu-abu sama. Kecerahan tetap berpengaruh: nol persen menjadi hitam dan seratus persen putih, apa pun sudut rona pada roda warna. Teori warna
Mengapa printer menambahkan tinta hitam, bukan hanya mencampur tiga warna?
Tinta sian, magenta, dan kuning nyata bukan filter sempurna. Campurannya bisa menghasilkan cokelat gelap keruh, bukan hitam bersih. Mencetak tiga lapis hanya untuk teks hitam juga lambat dan basah. CMYK menambahkan tinta hitam tersendiri. Cat nyata lebih rumit lagi karena pigmen menyebarkan sekaligus menyerap cahaya. Teori warna
Berapa rasio kontras teks normal untuk WCAG AA?
Teks normal memerlukan sedikitnya 4.5:1, sedangkan teks besar yang memenuhi syarat memerlukan 3:1. Rasio membandingkan luminans relatif teks dan latar, bukan sekadar beda rona. Merah #ff0000 di atas putih menghasilkan 4.00:1. Warna ini lolos ambang teks besar tetapi gagal untuk teks normal, meskipun tampak kuat dan cerah. Teori warna