Haben Sie jemals einen leichten Text auf einer Website begegnet, die auf einem leichten Hintergrundbild überlagert ist? Wenn Sie darauf gesto?en sind, werden Sie wissen, wie schwierig es zu lesen ist. Eine h?ufige M?glichkeit, dies zu vermeiden, besteht darin, eine transparente Overlay zu verwenden. Aber dies wirft eine wichtige Frage auf: Wie hoch sollte die Transparenz des Overlays sein? Wir besch?ftigen uns nicht immer mit der gleichen Schriftgr??e, Dicke und Farbe, und natürlich erzeugen verschiedene Bilder auch einen anderen Kontrast.

Versuchen Sie, das Problem des schlechten Textkontrasts im Hintergrundbild zu beseitigen, genau wie das Spiel des Goblin -Spiels. Verwenden Sie eher HTML<canvas></canvas> Und einige mathematische Methoden zur L?sung dieses Problems.

So was:

Wir k?nnen sagen "Das Problem ist gel?st!" und dann diesen Artikel beenden. Aber was macht der Spa? davon? Was ich Ihnen zeigen m?chte, ist, wie dieses Tool funktioniert, damit Sie eine neue Art und Weise beherrschen k?nnen, um mit diesem gemeinsamen Problem umzugehen.

planen

Lassen Sie uns zun?chst unsere Ziele kl?ren. Wir sagten, dass wir lesbarer Text auf dem Hintergrundbild anzeigen m?chten, aber was genau bedeutet "lesbar"? Für unsere Zwecke werden wir die Definition von WCAG für die Lesbarkeit von AA-Ebenen verwenden, die besagt, dass ein ausreichender Kontrast zwischen Text- und Hintergrundfarben erforderlich ist, damit eine Farbe 4,5-mal heller ist als die andere.

W?hlen wir eine Textfarbe, ein Hintergrundbild und eine Overlay -Farbe als Ausgangspunkt. Angesichts dieser Eingaben m?chten wir eine Overlay -Deckkraft -Ebene finden, die den Text lesbar macht, ohne das Bild so sehr zu verbergen, dass das Bild schwer zu erkennen ist. Um die Dinge ein wenig zu komplizieren, werden wir ein Bild mit dunklen und hellen Farben verwenden und sicherstellen, dass das Overlay dies berücksichtigt.

Unser Endergebnis ist ein Wert, den wir auf die CSS -Opazit?tseigenschaft des Overlays anwenden k?nnen, wodurch der Text 4,5 -mal heller ist als der Hintergrund.

Um die beste Opazit?t zu finden, werden wir vier Schritte ausführen:

1. Wir geben das Bild in HTML<canvas></canvas> Auf diese Weise k?nnen wir die Farbe jedes Pixels im Bild lesen.
2. Wir werden die Pixel im Bild finden, die den geringsten Kontrast zum Text haben.
3. Als n?chstes werden wir eine Farbmischformel vorbereiten, mit der wir den Effekt verschiedener Deckkraftwerte auf die Farbe dieses Pixels testen k?nnen.
4. Schlie?lich werden wir die Deckkraft des Overlays anpassen, bis der Textkontrast das Lesbarkeitsziel erreicht. Dies wird nicht zuf?llig erraten - wir werden bin?re Suchtechniken verwenden, um diesen Prozess zu beschleunigen.

Fangen wir an!

Schritt 1: Lesen Sie die Bildfarbe aus der Leinwand

Mit Canvas k?nnen wir die im Bild enthaltenen Farben "lesen". Dazu müssen wir das Bild "zeichnen"<canvas></canvas> Verwenden Sie im Element getImageData() des Canvas -Kontextes (CTX), um eine Liste von Bildfarben zu erstellen.

 Funktion getImagePixelColorSuSuSuSuScanvas (Bild, Canvas) {
  // Der Kontext von Leinwand (normalerweise als CTX abgekürzt) ist ein Objekt, das viele Funktionen enth?lt, um Ihre Leinwand zu steuern
  const ctx = canvas.getContext ('2d');

  // Die Breite kann ein beliebiger Wert sein, daher habe ich 500 gew?hlt, weil sie gro? genug ist, um Details zu erfassen, aber klein genug, um die Berechnung schneller zu gestalten.
  canvas.width = 500;

  // Stellen Sie sicher, dass Canvas mit der Skala unserer Image canvas.height = (image.Height / image.width) * canvas.width übereinstimmt;

  // Erhalten Sie die Messungen des Bildes und der Leinwand, damit wir sie im n?chsten Schritt const SourceImageCoordinaten = [0, 0, Bild.Wirdth, Bild.Height] verwenden k?nnen;
  const destinationcanvascoordinaten = [0, 0, canvas.width, canvas.height];

  // Canvas 'DrawImage () funktioniert, indem wir die Messungen unseres Bildes auf die Leinwand abbilden, die wir auf ctx.drawimage zeichnen m?chten (
    Bild,
    ... SourceImagecoordinaten,
    ... DestinationCanvascoordinaten
  );

  // Denken Sie daran, dass GetImagedata nur mit Bildern mit derselben Quelle oder dem gleichen Cross-Origin-aktivierten funktioniert.
  // https://developer.mozilla.org/en-us/docs/web/html/cors_enabled_image
  const imagepixelcolors = ctx.getimagedata (... destinationcanvascoordinaten);
  Return ImagePixelColors;
}

