Cara browser otomatis memilih warna kontras di CSS

 (webkit.org)
2 poin oleh GN⁺ 2025-05-19 | Belum ada komentar. | Bagikan ke WhatsApp
  • CSS contrast-color() membuat browser memilih warna teks hitam atau putih sesuai warna yang sering berubah, seperti latar tombol, sehingga mengurangi beban mengelola pasangan warna secara terpisah
  • Jika warna acuan diberikan seperti color: contrast-color(var(--button-color));, pilihan yang menghasilkan kontras lebih besar dihitung ulang mengikuti perubahan warna latar
  • Saat ini Safari Technology Preview memakai algoritme kontras WCAG 2, sehingga pada latar #317CFF ia memilih teks hitam, meski menurut persepsi manusia putih bisa terlihat lebih natural
  • Fitur ini tidak otomatis menjamin aksesibilitas; validasi desain seperti palet, ukuran teks, ketebalan font, dan prefers-contrast tetap diperlukan
  • CSS Working Group menyediakan fitur ini dalam lingkup terbatas sebagai pilihan hitam/putih hingga diskusi algoritme kontras WCAG 3 selesai; alat pemilihan warna yang lebih kompleks dapat diperluas kemudian

Beban manajemen warna yang dikurangi oleh contrast-color()

  • Saat membuat tombol dengan berbagai warna latar di situs web atau aplikasi web, teks perlu dibuat putih jika latarnya gelap, dan hitam jika latarnya terang
  • Sebelumnya, --button-color dan --button-text-color harus didefinisikan bersama untuk mengelola pasangan warna, dan dalam proyek besar atau lingkungan dengan banyak tim, menjaga kombinasi tetap akurat secara terus-menerus sulit dilakukan
  • contrast-color() membuat browser memilih warna dengan kontras lebih besar antara hitam atau putih ketika warna acuan diberikan di CSS
color: contrast-color(purple);
  • Pada tombol, variabel warna latar dapat diterapkan bersama contrast-color()
button {
  background-color: var(--button-color);
  color: contrast-color(var(--button-color));
}
  • Dengan cara ini, cukup mendefinisikan satu warna latar, dan warna teks akan ditentukan oleh browser

Menurunkan warna untuk tiap status dari satu variabel

  • Jika dipakai bersama Relative Color Syntax, warna hover dapat dibuat dari warna tombol dasar, dan warna teks untuk tiap status juga dapat dihitung dengan contrast-color()
:root {
  --button-color: purple;
  --hover-color: oklch(from var(--button-color) calc(l + .2) c h);
}
button {
  background-color: var(--button-color);
  color: contrast-color(var(--button-color));
  text-box: cap alphabetic; /* vertically centers the text */
}
button:hover {
  background-color: var(--hover-color);
  color: contrast-color(var(--hover-color));
}

Hasil janggal dari perhitungan berbasis WCAG 2

  • contrast-color() tidak otomatis menyelesaikan semua masalah kontras aksesibilitas
  • Beberapa warna latar mungkin tidak menghasilkan kontras yang cukup dengan hitam maupun putih, sehingga perlu diperiksa oleh desainer, developer, dan tester
  • Per Mei 2025, implementasi Safari Technology Preview memakai algoritme WCAG 2
    • Pada latar biru #317CFF, WCAG 2 menghitung kontras teks hitam sebesar 5.45:1
    • Pada latar yang sama, kontras teks putih dihitung sebesar 3.84:1
    • contrast-color() memilih hitam karena angkanya lebih besar
  • Menurut persepsi manusia, putih bisa terlihat lebih baik pada kombinasi ini, dan algoritme kontras warna WCAG 2 sudah lama dikritik

