Bento Style

[Tommy Herrmann]

... der Grund war auch nicht die Farbe, sondern die Opacity mit

0.035

Diese Deckkraft vom Text habe ich jetzt auf

0.8

gesetzt.

[Volker]

Ich wollte es dezent haben
Aber das ist ja das schöne, man kann alles ändern nach seinen Wünschen

[Tommy Herrmann]

... also ich bin jetzt nur noch am Handy. Auch da sehe ich deinen Text absolut gar nicht, auch am Handy meiner Tochter (iPone), die gerade hier ist, sehen wir beide nichts, wie auch, denn 0.035 ist 3,5% Deckkraft, das ist quasi transparent und diese Deckkraft der Schrift kann man eben nicht in den Werkzeugen einstellen, deswegen schreibe ich das doch nur.

Ich habe das also im Code-Editor händisch auf 0.8, also 80% Deckkraft, geändert.

[Volker]

Ich sehe also auch einen Text der nur 3,5% Deckkraft hat - und das muss ich auch sonst stimmt was nicht
Zwar schwach ( soll ja auch so sein) aber ich SEHE ihn

Das WOLLTE ich so

KI sagt:

wir haben ja bei dem bento block eine branding schrift mit 3,5% Deckkraft, jetzt sagen welche man könnte die nicht sehen ich sehe die weil ich wohl meinen monitor ab und zu kalibriere - aber liegt es nur daran ?

Das ist ein absolut klassisches Phänomen in der Webentwicklung, Volker! Du hast das Problem im Grunde schon goldrichtig erkannt. Dass du den Branding-Schriftzug (mit seinen 3,5% Deckkraft) siehst und andere nicht, liegt nicht nur an deiner Monitorkalibrierung, sondern an einer ganzen Kette von technischen und physiologischen Faktoren.

Hier sind die Hauptgründe, warum die Wahrnehmung da draußen so extrem auseinandergeht:

1. Das Kontrastverhältnis (Der Gamma-Wert)
Monitore interpretieren Graustufen und Helligkeitsverläufe über den sogenannten Gamma-Wert.

Bei dir (kalibriert): Ein kalibrierter Monitor stellt dunkle Nuancen sauber getrennt dar. Er "säuft nicht ab". Dadurch heben sich die 3,5% Lichtdurchlässigkeit des Texts präzise vom tiefschwarzen oder dunkelgrauen Kartenhintergrund ab.

Bei den anderen (Standard/Factory Settings): Die meisten Office-Monitore, günstigen Laptops oder Gaming-Bildschirme sind ab Werk viel zu hell oder extrem kontrastreich eingestellt (oft mit einem "Black Equalizer" oder dynamischem Kontrast). Das führt dazu, dass feine Nuancen im sehr dunklen oder sehr hellen Bereich einfach verschluckt werden. Man nennt das "Black Crushing" – die 3,5% Deckkraft verschmelzen für das Display einfach zu 0% (reinem Schwarz).

2. Panel-Technologie und Blickwinkel
Nicht jeder schaut auf dieselbe Display-Qualität:

IPS- und OLED-Panels: Diese haben hervorragende Schwarzwerte und Kontraste. Wer darauf schaut, hat gute Chancen, den Text (wie du) zu erkennen.

TN- oder billige VA-Panels: Diese Typen (oft in günstigeren Laptops verbaut) verfälschen die Farben und Kontraste massiv, sobald man den Kopf nur ein paar Grad neigt. Sitzt der User nicht exakt im 90
∘
-Winkel vor dem Schirm, wird der Schriftzug unsichtbar.

3. Umgebungslicht (Die Raumhelligkeit)
Wenn du in einem leicht abgedunkelten Raum oder bei moderater Studiobeleuchtung arbeitest, passen sich deine Pupillen an. Das Auge wird empfindlicher für feine Dunkel-Nuancen.

Sitzt jemand im hellen Büro, spiegelt sich das Fenster im Display oder scheint die Sonne auf das Smartphone, hat das Auge absolut keine Chance mehr, einen Kontrast von 3,5% wahrzunehmen.

4. Das menschliche Auge und das Alter
Das Kontrastsehen (Kontrastsensitivität) ist bei jedem Menschen biologisch unterschiedlich ausgeprägt und nimmt vor allem mit fortschreitendem Alter oder bei Sehschärfen-Schwankungen ab. Was für den einen Entwickler ein dezentes, edles Stilmittel ist, ist für den Endverbraucher schlicht "unsichtbar".