getImageData() -Methode bietet uns eine Liste von Zahlen, die die Farbe jedes Pixels darstellen. Jedes Pixel wird durch vier Zahlen dargestellt: Rot, Grün, Blau und Opazit?t (auch als "Alpha" bekannt. Wenn wir dies wissen, k?nnen wir die Pixelliste durchführen und alle Informationen finden, die wir ben?tigen. Dies ist im n?chsten Schritt sehr nützlich.

Schritt 2: Finden Sie das Pixel mit dem geringsten Kontrast

Vorher müssen wir wissen, wie man den Kontrast berechnet. Wir werden eine Funktion namens getContrast() schreiben, die zwei Farben nimmt und eine Zahl ausgibt, die den Kontrastniveau zwischen den beiden Farben angibt. Je h?her die Zahlen, desto besser der Kontrast und desto besser die Lesbarkeit.

Als ich anfing, die Farben dieses Projekts zu erforschen, erwartete ich, eine einfache Formel zu finden. Es stellte sich heraus, dass es mehrere Schritte gab.

Um den Kontrast zwischen zwei Farben zu berechnen, müssen wir ihr Helligkeitsniveau kennen, was im Wesentlichen Helligkeit ist (Stacie Arellano hat einen detaillierten Blick auf die Helligkeit, die einen Blick wert ist).

Dank W3C kennen wir die Formel zur Berechnung des Kontrasts mithilfe der Helligkeit:

 const kontrast = (leichtercolorluminance 0,05) / (darkercolorluminance 0,05);

Wenn Sie die Helligkeit der Farbe erhalten, müssen wir die Farbe aus dem regul?ren 8-Bit-RGB-Wert konvertieren, der im Netzwerk verwendet wird (wobei jede Farbe 0-255 ist) in das sogenannte lineare RGB. Wir müssen dies tun, weil die Helligkeit mit der Farb?nderung nicht gleichm??ig zunimmt. Wir müssen die Farbe in ein Format umwandeln, in dem sich die Helligkeit gleichm??ig mit der Farbe ?ndert. Dies erm?glicht es uns, die Helligkeit richtig zu berechnen. Ebenso bietet W3C hier Hilfe:

 const luminance = (0,2126 * getlineearrgb (r) 0,7152 * getlinearrgb (g) 0,0722 * getlinearrgb (b));

Aber warte, es gibt noch mehr! Um 8-Bit-RGB (0 bis 255) in lineare RGB umzuwandeln, müssen wir das sogenannte Standard-RGB (auch als SRGB bekannt) durchlaufen, das ein Verh?ltnis von 0 zu 1 aufweist.

Daher ist der Prozess wie folgt:

 <code>8位RGB → 標準RGB → 線性RGB → 亮度</code>

Sobald wir die Helligkeit der beiden Farben haben, die wir vergleichen m?chten, k?nnen wir die Helligkeitswerte in die Formel ersetzen, um den Kontrast zwischen ihren jeweiligen Farben zu erhalten.

 // GetContrast ist die einzige Funktion, die wir direkt interagieren müssen.
// Die restlichen Funktionen sind Zwischenhilfsschritte.
Funktion getContrast (color1, color2) {
  const color1_luminance = getLuminance (color1);
  const color2_luminance = getLuminance (color2);
  const latterColorluminance = math.max (color1_luminance, color2_luminance);
  const darkercolorluminance = math.min (color1_luminance, color2_luminance);
  const kontrast = (leichtercolorluminance 0,05) / (darkercolorluminance 0,05);
  Returnkontrast;
}

Funktion getluminance ({r, g, b}) {
  Rückgabe (0,2126 * getlineEarRGB (R) 0,7152 * getlineearrgb (g) 0,0722 * getlinearrgb (b));
}
function getlineearrgb (prim?rcolor_8bit) {
  // Konvertieren Sie zuerst von 8-Bit RGB (0-255) in Standard-RGB (0-1).
  const prim?rcolor_srgb = convert_8bit_rgb_to_standard_rgb (prim?rcolor_8bit);

  // dann von SRGB in lineares RGB konvertieren, damit wir die Helligkeit konstant prim?rcolor_rgb_linear = convert_standard_rgb_to_Linear_rgb (prim?rcolor_srgb) berechnen k?nnen;
  return primaryColor_rgb_linear;
}
Funktion convert_8bit_rgb_to_standard_rgb (prim?rcolor_8bit) {
  return primaryColor_8bit / 255;
}
Funktion convert_standard_rgb_to_linear_rgb (prim?rcolor_srgb) {
  const primaryColor_Linear = prim?rcolor_srgb <p> Nachdem wir den Kontrast berechnen k?nnen, müssen wir das Bild im vorherigen Schritt betrachten und durch jedes Pixel iterieren, um den Kontrast zwischen der Farbe dieses Pixels und der Farbe des Vordergrundtextes zu vergleichen. Wenn wir die Pixel des Bildes durchqueren, verfolgen wir den bisher am schlimmsten (niedrigsten) Kontrast, und wenn wir das Ende der Schleife erreichen, werden wir die Farbe mit dem schlimmsten Kontrast im Bild kennen.</p><pre class="brush:php;toolbar:false"> Funktion getWorstContrastcolorinimage (TextColor, ImagePixelColors) {
  Lassen Sie die schlimmste Contrastcolorinimage;
  lass schlimmstcontrast = unendlich; // Dies stellt sicher, dass wir nicht mit einem Wert beginnen, der zu niedrig ist (lass i = 0; i <imagepixelcolors.data.length i="4)" const r="imagepixelcolors.data" g="imagePixelcolors.data" b="imagepixelcolors.data" imagepixelcolor="{r," kontrast="getContrast" if worstcontrast="Kontrast;" worstcontrastcolorinimage="ImagePixelColor;" return><p></p>
<h3> Schritt 3: Bereiten Sie die Farbmischformel vor, um die Opplay -Depazit?tsebene zu testen</h3>
<p></p>
<p> Nachdem wir die Farbe mit dem schlimmsten Kontrast in unserem Bild kennen, besteht der n?chste Schritt darin, zu bestimmen, wie hoch die Transparenz des Overlays sein sollte, und zu sehen, wie dies den Kontrast zum Text ver?ndert.</p>
<p></p>
<p> Als ich dies zum ersten Mal implementierte, habe ich eine separate Leinwand verwendet, um Farben zu mischen und die Ergebnisse zu lesen. Dank des Artikels von Ana Tudor über Transparenz wei? ich jetzt, dass es eine bequeme Formel gibt, um die resultierende Farbe nach dem Mischen der Grundfarbe mit der transparenten Overlay zu berechnen.</p>
<p></p>
<p> Für jeden Farbkanal (rot, grün und blau) werden wir diese Formel anwenden, um die gemischten Farben zu erhalten:</p>
<p> Gemischte Farbe = Grundfarbe (überlappende Farbe - Grundfarbe) * überlappende Opazit?t</p>
<p></p>
<p> Im Code sieht dies also so aus:</p>
<pre class="brush:php;toolbar:false"> Funktion 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,
  }
  Return MixedColor;
}

Nachdem wir Farben mischen k?nnen, k?nnen wir den Kontrast testen, wenn wir Overy Depacity -Werte anwenden.

 Funktion getTextContrastwithImagePluSoverlay ({textColor, OverlayColor, ImagePixelColor, Overlayopacity}) {
  const colorofimagepixelPluloverlay = MixColors (ImagePixelColor, OverlayColor, Overlayopacity);
  const kontrast = getContrast (textColor, ColorofimagePixelPluloverlay);
  Returnkontrast;
}

Damit haben wir alle Werkzeuge, die wir ben?tigen, um die beste Opazit?t zu finden!

Schritt 4: Finden Sie die Overlay -Deckkraft, die das Kontrastziel erreicht

Wir k?nnen die Opazit?t des Overlays testen und sehen, wie sich dies auf den Kontrast zwischen Text und Bild auswirkt. Wir werden viele verschiedene Opazit?tstufen ausprobieren, bis wir einen Wert finden, der den Zielkontrast erreicht, bei dem der Text 4,5 -mal heller als der Hintergrund ist. Das mag verrückt klingen, aber mach dir keine Sorgen; Wir werden nicht zuf?llig erraten. Wir werden eine bin?re Suche verwenden, einen Prozess, mit dem wir m?gliche Antworten schnell eingrenzen k?nnen, bis wir genaue Ergebnisse erzielen.

So funktioniert die bin?re Suche:

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

Jetzt k?nnen wir eine bin?re Suche verwenden, um die beste Opazit?t zu finden:

 Funktion findoptimaloverlayopacity (TextColor, OverlayColor, WorstContrastcolorinimage, WantedContrast) {
  // Wenn der Kontrast gut genug ist, müssen wir nicht überlagern,
  // damit wir den Rest überspringen k?nnen.
  const isoverlaynegesory = isoverlayn -eventary (textColor, WorstContrastcolorinimage, WantedContrast);
  if (! isoverlayn -degetary) {
    Rückkehr 0;
  }

  const opacityGuessRange = {
    untergebunden: 0,,
    Mittelpunkt: 0,5,
    Oberfl?che: 1,,
  };
  lass numnofGuses = 0;
  const maxGuses = 8;

  // Wenn es keine L?sung gibt, liegt die Sch?tzung der Deckkraft nahe bei 1,
  // Damit wir es als Obergrenze verwenden k?nnen, um die Situation ohne L?sungen zu überprüfen.
  const opacitylimit = 0,99;

  // Diese Schleife verengt unsere Vermutung wiederholt, bis wir das Ergebnis erhalten, w?hrend (Numberguesses <maxguesses numberofguesses const currentguess="opacityGuessRange.midpoint;" consttron="getTextContrastwithImagePluSoverlay" overlaycolor imagepixelcolor: worstcontrastcolorinimage overlayopacity: isguesstoolow="contrast" contrast isguesstoohigh="Kontrast"> gewünschter Anbieter;

    if (isguessToolow) {
      opacityGuessRange.lowerBound = currentGuess;
    }
    sonst wenn (isguessTooHigh) {
      opacityGuessRange.upperbound = currentGuess;
    }

    const newmidpoint = ((opacityGuessRange.upperbound - opacityGuessRange.lowerbound) / 2) OPACKACITGUESSRANGE.LOWERBOUND;
    opacityGuessRange.midpoint = newmidpoint;
  }

  const optimalopacity = opacityGuessRange.midpoint;
  const hasNoSolution = optimalopacity> opacitylimit;

  if (hasnoSolution) {
    console.log ('keine L?sung'); // Umgang mit unl?sbaren Situationen nach Bedarf nach Bedarf der Opacitylimit zurück;
  }
  Optimalopazit?t zurückgeben;
}</maxguesses>

