Pernahkah anda menemui teks ringan di laman web yang ditumpukan pada imej latar belakang cahaya? Jika anda telah menemuinya, anda akan tahu betapa sukarnya membaca. Salah satu cara yang biasa untuk mengelakkan ini ialah menggunakan lapisan telus. Tetapi ini menimbulkan persoalan penting: berapa tinggi ketelusan overlay? Kami tidak selalu berurusan dengan saiz fon, ketebalan, dan warna yang sama, dan tentu saja, gambar yang berbeza juga akan menghasilkan kontras yang berbeza.

Cuba untuk menghapuskan masalah kontras teks yang lemah pada imej latar belakang, sama seperti bermain permainan goblin. Daripada meneka, gunakan HTML<canvas></canvas> Dan beberapa kaedah matematik untuk menyelesaikan masalah ini.

Seperti ini:

Kita boleh mengatakan "Masalahnya diselesaikan!" Dan kemudian tamatkan artikel ini. Tetapi apa keseronokan ini? Apa yang saya ingin tunjukkan adalah bagaimana alat ini berfungsi supaya anda dapat menguasai cara baru untuk menangani masalah biasa ini.

merancang

Pertama, mari kita jelaskan matlamat kita. Kami berkata bahawa kami mahu memaparkan teks yang boleh dibaca pada imej latar belakang, tetapi apa sebenarnya maksud "boleh dibaca"? Untuk tujuan kami, kami akan menggunakan definisi WCAG mengenai kebolehbacaan peringkat AA, yang menyatakan bahawa terdapat keperluan untuk perbezaan yang mencukupi antara teks dan warna latar belakang supaya satu warna adalah 4.5 kali lebih cerah daripada yang lain.

Mari kita pilih warna teks, imej latar belakang, dan warna overlay sebagai titik permulaan. Memandangkan input ini, kami ingin mencari tahap kelegapan lapisan yang menjadikan teks boleh dibaca tanpa menyembunyikan imej sehingga imej itu sukar dilihat. Untuk merumitkan perkara sedikit, kami akan menggunakan gambar yang mempunyai warna gelap dan cahaya, dan pastikan overlay mengambilnya.

Hasil akhir kami akan menjadi nilai yang kami boleh memohon kepada sifat Opacity CSS Overlay, yang menjadikan teks 4.5 kali lebih cerah daripada latar belakang.

Untuk mencari kelegapan overlay terbaik, kami akan melakukan empat langkah:

1. Kami memasukkan imej ke HTML<canvas></canvas> Ini akan membolehkan kita membaca warna setiap piksel dalam gambar.
2. Kami akan menemui piksel dalam gambar yang paling tidak berbeza dengan teks.
3. Seterusnya, kami akan menyediakan formula pencampuran warna yang boleh kita gunakan untuk menguji kesan tahap kelegapan yang berbeza pada warna piksel itu.
4. Akhirnya, kami akan menyesuaikan kelegapan lapisan sehingga kontras teks mencapai matlamat pembacaan. Ini tidak akan meneka secara rawak - kami akan menggunakan teknik carian binari untuk mempercepatkan proses ini.

Mari mulakan!

Langkah 1: Baca warna gambar dari kanvas

