Opacity & Blur — UI/UX

Opacity dan Blur Effects Opacity progression from 100 to 25 percent, and a blurred element example.100%70%40%15%blurOpacity untuk hierarki, blur untuk…

Opacity adalah seberapa tembus pandang sebuah elemen: 1 padat, 0 gak terlihat sama sekali. Blur adalah mengaburkan, sehingga bentuk jadi gak tajam. Bayangin jendela kamar mandi di homestay Bu Sri yang kacanya buram. Dari dalam kamu masih tahu di luar ada langit biru dan pohon hijau, tapi bentuknya gak kebaca. Itu blur. Kalau kacanya diberi lapisan putih susu yang lebih tebal, warna dari luar makin pudar dan makin sedikit yang tembus. Itu transparansi. Di CSS dua-duanya ada, dan dua-duanya mengubah warna yang akhirnya dilihat mata, jadi kontrasnya harus dihitung ulang.

🧪 Tebakan cepat: Catatan "Gratis batal sampai 3 hari sebelum check-in." ditulis dengan warna teks utama #1f2937 (14,68:1 di atas putih), lalu diberi opacity: 0.6 supaya terlihat sekunder. Kontrasnya masih lolos 4,5:1? Jawabannya ada di bagian "Opacity atau warna yang lebih terang".

Opacity: seluruh elemen ikut tembus

.note   { opacity: 0.6; }                           /* teks, ikon, garis, semuanya 60% */
.top    { background: rgba(255, 255, 255, 0.7); }   /* cuma latarnya yang 70% */
.dialog-backdrop { background: rgba(0, 0, 0, 0.5); } /* lapisan gelap di belakang dialog */

opacity berlaku untuk seluruh elemen dan anak-anaknya. Warna yang terlihat adalah campuran: 60% warna elemen + 40% apa pun yang ada di belakangnya.
Alpha di dalam warna, misalnya rgba(255, 255, 255, 0.7), cuma membuat warna itu tembus. Teks di atas latar itu tetap padat. Untuk header kaca, ini yang dipakai, bukan opacity: 0.7, yang ikut memudarkan tulisannya.

Opacity atau warna yang lebih terang

Karena opacity mencampur dengan apa yang ada di belakang, hasilnya tergantung latarnya. Ini catatan dan harga Kamar Teras, dihitung dengan rumus kontras WCAG:

Teks	Di atas	Warna yang terlihat	Kontras
`#1f2937`, `opacity: 0.6`	kartu putih	`#797f87`	4,04:1, gagal
`color: #475569`	kartu putih	`#475569`	7,58:1
`#f1f5f9`, `opacity: 0.6`	kartu gelap `#1f2937`	`#9da3ab`	5,77:1
putih, `opacity: 0.6`	foto Kamar Teras, titik `#73592b`	`#c7bdaa`	3,54:1, gagal
`color: #e2e8f0`	foto Kamar Teras, titik `#73592b`	`#e2e8f0`	5,34:1

Jadi jawaban tebakannya: gak lolos. 60% dari teks yang 14,68:1 bukan 60% kontrasnya: warnanya jadi #797f87, dan kontrasnya cuma 4,04:1. Itu jawaban tebakannya. Teks kedua sebaiknya diberi warna yang lebih terang, yang sudah diukur (--text-muted: #475569), bukan opacity. Warna padat kontrasnya tetap; opacity berubah setiap kali latarnya berubah, dan di atas foto bisa jatuh di bawah 4,5:1.

Disabled: opacity 0.5

Konvensi yang umum untuk elemen nonaktif adalah opacity: 0.5. Misalnya tombol "3 malam" saat Kamar Teras sudah penuh di malam ketiga:

<button disabled>3 malam</button>
<p class="note">Malam 14 Des sudah penuh.</p>

<style>
  .nights button:disabled { opacity: 0.5; cursor: not-allowed; }
</style>

Teksnya jadi #8f949b (3,05:1). WCAG 1.4.3 membebaskan komponen yang nonaktif dari aturan kontras, jadi ini boleh.
Atribut disabled yang membuatnya benar-benar gak bisa ditekan dan dibacakan "nonaktif" oleh pembaca layar. Opacity cuma tampilannya.
Kasih tahu alasannya ("Malam 14 Des sudah penuh"), jangan cuma memudarkan.
Tombol hijau "Pesan kamar" dengan opacity: 0.5 jadi hijau pucat #8ac09e, masih terlihat mengundang ditekan. Di halaman Bu Sri, tombol itu memakai abu-abu saat nonaktif, seperti di pelajaran warna struktural.

