Grading Overlay di Hero: Tiga Lapis Penjaga Kontras Teks

Foto utama di halaman depan sebuah portal pemerintah daerah menampilkan pemandangan dengan langit cerah. Begitu slider berganti ke foto itu, headline putih di bagian bawah nyaris lenyap: hurufnya masih ada, tetapi ditelan kecerahan langit. Di foto berikutnya yang lebih gelap, teks yang sama terbaca tanpa masalah. Masalahnya bukan ukuran huruf, melainkan kontras antara teks dan medianya.

Dim Datar Saja Tidak Cukup

Solusi pertama yang wajar dicoba: satu lapis overlay hitam transparan di atas seluruh foto. Hitam dengan opacity 35 persen memang segera menenangkan foto paling terang. Tetapi dua kelemahan muncul bersamaan.

Pertama, foto menjadi seragam gelap. Bagian yang tidak menampung teks ikut tertutup, dan detail yang justru menjadi daya tarik foto ikut meredup. Kedua, pada foto yang ramai, misalnya deretan bangunan atau kerumunan orang, peredupan merata 35 persen masih belum cukup menahan kecerahan tepat di belakang teks. Kebutuhan kontras tidak merata: teks menumpuk di satu sisi slide, sementara overlay dibagi rata ke seluruh permukaan.

Tiga Lapis yang Bekerja Sama

Komponen slider akhirnya memakai tiga lapis yang ditumpuk, dan semuanya dibuat non-interaktif. Lapis pertama tetap dim datar hitam 35 persen sebagai setelan dasar. Lapis kedua adalah scrim berarah: gradien CSS linier 90 derajat yang bergradasi dari sisi caption. Nilainya rgba(4,21,15,0.94) di tepi kiri, menurun ke 0.72 pada 30 persen lebar, 0.28 pada 55 persen, lalu transparan sebelum mencapai 74 persen. Teks berdiri di zona paling gelap; arah ke kanan perlahan mengembalikan foto asli [4].

Lapis ketiga adalah glow radial: lingkaran 520 piksel berinti rgba(5,150,105,0.38) dengan blur 6 piksel, diletakkan di belakang caption. Fungsinya bukan menggelapkan, melainkan mengangkat area caption dengan cahaya hijau zamrud yang lembut tanpa tepi keras. Sementara itu, warna dasar gradasi caption diubah dari hitam generik menjadi #04150f, hitam-zamrud yang lebih dalam, supaya seluruh grade terasa disengaja pada satu palet warna.

.dim {
  background-color: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.scrim {
  background-image: linear-gradient(90deg, rgba(4, 21, 15, 0.94) 0%, rgba(4, 21, 15, 0.72) 30%, rgba(4, 21, 15, 0.28) 55%, transparent 74%);
  pointer-events: none;
}
.glow {
  background-image: radial-gradient(520px circle at 35% 65%, rgba(5, 150, 105, 0.38), rgba(5, 150, 105, 0.12) 45%, transparent 70%);
  filter: blur(6px);
  pointer-events: none;
}

Bayangan Berlapis dan Dua Taraf Kontras WCAG

Overlay menggelapkan latar; text-shadow menjaga teks pada foto yang tetap menang di beberapa titik. Properti ini menerima daftar bayangan yang dipisah koma, masing-masing berupa offset horizontal, offset vertikal, radius blur, dan warna; bayangan pertama pada daftar digambar paling atas [2]. Resepnya ada tiga. Kicker berukuran 11 piksel memakai satu bayangan 0 1px 6px. Judul yang tampil 24 sampai 36 piksel memakai dua bayangan sekaligus: 0 2px 14px sebagai halo lebar dan 0 1px 3px sebagai tepi tajam. Subtitle memakai 0 1px 8px di tengah-tengah.

Pembagian ini mengikuti dua taraf kontras pada WCAG 1.4.3: teks normal dituntut rasio kontras minimal 4,5:1, sedangkan teks besar cukup 3:1 [1]. Judul besar termasuk kategori kedua karena bentuk hurufnya tebal dan luas, sehingga halo lebar sudah memadai. Kicker 11 piksel tidak. Huruf kecil menuntut rasio penuh, dan itulah alasan ia mendapat bayangan sendiri meskipun berdiri di atas scrim yang sama dengan judul.

Satu catatan interaksi: setiap lapis overlay memakai pointer-events: none [3]. Dokumentasi MDN mencatat pengecualian kecil, yaitu peristiwa pointerenter dan pointerleave tetap terpicu pada elemen induk. Untuk slider, perilaku itu justru memadai; yang dicegah hanyalah lapisan-lapisan ini menelan klik yang ditujukan ke tombol ajakan di slide.

Grade akhir dinilai visual pada beberapa jenis foto: langit terang, bangunan bernuansa gelap, dan kerumunan. Yang dibawa pulang bukan angka ajaib, melainkan pembagian kerja. Dim menyetel pencahayaan dasar, scrim menjaga zona teks, glow menghaluskan transisi, dan bayangan teks menutup sisa celah. Setiap lapis punya alasan kontras yang bisa dijelaskan, bukan sekadar selera.

Sumber

• [1] W3C — Understanding SC 1.4.3: Contrast (Minimum)
• [2] MDN — text-shadow CSS property
• [3] MDN — pointer-events CSS property
• [4] MDN — radial-gradient() CSS function