Kanvas membolehkan kita "membaca" warna yang terkandung dalam imej. Untuk melakukan ini, kita perlu "melukis" imej ke<canvas></canvas> Pada elemen, kemudian gunakan kaedah getImageData() konteks kanvas (CTX) untuk menghasilkan senarai warna imej.

 fungsi getImagePixelColorSusingCanvas (imej, kanvas) {
  // Konteks kanvas (biasanya disingkat sebagai ctx) adalah objek yang mengandungi banyak fungsi untuk mengawal kanvas anda
  const ctx = canvas.getContext ('2d');

  // Lebar boleh menjadi apa -apa nilai, jadi saya memilih 500 kerana ia cukup besar untuk menangkap butiran, tetapi cukup kecil untuk membuat pengiraan lebih cepat.
  canvas.width = 500;

  // pastikan kanvas sepadan dengan skala imej kanvas.height = (image.height / image.width) * canvas.width;

  // Dapatkan pengukuran imej dan kanvas supaya kita dapat menggunakannya dalam langkah seterusnya ConstoureMageCoordinates = [0, 0, image.width, image.height];
  const destinationCanvascoordinates = [0, 0, canvas.width, canvas.height];

  // lukisan kanvas 'berfungsi dengan memetakan pengukuran imej kami ke kanvas yang kami ingin lukiskannya di ctx.drawimage (
    gambar,
    ... sourceimagecoordinates,
    ... destinasiCanvascoordinates
  );

  // Ingatlah bahawa getimageData hanya berfungsi dengan imej dengan sumber yang sama atau silang asal yang diaktifkan.
  // https://developer.mozilla.org/en-us/docs/web/html/cors_enabled_image
  const ImagePixelColors = ctx.getimagedata (... destinasiCanvasCoordinates);
  kembali imagePixelColors;
}