Blur di belakang: backdrop-filter

Header halaman pesan dibuat menempel di atas (position: sticky) dan setengah tembus, jadi foto kamar terlihat lewat di belakangnya saat di-scroll:

.top {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

backdrop-filter: blur() mengaburkan apa yang ada di belakang elemen. Ini properti efek kaca buram (frosted glass, glassmorphism).
filter: blur() beda: dia mengaburkan elemen itu sendiri, termasuk tulisannya.
Angka di blur() adalah standard deviation Gaussian blur. Untuk efek kaca yang halus, nilai yang umum dipakai 8 sampai 12px: cukup untuk menghapus bentuk di belakang, tanpa kerja ekstra yang gak terlihat.
Biayanya: selama halaman di-scroll, browser harus membaca ulang bagian halaman di belakang header dan mengaburkannya lagi di tiap frame. Makin luas elemennya dan makin besar blur-nya, makin berat, terutama di HP murah. Pakai di area kecil (header, satu bar), jangan di setiap kartu dalam daftar panjang.

Kontras teks di atas kaca

Warna kaca tergantung apa yang lewat di belakangnya. Jadi ukur teks header di titik paling gelap yang bisa lewat: foto Kamar Loteng, langit malam #0f172a. Teks header #1f2937, latar putih dengan alpha:

Alpha putih	Warna kaca di atas `#0f172a`	Kontras teks
0,3	`#575d6a`	2,22:1, gagal
0,5	`#878b94`	4,30:1, gagal
0,52	`#8c9099`	4,59:1, yang paling tipis yang lolos
0,7	`#b7b9bf`	7,48:1
0,92	`#ececee`	12,44:1

Blur gak menyelamatkan kontras. Blur meratakan detail, tapi bidang gelap yang lebar tetap gelap setelah dikaburkan. Yang menentukan kontras adalah alpha putihnya.

Cadangan untuk browser tanpa backdrop-filter

.top { background: rgba(255, 255, 255, 0.92); }  /* cadangan: hampir padat */

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .top {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

Browser yang gak mengenal backdrop-filter memakai latar 0,92 yang hampir padat (12,44:1). Tanpa cadangan ini, dia dapat kaca 0,7 tanpa blur: foto dan tulisan di belakang header terlihat tajam dan bertabrakan dengan teks header.
Safari sebelum versi 18 cuma mengenal -webkit-backdrop-filter, jadi tulis keduanya.

⚠️ Jebakan yang sering ketemu

opacity untuk membuat header transparan. Tulisannya ikut pudar. Pakai alpha di background.
opacity untuk teks kedua. #1f2937 dengan 0,6 cuma 4,04:1. Pakai warna #475569 (7,58:1).
Kaca terlalu tipis di atas foto gelap. Alpha 0,3 di atas #0f172a cuma 2,22:1. Butuh minimal 0,52.
Blur di mana-mana tanpa cadangan. Scroll jadi berat, dan browser lama dapat kaca tanpa blur. Batasi ke header, dan tulis cadangan di luar @supports.

TL;DR: opacity membuat seluruh elemen dan anak-anaknya tembus; alpha di warna (rgba(255, 255, 255, 0.7)) cuma membuat warna itu tembus. Opacity mencampur dengan latarnya, jadi kontrasnya berubah: #1f2937 dengan opacity: 0.6 cuma 4,04:1, sedangkan warna #475569 tetap 7,58:1; untuk teks kedua pakai warna, bukan opacity. Elemen nonaktif umumnya opacity: 0.5 plus atribut disabled (WCAG membebaskan komponen nonaktif dari aturan kontras), dan kasih tahu alasannya. Efek kaca buram dibuat dengan backdrop-filter: blur(), yang mengaburkan apa yang di belakang elemen; 8 sampai 12px adalah nilai yang umum, dan biayanya naik dengan luas elemen dan besar blur. Ukur teks di atas kaca di titik paling gelap yang bisa lewat (#0f172a butuh alpha putih minimal 0,52), dan tulis cadangan latar yang hampir padat di luar @supports.