Bagaimanakah Saya Boleh Melaraskan Warna Teks Secara Dinamik Berdasarkan Kecerahan Latar Belakang?

Melaraskan Warna Teks Berdasarkan Kecerahan Latar Belakang

Mencapai kebolehbacaan optimum selalunya memerlukan pelarasan warna teks untuk kontras dengan latar belakang. Dalam kes ini, kesan yang diingini ialah menukar warna teks atau imej secara dinamik berdasarkan tahap kecerahan piksel latar belakang.

Pendekatan untuk Pelarasan Kontras

• Pengiraan Kecerahan: Kira purata wajaran saluran warna (RGB) untuk menentukan tahap kecerahan.
• Nisbah Kontras: Bandingkan kecerahan teks dan latar belakang untuk memastikan kontras yang mencukupi untuk kebolehcapaian visual.

Sumber Tersedia

• W3C Contrast Pemeriksa: World Wide Web Consortium (W3C) menyediakan algoritma piawai untuk mengira kecerahan warna dan memastikan kontras yang mencukupi.
• Mengira Kecerahan Warna: Teroka sumber dalam talian yang menawarkan berfungsi untuk mengukur kecerahan sesuatu yang diberikan warna.

Algoritma Kontras W3C

const rgb = [255, 0, 0];

function setContrast() {
  // Calculate brightness
  const brightness = Math.round(((parseInt(rgb[0]) * 299) +
                      (parseInt(rgb[1]) * 587) +
                      (parseInt(rgb[2]) * 114)) / 1000);
  // Set text color
  const textColour = (brightness > 125) ? 'black' : 'white';
  // Set background color
  const backgroundColour = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';

  $('#bg').css('color', textColour); 
  $('#bg').css('background-color', backgroundColour);
}

Algoritma ini memastikan pemilihan warna teks yang optimum secara visual berdasarkan kecerahan latar belakang.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaraskan Warna Teks Secara Dinamik Berdasarkan Kecerahan Latar Belakang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!