Nageln Sie den perfekten Kontrast zwischen leichten Text und einem Hintergrundbild

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 id="Schritt-Bereiten-Sie-die-Farbmischformel-vor-um-die-Opplay-Depazitätsebene-zu-testen"> 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>- 在中间猜测。 - 如果猜测过高，我们将消除答案的上半部分。太低了吗？我们将改为消除下半部分。 - 在新的范围中间猜测。 - 重复此过程，直到我们得到一个值。我碰巧有一个工具可以展示它是如何工作的：在这种情况下，我们试图猜测一个介于0和1之间的不透明度值。因此，我们将从中间猜测，测试结果对比度是太高还是太低，消除一半的选项，然后再次猜测。如果我们将二分查找限制为八次猜测，我们将立即得到一个精确的答案。在我们开始搜索之前，我们需要一种方法来检查是否根本需要叠加层。我们根本不需要优化我们不需要的叠加层！ ```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>- **明确目标非常有帮助！**我们从一个模糊的目标开始，即想要在图像上显示可读的文本，最终得到了一个我们可以努力达到的特定对比度级别。 - **明确术语非常重要。**例如，标准RGB并非我所期望的。我了解到，我认为的“常规”RGB（0到255）正式称为8位RGB。此外，我认为我研究的方程式中的“L”表示“亮度”，但它实际上表示“亮度”，这不能与“光度”混淆。澄清术语有助于我们编写代码以及讨论最终结果。 - **复杂并不意味着无法解决。**听起来很困难的问题可以分解成更小、更容易管理的部分。 - **当你走过这条路时，你会发现捷径。**对于白色文本在黑色透明叠加层上的常见情况，您永远不需要超过0.54的不透明度即可达到WCAG AA级可读性。 ### 总结…您现在有了一种方法可以在背景图像上使文本可读，而不会牺牲过多的图像。如果您已经读到这里，我希望我已经能够让您大致了解其工作原理。我最初开始这个项目是因为我看到（并制作了）太多网站横幅，其中文本在背景图像上难以阅读，或者背景图像被叠加层过度遮挡。我想做些什么，我想给其他人提供一种同样的方法。我写这篇文章是为了希望你们能够更好地理解网络上的可读性。我希望你们也学习了一些很酷的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!