Pengenalan HTML 6
Bermain dengan Warna

Dalam melakukan pewarnaan, bootstrap 5 telah menyediakan template warna yang agak banyak, dan siap untuk dipakai. Hari ini kita akan mulai melakukan pengenalan pewarnaan untuk text dan background.

Arti nama-nama warna

Bootstrap tidak menamai warna dengan "biru" atau "merah", tetapi dengan peran-nya. Cara ini membantu kamu memilih warna berdasarkan fungsi, sehingga bila nanti tema situs diganti, makna warnanya tetap sama. Berikut pegangan yang umum dipakai:

• primary: warna utama situs, dipakai untuk aksi terpenting seperti tombol "Daftar".
• secondary: warna pendukung yang lebih kalem, untuk aksi kurang penting.
• success: hijau, menandakan berhasil atau benar.
• danger: merah, menandakan bahaya, kesalahan, atau tindakan menghapus.
• warning: kuning, menandakan peringatan agar pengguna berhati-hati.
• info: biru muda, untuk informasi tambahan yang netral.
• light dan dark: terang dan gelap, sering dipakai untuk latar dan teks.

Menggabungkan warna teks dan latar

Class text-* mengubah warna tulisan, sedangkan bg-* mengubah warna latar. Keduanya bebas digabung, tetapi pilih pasangan yang kontrasnya tinggi supaya mudah dibaca. Teks putih di latar kuning, misalnya, hampir tidak terbaca, sementara teks gelap di latar kuning sangat jelas. Karena itu Bootstrap menyediakan juga class text-bg-* yang memilih warna teks otomatis mengikuti latarnya.

<div class="bg-success text-white p-3">Data berhasil disimpan</div>
<div class="bg-danger text-white p-3 mt-2">Gagal: nama tidak boleh kosong</div>
<div class="bg-warning text-dark p-3 mt-2">Peringatan: kata sandi terlalu pendek</div>
<div class="text-bg-primary p-3 mt-2">Latar biru dengan teks otomatis</div>

Perhatikan p-3 pada setiap kotak. Tanpa padding, tulisan akan menempel ke tepi latar berwarna. Kamu akan mempelajari padding lebih dalam pada bab berikutnya.

Mengapa kontras itu penting?

Sekitar satu dari dua belas laki-laki memiliki gangguan penglihatan warna, dan banyak orang membaca layar ponsel di bawah terik matahari. Jika informasi hanya dibedakan lewat warna, sebagian pengguna akan melewatkannya. Praktik yang baik adalah menambahkan teks atau ikon pendamping, misalnya kata "Error" di samping kotak merah, selain mengandalkan warna.

Warna pada komponen lain

Nama-nama warna yang sama dipakai ulang oleh komponen Bootstrap lain. Tombol memakai btn-primary, kotak pesan memakai alert-danger, dan lencana kecil memakai badge bg-success. Karena polanya konsisten, setelah hafal satu set nama kamu otomatis bisa memakainya di semua komponen tanpa belajar ulang.

Kesalahan yang sering terjadi

• Memberi text-white pada latar terang sehingga tulisan lenyap.
• Memakai terlalu banyak warna dalam satu halaman, sehingga tampilan ramai dan membingungkan. Pakai paling banyak dua atau tiga warna utama.
• Menukar makna warna, misalnya memakai merah untuk tombol "Simpan".
• Menulis bg-blue atau text-red; nama seperti itu tidak ada di Bootstrap.

Ringkasan

Warna Bootstrap dinamai menurut peran (primary, success, danger, dan lainnya). Gunakan text-* untuk tulisan dan bg-* untuk latar, perhatikan kontras, dan jangan bergantung pada warna semata untuk menyampaikan informasi.

Latihan

1. Warna Bootstrap mana yang tepat untuk pesan "Akun berhasil dibuat"?
   Lihat jawaban

   success (hijau), misalnya bg-success text-white.
2. Buatlah kotak berlatar gelap dengan tulisan putih dan ruang dalam yang nyaman.
   Lihat jawaban

   <div class="bg-dark text-white p-3">Teks</div>
3. Mengapa bg-warning lebih baik dipasangkan dengan text-dark?
   Lihat jawaban

   Latar kuning itu terang, sehingga tulisan gelap memberi kontras yang jauh lebih jelas dibanding putih.
4. Selain warna, apa yang sebaiknya ditambahkan agar pesan error lebih mudah dikenali semua orang?
   Lihat jawaban

   Teks penjelas atau ikon, misalnya tulisan "Error:" sebelum pesan.