Diskusi algoritme kontras yang berlanjut di APCA dan WCAG 3

  • Accessible Perceptual Contrast Algorithm(APCA) adalah salah satu kandidat yang dapat dimasukkan ke WCAG 3
  • APCA Contrast Calculator menilai teks hitam pada latar #317CFF sebagai Lc 38.7, dan teks putih sebagai Lc -70.9
    • Dalam skor APCA, angka negatif berarti teks lebih terang daripada latar
    • Besaran kontras dibandingkan sebagai 38.7 dan 70.9 tanpa memperhitungkan tanda
    • Pada hasil ini, kontras teks putih lebih tinggi
  • APCA lebih menekankan kontras berbasis persepsi dibanding rasio matematis sederhana, serta mencerminkan bahwa manusia tidak mempersepsikan kontras secara linear menurut warna dan kecerahan
  • Standar CSS masih mewajibkan penggunaan algoritme yang ada, tetapi menyertakan catatan bahwa algoritme kontras lain dapat ditambahkan di masa depan
  • Algoritme apa yang akan digunakan di WCAG 3 dan bagaimana lisensi algoritme kandidat ditangani masih terus dibahas

Kondisi yang perlu ikut diperiksa dalam desain nyata

  • Memilih warna yang lebih baik dengan contrast-color() berbeda dengan menjamin kontras yang cukup
  • Terutama pada warna bernada menengah, perbedaan hasil antaralgoritme bisa menjadi besar
  • Untuk pengguna yang menginginkan kontras lebih tinggi, kueri media prefers-contrast dapat digunakan bersama
@media (prefers-contrast: more) {
  /* styling with more contrast */
}
  • Dalam contoh, #2DAD4E digunakan sebagai warna latar tombol merek untuk situs web persemaian pohon
    • Menurut APCA, kontras dengan teks putih adalah Lc -60.4
    • Apakah nilai ini cukup bergantung pada ukuran teks dan ketebalan font
    • APCA memakai satu skor dari Lc -108 hingga 106, bukan rasio WCAG 2
  • APCA Readability Criterion memberikan target level Bronze, Silver, dan Gold untuk membantu memilih ukuran dan ketebalan huruf
  • Dalam perhitungan contoh, kombinasi teks putih dan #2DAD4E berfungsi untuk teks 24px dengan font-weight 400 atau lebih tinggi, sementara jika memakai font-weight 300 diperlukan minimal 41px
  • Untuk pengguna yang meminta kontras lebih tinggi, warna terpisah dapat ditentukan untuk mode terang dan mode gelap
    • Mode terang: hijau yang lebih gelap dan teks putih, Lc -76.1
    • Mode gelap: hijau yang lebih terang dan teks hitam, Lc 75.2
--button-color: #2DAD4E; /* brand green background */
@media (prefers-contrast: more) {
  @media (prefers-color-scheme: light) {
    --button-color: #419543; /* darker green background */
  }
  @media (prefers-color-scheme: dark) {
    --button-color: #77CA8B; /* lighter green background */
  }
}
button {
  background-color: var(--button-color);
  color: contrast-color(var(--button-color));
  font-size: 1.5rem; /* 1.5 * 16 = 24px at normal zoom */
  font-weight: 500;
}
  • Di lingkungan saat ini, algoritme WCAG 2 menggerakkan contrast-color(), sehingga mungkin sulit dipakai untuk situs web contoh ini
  • Pada proyek dengan warna merek hijau yang lebih gelap dan pilihan hitam/putih yang keluar dengan benar, fitur ini masih dapat berguna sekarang
  • contrast-color() sangat membantu saat mendefinisikan warna untuk berbagai status atau opsi seperti enabled/disabled, light/dark mode, dan prefers-contrast

Alasan awalnya dibatasi pada pilihan hitam/putih

  • Saat ini contrast-color() jauh lebih disederhanakan dibanding color-contrast() yang pernah ada di Safari Technology Preview 122
  • Di tengah diskusi algoritme kontras WCAG 3 yang belum selesai, CSS Working Group memutuskan untuk terlebih dahulu melanjutkannya sebagai alat yang hanya memilih hitam atau putih yang kontras dengan warna acuan
  • Jika pilihan dikunci ke hitam/putih, kemungkinan situs web rusak ketika algoritme WCAG 2 berubah nanti menjadi lebih kecil
  • Ke depannya, alat yang lebih kuat dapat muncul, seperti browser memilih dari daftar warna kustom atau menentukan tingkat kontras yang diinginkan
  • contrast-color() dapat digunakan bukan hanya untuk warna teks, tetapi juga pada berbagai properti yang menentukan warna, seperti latar dan border

Bacaan terkait

Belum ada komentar.

Belum ada komentar.