Sobald das Experiment abgeschlossen ist, wissen wir jetzt genau, wie transparent das Overlay ben?tigt, um den Text lesbar zu machen, ohne zu viele Hintergrundbilder zu verbergen.

Wir haben es gemacht!

Verbesserungen und Einschr?nkungen

Die Methode, die wir einführen, ist nur dann effektiv, wenn die Textfarbe und die Overlay -Farbe selbst einen ausreichenden Kontrast haben. Wenn Sie beispielsweise dieselbe Textfarbe wie das Overlay w?hlen, gibt es keine optimale L?sung, es sei denn, das Bild ben?tigt überhaupt kein Overlay.

Auch wenn Kontrast mathematisch akzeptabel ist, garantiert dies nicht immer, dass es gro?artig aussieht. Dies gilt insbesondere für dunklen Text mit Lichtüberlagerungen und gesch?ftigen Hintergrundbildern. Teile des Bildes k?nnen vom Text ablenken und k?nnen schwierig zu lesen sein, selbst wenn der Kontrast numerisch gut ist. Deshalb ist der beliebte Rat, hellen Text auf dunklen Hintergründen zu verwenden.

Wir haben auch die Pixelposition oder die Anzahl der Pixel pro Farbe nicht in Betracht gezogen. Ein Nachteil davon ist, dass die Pixel in den Ecken einen überm??igen Einfluss auf die Ergebnisse haben k?nnen. Der Vorteil ist jedoch, dass wir uns keine Sorgen machen müssen, wie die Farben des Bildes verteilt sind oder wo der Text sich befindet, denn solange wir mit dem geringsten Kontrast mit Orten umgehen, k?nnen wir überall sicher sein.

Ich habe etwas auf dem Weg gelernt

Nach diesem Experiment habe ich etwas gewonnen und m?chte es mit Ihnen teilen:

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

Das obige ist der detaillierte Inhalt vonNageln Sie den perfekten Kontrast zwischen leichten Text und einem Hintergrundbild. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!