Warna dan Background

Warna adalah deklarasi CSS yang paling sering kita tulis: hampir setiap desain halaman dimulai dari menentukan warna teks dan warna latar. CSS menyediakan dua properti utama untuk keperluan ini, yaitu color dan background-color, keduanya menerima nilai dalam beberapa format penulisan. Selain warna solid, latar elemen dapat diisi gambar lewat properti background-image. Pada Chapter ini kita mempelajari keempat kemampuan tersebut sekaligus menetapkan standar kontras minimum agar teks tetap nyaman dibaca oleh semua pengunjung.

Properti color dan background-color #

Properti color mengatur warna teks di dalam elemen, sedangkan background-color mengatur warna latar di belakang teks tersebut. Keduanya diisi dengan satu nilai warna:

.berita {
  color: #1f2937;
  background-color: #fde68a;
}

Kedua properti ini berperilaku berbeda soal pewarisan. Nilai color diwarisi ke elemen anak, sehingga warna teks yang ditetapkan pada body berlaku untuk seluruh isi halaman. Nilai background-color tidak diwarisi; latar setiap elemen diatur sendiri-sendiri dan secara bawaan tembus pandang.

Format Nilai Warna #

CSS menerima beberapa format nilai warna yang mewakili warna yang sama:

Ketiga notasi angka di atas sebenarnya menunjuk warna hijau yang sama. Format hsl menjadi pilihan menarik saat kita perlu membuat variasi: menaikkan lightness menghasilkan versi lebih terang, menurunkannya menghasilkan versi lebih gelap, tanpa mengubah rasa warnanya.

background-image dan background-size #

Properti background-image mengisi latar elemen dengan gambar lewat fungsi url():

.banner {
  background-image: url("pola-daun.png");
  background-size: cover;
}

Nilai cover pada background-size membuat gambar memenuhi seluruh area elemen sambil mempertahankan proporsi aslinya; bagian gambar yang tidak muat terpotong. Tanpa pengaturan ini, gambar kecil akan diulang-ulang mengisi latar karena perilaku bawaan background-repeat. Sebagaimana konvensi contoh di course ini, file pola-daun.png tidak disertakan di bundle: sediakan sendiri gambar apa pun dengan nama tersebut bila ingin menguji, karena validator tidak memeriksa keberadaan file.

Kontras Teks untuk Keterbacaan #

Warna yang dipilih bebas, tetapi kombinasi warna teks dan latarnya wajib tetap terbaca. Standar WCAG 2.2 level AA mensyaratkan rasio kontras minimal 4.5:1 untuk teks berukuran normal, angka yang memastikan teks tetap terbaca oleh pengunjung dengan penglihatan terbatas maupun di layar yang kusam. Alat bantu contrast checker menghitung rasio ini untuk setiap pasangan warna yang kita pilih.

Contoh Palet Sederhana #

Contoh berikut menyusun palet tiga warna untuk sebuah halaman katalog, ditulis sebagai CSS internal agar berdiri sendiri:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Palet Katalog Tanaman</title>
  <style>
    body {
      background-color: #f3f4f6;
      color: #1f2937;
      font-family: sans-serif;
    }

    header {
      background-color: #1a6b54;
      color: #ffffff;
    }

    .unggulan {
      background-color: #fde68a;
    }
  </style>
</head>
<body>
  <header>
    <h1>Katalog Tanaman Siti</h1>
  </header>
  <section class="unggulan">
    <h2>Tanaman Unggulan</h2>
    <p>Monstera, sansevieria, dan lidah mertua tersedia minggu ini.</p>
  </section>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Header berlatar hijau dengan judul berwarna putih
  - Bagian unggulan berlatar kuning muda dengan teks gelap
  - Seluruh halaman berlatar abu-abu terang dengan teks gelap

Mari kita telaah peran setiap baris penting di atas:

1. Baris 8-12 CSS (body { ... }): warna latar abu-abu terang dan warna teks gelap yang diwarisi seluruh isi halaman.
2. Baris 14-17 CSS (header { ... }): latar hijau #1a6b54 dipasangkan dengan teks putih; pasangan ini melewati ambang kontras 4.5:1.
3. Baris 19-21 CSS (.unggulan { ... }): latar kuning muda untuk kotak unggulan, tetap dipadukan dengan teks gelap hasil pewarisan agar kontrasnya tinggi.
4. Baris 25-27 HTML (<header>): elemen konten yang menjadi sasaran aturan header.
5. Baris 28-31 HTML (<section class="unggulan">): elemen konten yang menjadi sasaran selector class .unggulan.

Palet tiga warna seperti di atas cukup untuk banyak halaman sederhana: satu warna aksen, satu warna netral, dan satu warna penanda. Chapter berikutnya menambahkan dimensi terakhir dari penampilan teks, yaitu jenis huruf, ukuran, dan atur penataannya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Properti color
• MDN Web Docs — color value
• MDN Web Docs — Properti background-image
• W3C WAI — WCAG 2.2 Quick Reference

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Palet Katalog Tanaman</title>
  <style>
    body {
      background-color: #f3f4f6;
      color: #1f2937;
      font-family: sans-serif;
    }

    header {
      background-color: #1a6b54;
      color: #ffffff;
    }

    .unggulan {
      background-color: #fde68a;
    }
  </style>
</head>
<body>
  <header>
    <h1>Katalog Tanaman Siti</h1>
  </header>
  <section class="unggulan">
    <h2>Tanaman Unggulan</h2>
    <p>Monstera, sansevieria, dan lidah mertua tersedia minggu ini.</p>
  </section>
</body>
</html>