Mein Tipp für den Code (Der goldene Mittelweg)
In der Webentwicklung gilt die Faustregel: Design für den schlechtesten Monitor, nicht für deinen besten. 3,5% ist im Webdesign-Standard (Barrierefreiheit / WCAG) für Text schlicht zu wenig.

Damit der edle "Wasserzeichen-Effekt" erhalten bleibt, aber jeder ihn erahnen kann, solltest du die Deckkraft im CSS minimal anheben oder dem User die Kontrolle geben.

Vorschlag 1: Deckkraft leicht anheben
Erhöhe den Wert von opacity: 0.035; auf opacity: 0.07; oder 0.08; (7% bis 8%). Das ist auf kalibrierten Monitoren immer noch extrem dezent und "Branding im Hintergrund", rettet den Effekt aber auf unkalibrierten Office-Bildschirmen.

Vorschlag 2: Über das Zahnrad regelbar machen (Unkaputtbar-Methode)
Da wir ohnehin gerade so schön im Flow sind: Du könntest in die Sektionsparameter einfach einen weiteren Schieberegler einbauen (z. B. Hintergrundtext Deckkraft (%)), genau wie wir es bei den Kachel-Overlays gemacht haben. Dann kannst du auf deiner eigenen Live-Seite die Deckkraft exakt so einstellen, dass deine Foren-Nutzer oder Kunden nicht mehr "Blindflug" bemängeln müssen.

Also bau ich einen regler ein

[Volker]

Die Erweiterung Bento Block wurde nun aktualisiert.

Es gibt einen Schieber für die Deckkraft der Branding Text in Kachel 4.

https://www.niederastroth.de/Bento_Block.html

[Tommy Herrmann]

Moin,

sehr gut — bei dir ist es jetzt hervorragend sichtbar und trotzdem dezent.

Was deine KI dazu schreibt, halte ich für Quatsch. Logisch betrachtet: 3,5 % Deckkraft sind nichts.

Was heißt hier „billiger Laptop“? Meiner war jedenfalls einer der teuersten, die es gab. Auch mein Samsung S24 (wenn auch bereits zwei Jahre alt) und das iPhone 16 gehören eher zur Oberklasse, und mit der Standardkalibrierung war kaum etwas zu sehen. Auch wenn meine Augen wahrscheinlich nicht mehr die besten sind, die meiner Tochter konnten auch nichts sehen.

Ich hatte gestern noch Screenshots an meinem Samsung S24 erstellt. Ich konnte bei Volker kein Branding als Hintergrundschrift erkennen.


Beispiel Seite von Volker - Branding "Niederastroth":

Beispiel Seite von Tommy - Branding "Clown Fish":

Das Argument ist auch völlig inakzeptabel, denn eine Webseite muss selbstverständlich auch auf normalen Bildschirmen gut aussehen und nicht nur auf hochmodernen high end Geräten.

Wer nicht wusste, dass da etwas ist, hätte es nicht bemerkt — zumal dein langer Nachname sowieso am Handy nicht vollständig hineinpasst und nur Teile sichtbar sind, daher habe ich in der CSS (oben) ja auch die Schriftgröße am Handy reduziert.

Merkwürdig ist außerdem, dass die Opazität der neuen Erweiterung weiterhin bei 0.035 eingestellt ist, obwohl das Branding jetzt deutlich sichtbar ist – ein Wert von 0.8 wäre viel zu hoch. Es muss also noch eine andere Ursache gehabt haben. Egal - so wie es nun ist, ist es perfekt.

Da das jetzt einstellbar ist, umso besser. Dieser Effekt ist nämlich sehr gut, vorausgesetzt, man kann ihn auch sehen

Im Gegensatz hier nun die geänderte und aktuelle Version ist auch an meinem Samsung S24 gut sichtbar:

[Volker]

Moin Tommy,

dann ist ja jetzt alles gut.

Aber Du solltest mal deinen Gamma Wert überprüfen, denn ich sehe auch auf deinem Screenshot den Text.
Mach doch einfach mal in WIndows diese Einstellung, das kann ja nicht schaden

Einfach untern in der Suche kalibrieung eingeben dann kommt Bildschrimfarbe kalibrieren
- das kann ja nicht schaden

Du wirst sehen das Du bei den Gamma Werten bei den Kreisen nochmals kleine weiße/schwarze Kreise zu sehen sind. Die dürfen nicht da sein !

[Tommy Herrmann]

Moin,

habe ich gemacht - Gamma war genau richtig.

Deinen Bento-Grid-Layout Block stelle ich nun zusätzlich auch auf meiner Tutorial-Seite für AI-generierte Beispiele vor:

https://www.mobirise-tutorials.com/AI-B ... Style.html