Kaedah getImageData() memberikan kami senarai nombor yang mewakili warna setiap piksel. Setiap piksel diwakili oleh empat nombor: merah, hijau, biru, dan kelegapan (juga dikenali sebagai "alpha". Mengetahui ini, kita boleh melangkah melalui senarai piksel dan mencari apa -apa maklumat yang kita perlukan. Ini akan sangat berguna dalam langkah seterusnya.

Langkah 2: Cari piksel dengan sebaliknya

Sebelum itu, kita perlu tahu cara mengira kontras. Kami akan menulis fungsi yang dipanggil getContrast() yang mengambil dua warna dan output nombor yang menunjukkan tahap perbezaan antara kedua -dua warna. Semakin tinggi angka -angka, semakin baik kontras dan lebih baik pembacaan.

Apabila saya mula meneliti warna projek ini, saya menjangka dapat mencari formula yang mudah. Ternyata terdapat beberapa langkah.

Untuk mengira perbezaan antara dua warna, kita perlu mengetahui tahap kecerahan mereka, yang pada dasarnya kecerahan (Stacie Arellano mempunyai pandangan yang mendalam pada kecerahan, yang patut dilihat).

Terima kasih kepada W3C, kami tahu formula untuk mengira kontras menggunakan kecerahan:

 const kontras = (LighterColorluminance 0.05) / (DarkerColorluminance 0.05);

Mendapatkan kecerahan warna bermakna kita perlu menukar warna dari nilai RGB 8-bit biasa yang digunakan pada rangkaian (di mana setiap warna adalah 0-255) kepada apa yang disebut RGB linear. Kita perlu melakukan ini kerana kecerahan tidak meningkat sama rata dengan perubahan warna. Kita perlu menukar warna ke format di mana kecerahan berubah sama rata dengan warna. Ini membolehkan kita mengira kecerahan dengan betul. Begitu juga, W3C memberikan bantuan di sini:

 const luminance = (0.2126 * getLinearrgb (r) 0.7152 * getLinearrgb (g) 0.0722 * getLinearrgb (b));

Tetapi tunggu, ada lagi! Untuk menukar 8-bit RGB (0 hingga 255) kepada RGB linear, kita perlu melalui apa yang dipanggil standard RGB (juga dikenali sebagai SRGB), yang mempunyai nisbah 0 hingga 1.

Oleh itu, prosesnya adalah seperti berikut:

 <code>8位RGB → 標(biāo)準(zhǔn)RGB → 線性RGB → 亮度</code>

Sebaik sahaja kita mempunyai kecerahan kedua -dua warna yang kita mahu bandingkan, kita dapat menggantikan nilai kecerahan ke dalam formula untuk mendapatkan perbezaan antara warna masing -masing.

 // getContrast adalah satu -satunya fungsi yang kita perlukan untuk berinteraksi secara langsung.
// Selebihnya fungsi adalah langkah tambahan pertengahan.
fungsi getContrast (color1, color2) {
  const color1_luminance = getLuminance (color1);
  const color2_luminance = getLuminance (color2);
  const LighterColorLuminance = Math.Max ??(color1_luminance, color2_luminance);
  consterColorLuminance = Math.min (color1_luminance, color2_luminance);
  const kontras = (LighterColorluminance 0.05) / (DarkerColorluminance 0.05);
  pulangan kontras;
}

fungsi getLuminance ({r, g, b}) {
  pulangan (0.2126 * getLinearrgb (r) 0.7152 * getLinearrgb (g) 0.0722 * getLinearrgb (b));
}
fungsi getLinearrgb (primaryColor_8bit) {
  // Pertama Tukar dari 8-bit RGB (0-255) ke standard RGB (0-1)
  const primaryColor_srgb = convert_8bit_rgb_to_standard_rgb (primaryColor_8bit);

  // kemudian tukar dari srgb ke linear rgb supaya kita boleh menggunakannya untuk mengira kecerahan const primaryColor_rgb_linear = convert_standard_rgb_to_linear_rgb (primarycolor_srgb);
  kembali primarycolor_rgb_linear;
}
fungsi convert_8bit_rgb_to_standard_rgb (primaryColor_8bit) {
  kembali primarycolor_8bit / 255;
}
fungsi convert_standard_rgb_to_linear_rgb (primaryColor_srgb) {
  const primaryColor_Linear = primaryColor_Srgb <p> Sekarang kita dapat mengira kontras, kita perlu melihat imej pada langkah sebelumnya dan meleleh melalui setiap piksel untuk membandingkan perbezaan antara warna piksel dan warna teks latar depan. Apabila kita melintasi piksel imej, kita akan mengesan kontras yang paling teruk (paling rendah) setakat ini, dan apabila kita sampai ke hujung gelung, kita akan mengetahui warna dengan kontras yang paling teruk dalam imej.</p><pre class="brush:php;toolbar:false"> fungsi getWorstContrastColoriniMage (TextColor, ImagePixelColors) {
  Biarkan WorstContrastColoriniMage;
  Biarkan WorstContrast = Infinity; // Ini memastikan bahawa kita tidak bermula dengan nilai yang terlalu rendah untuk (biarkan i = 0; i <imagepixelcolors.data.length i="4)" const r="ImagePixelColors.data" g="ImagePixelColors.data" b="ImagePixelColors.data" imagepixelcolor="{r," kontras="getContrast" jika worstcontrast="kontras;" worstcontrastcolorinimage="ImagePixelColor;" kembali><p></p>
<h3> Langkah 3: Sediakan formula pencampuran warna untuk menguji tahap kelegapan overlay</h3>
<p></p>
<p> Sekarang kita tahu warna dengan kontras yang paling teruk dalam imej kita, langkah seterusnya adalah untuk menentukan betapa tinggi ketelusan overlay harus dan melihat bagaimana ini akan mengubah kontras dengan teks.</p>
<p></p>
<p> Apabila saya mula -mula melaksanakan ini, saya menggunakan kanvas berasingan untuk mencampur warna dan membaca hasilnya. Walau bagaimanapun, terima kasih kepada artikel Ana Tudor mengenai ketelusan, saya kini tahu terdapat formula yang mudah untuk mengira warna yang dihasilkan selepas mencampurkan warna asas dengan lapisan telus.</p>
<p></p>
<p> Untuk setiap saluran warna (merah, hijau, dan biru), kami akan menggunakan formula ini untuk mendapatkan warna yang dicampur:</p>
<p> Warna campuran = warna asas (warna bertindih - warna asas) * kelegapan bertindih</p>
<p></p>
<p> Jadi, dalam kod, ini akan kelihatan seperti ini:</p>
<pre class="brush:php;toolbar:false"> fungsi mixcolors (basecolor, overlaycolor, overlayopacity) {
  const mixedColor = {
    r: basecolor.r (overlaycolor.r - basecolor.r) * overlayopacity,
    g: basecolor.g (overlaycolor.g - basecolor.g) * overlayopacity,
    b: basecolor.b (overlaycolor.b - basecolor.b) * overlayopacity,
  }
  kembali campuran campuran;
}

Sekarang kita boleh mencampur warna, kita boleh menguji kontras apabila menggunakan nilai kelegapan overlay.

 fungsi getTextContrastWithimagePlusOverlay ({TextColor, overlayColor, ImagePixelColor, overlayopacity}) {
  const ColorOfImagePixelPlusOverlay = mixColors (ImagePixelColor, overlayColor, overlayopacity);
  const kontras = getContrast (textColor, colorOfImagePixelPlusOverlay);
  pulangan kontras;
}

Dengan ini kita mempunyai semua alat yang kita perlukan untuk mencari kelegapan overlay terbaik!

Langkah 4: Cari kelegapan Overlay yang mencapai sasaran kontras

Kita boleh menguji kelegapan overlay dan melihat bagaimana ini akan mempengaruhi perbezaan antara teks dan imej. Kami akan mencuba pelbagai tahap kelegapan yang berbeza sehingga kami dapati nilai yang mencapai kontras sasaran, di mana teksnya adalah 4.5 kali lebih cerah daripada latar belakang. Ini mungkin terdengar gila, tetapi jangan risau; Kami tidak akan meneka secara rawak. Kami akan menggunakan carian binari, satu proses yang membolehkan kami dengan cepat menyempitkan set jawapan yang mungkin sehingga kami mendapat hasil yang tepat.

Inilah cara kerja carian binari:

 <code>- 在中間猜測。 - 如果猜測過高，我們將消除答案的上半部分。太低了嗎？我們將改為消除下半部分。 - 在新的范圍中間猜測。 - 重復(fù)此過程，直到我們得到一個值。我碰巧有一個工具可以展示它是如何工作的：在這種情況下，我們試圖猜測一個介于0和1之間的不透明度值。因此，我們將從中間猜測，測試結(jié)果對比度是太高還是太低，消除一半的選項，然后再次猜測。如果我們將二分查找限制為八次猜測，我們將立即得到一個精確的答案。在我們開始搜索之前，我們需要一種方法來檢查是否根本需要疊加層。我們根本不需要優(yōu)化我們不需要的疊加層！ ```javascript function isOverlayNecessary(textColor, worstContrastColorInImage, desiredContrast) { const contrastWithoutOverlay = getContrast(textColor, worstContrastColorInImage); return contrastWithoutOverlay </code>

Sekarang kita boleh menggunakan carian binari untuk mencari kelegapan overlay yang terbaik:

 fungsi findOptimaloverlayOpacity (TextColor, overlayColor, WorstContrastColoriniMage, DesiredContrast) {
  // Sekiranya kontras cukup baik, kita tidak perlu melayari,
  // Jadi kita boleh melangkau selebihnya.
  const isOverlayNessary = isOverlayNessary (TextColor, WorstContrastColoriniMage, DesiredContrast);
  jika (! isoverlaynessary) {
    kembali 0;
  }

  const opacityguessrange = {
    Lowerbound: 0,
    Titik tengah: 0.5,
    Upperbound: 1,
  };
  Biarkan NumberOfGuesses = 0;
  const maxGuesses = 8;

  // Sekiranya tidak ada penyelesaian, tekaan kelegapan akan hampir 1,
  // Jadi kita boleh menggunakannya sebagai had atas untuk memeriksa keadaan tanpa penyelesaian.
  const opacityLimit = 0.99;

  // Gelung ini berulang kali menyempitkan tekaan kami sehingga kami mendapat hasilnya sementara (NumberOfGuesses <maxguesses numberofguesses const currentguess="opacityGuessRange.MidPoint;" kontras="getTextContrastWithimagePlusOverlay" overlaycolor imagepixelcolor: worldcontrastcolorinimage overlayopacity: isguesstoolow="Contress" isguesstoohigh="Contress"> DesiredContrast;

    jika (isGuessToolow) {
      opacityguessrange.lowerbound = currentGuess;
    }
    lain jika (isguesstoohigh) {
      opacityGuessRange.upperBound = currentGuess;
    }

    const newMidPoint = ((opacityguessrange.upperbound - opacityguessrange.lowerbound) / 2) opacityguessrange.lowerbound;
    opacityGuessRange.midpoint = newMidPoint;
  }

  const optimalOpacity = opacityguessrange.midpoint;
  const hasnosolution = optimalOpacity> opacityLimit;

  jika (hasnosolution) {
    console.log ('tiada penyelesaian'); // Mengendalikan situasi yang tidak dapat diselesaikan seperti yang diperlukan oleh OpacityLimit;
  }
  kembali optimum;
}</maxguesses>

Sebaik sahaja percubaan selesai, kita sekarang tahu dengan tepat bagaimana telus yang perlu dibuat untuk membuat teks boleh dibaca tanpa menyembunyikan terlalu banyak imej latar belakang.

Kami melakukannya!

Penambahbaikan dan batasan

Kaedah yang kami perkenalkan hanya berkesan jika warna teks dan warna overlay sendiri mempunyai kontras yang mencukupi. Sebagai contoh, jika anda memilih warna teks yang sama seperti lapisan, tidak akan ada penyelesaian yang optimum kecuali imej tidak memerlukan lapisan sama sekali.

Juga, walaupun kontras boleh diterima secara matematik, ini tidak selalu menjamin ia kelihatan hebat. Ini terutama berlaku untuk teks gelap dengan lapisan cahaya dan imej latar belakang yang sibuk. Bahagian imej mungkin mengalihkan perhatian dari teks, dan mungkin sukar dibaca walaupun kontrasnya baik secara numerik. Itulah sebabnya nasihat popular adalah menggunakan teks cahaya pada latar belakang gelap.

Kami juga tidak menganggap kedudukan piksel atau bilangan piksel setiap warna. Satu kelemahan ini adalah bahawa piksel di sudut boleh mempunyai kesan yang berlebihan terhadap hasilnya. Tetapi manfaatnya ialah kita tidak perlu bimbang tentang bagaimana warna imej diedarkan atau di mana teks itu, kerana selagi kita berurusan dengan tempat -tempat yang paling kurang, kita boleh selamat di tempat lain.

Saya belajar sesuatu di sepanjang jalan

Selepas percubaan ini, saya telah memperoleh sesuatu dan saya ingin berkongsi dengan anda:

 <code>- **明確目標(biāo)非常有幫助！**我們從一個模糊的目標(biāo)開始，即想要在圖像上顯示可讀的文本，最終得到了一個我們可以努力達(dá)到的特定對比度級別。 - **明確術(shù)語非常重要。**例如，標(biāo)準(zhǔn)RGB并非我所期望的。我了解到，我認(rèn)為的“常規(guī)”RGB（0到255）正式稱為8位RGB。此外，我認(rèn)為我研究的方程式中的“L”表示“亮度”，但它實際上表示“亮度”，這不能與“光度”混淆。澄清術(shù)語有助于我們編寫代碼以及討論最終結(jié)果。 - **復(fù)雜并不意味著無法解決。**聽起來很困難的問題可以分解成更小、更容易管理的部分。 - **當(dāng)你走過這條路時，你會發(fā)現(xiàn)捷徑。**對于白色文本在黑色透明疊加層上的常見情況，您永遠(yuǎn)不需要超過0.54的不透明度即可達(dá)到WCAG AA級可讀性。 ### 總結(jié)…您現(xiàn)在有了一種方法可以在背景圖像上使文本可讀，而不會犧牲過多的圖像。如果您已經(jīng)讀到這里，我希望我已經(jīng)能夠讓您大致了解其工作原理。我最初開始這個項目是因為我看到（并制作了）太多網(wǎng)站橫幅，其中文本在背景圖像上難以閱讀，或者背景圖像被疊加層過度遮擋。我想做些什么，我想給其他人提供一種同樣的方法。我寫這篇文章是為了希望你們能夠更好地理解網(wǎng)絡(luò)上的可讀性。我希望你們也學(xué)習(xí)了一些很酷的canvas技巧。如果您在可讀性或canvas方面做了一些有趣的事情，我很樂意在評論中聽到您的想法！</code>

Atas ialah kandungan terperinci Memaku kontras yang sempurna antara teks cahaya dan imej latar belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!