Warna dan satuan

Teks abu-abu muda #bbbbbb di atas putih punya rasio kontras 1.92 banding 1. WCAG meminta paling sedikit 4.5 banding 1 untuk teks biasa.

Cara menulis warna

CSS menerima warna dalam beberapa notasi, dan semuanya berujung pada hal yang sama: takaran cahaya merah, hijau, dan biru di layar. Warna bernama seperti red, navy, atau rebeccapurple mudah dibaca, tetapi pilihannya terbatas. Notasi hex menulis merah, hijau, dan biru masing-masing sebagai dua digit heksadesimal, dari 00 sampai ff (0 sampai 255): #1a5fb4 berarti merah 26, hijau 95, dan biru 180, yaitu biru sedang. rgb(26 95 180) menyatakan hal yang sama dalam desimal. hsl(210 80% 40%) menggambarkan warna lewat rona (sudut pada roda warna, dengan 0 merah, 120 hijau, dan 240 biru), saturasi, dan kecerahan. Dengan begitu, kamu mudah membuat corak yang lebih terang atau lebih gelap dari rona yang sama cukup dengan mengubah satu angka.

color: navy;
color: #1a5fb4;              /* same as #1A5FB4 */
color: #36c;                 /* short form of #3366cc */
color: rgb(26 95 180);
color: rgb(26 95 180 / 50%); /* half transparent */
color: hsl(210 80% 40%);
background-color: transparent;

Nilai keempat, sesudah garis miring, mengatur kanal alfa: rgb(0 0 0 / 50%) adalah hitam dengan opasitas setengah, jadi apa pun yang ada di belakangnya ikut terlihat. color mengatur warna teks, background-color isian di belakang elemen, dan border-color warna bingkainya. Kata kunci currentColor berarti warna teks elemen itu, praktis untuk ikon dan bingkai yang harus serasi dengan teksnya.

Kontras itu wajib

Teks yang kecerahannya terlalu mirip dengan latar sulit dibaca banyak orang: siapa pun yang penglihatannya lemah, pembaca lanjut usia, dan semua orang yang membaca ponsel di bawah sinar matahari. WCAG 2.2, pedoman aksesibilitas dari W3C, mengukurnya sebagai rasio kontras dari 1 banding 1 (tanpa perbedaan) sampai 21 banding 1 (hitam di atas putih). Kriteria keberhasilan 1.4.3 meminta paling sedikit 4.5 banding 1 untuk teks biasa dan 3 banding 1 untuk teks besar, yang menurut WCAG berukuran paling sedikit 18 poin, atau 14 poin tebal. Abu-abu tua #767676 di atas putih pas lolos dengan 4.54 banding 1; #777777 pas gagal dengan 4.48. Alat pengembang di browser menampilkan rasionya saat kamu memeriksa elemen teks, jadi tidak perlu menebak.

Warna juga jangan pernah menjadi satu-satunya cara menyampaikan informasi. Formulir yang menandai kesalahan hanya dengan mengubah bingkai menjadi merah meninggalkan semua orang yang sulit melihat warna merah; tambahkan juga pesan atau ikon.

Satuan absolut dan relatif

Panjang memerlukan satuan, kecuali nol. px adalah piksel CSS, satuan tetap; di layar berkerapatan tinggi, satu piksel CSS mencakup beberapa piksel fisik, sehingga ukurannya kira-kira tetap sama di mata. Satuan relatif berubah mengikuti hal lain. em relatif terhadap ukuran fon elemen itu sendiri, jadi padding: 0.5em pada teks 20 piksel sama dengan 10 piksel. rem relatif terhadap ukuran fon akar (html), yang di browser bernilai 16 piksel kecuali pembaca mengubahnya, jadi 1.25rem biasanya 20 piksel. % relatif terhadap induk, biasanya lebarnya. vw dan vh adalah seperseratus lebar dan tinggi viewport, sedangkan ch kira-kira selebar digit nol pada fon yang sedang dipakai.

Mana yang dipakai? Mengatur ukuran teks dengan rem menghormati pembaca: jika seseorang mengatur browsernya ke teks yang lebih besar, semua yang berukuran rem ikut membesar, sedangkan teks yang dipatok dalam px belum tentu. Padding dalam em membesar bersama teks yang dikelilinginya. Piksel cocok untuk hal yang tidak perlu ikut berskala, misalnya bingkai 1 piksel.