Highlights nach vorn, kraeftige Chatfarben, alle Farben in einer Kachel
screen1 -- HIGHLIGHTS AUF ANSCHLAGBRETTS PLATZ
Kein Tausch, sondern ein Aufruecken: Highlights nimmt die Stelle,
alle anderen wandern eine weiter. Inhaltlich stimmt das auch --
was die Leute selbst gemacht haben, steht vor dem, was ihnen
angesagt wird.
screen2 -- DIE CHATFARBEN SIND GERECHNET, NICHT GEGRIFFEN
Gemessen, was drinstand: Buntheit 0,002 bis 0,048, im Mittel 0,028
-- auf dem Bildschirm zwoelf Grautoene. Das lag nicht an fehlendem
Mut, sondern an der Fusszeile der Blase: Sie stand auf der leisen
Hausschrift, und gegen die darf die Flaeche kaum Farbe haben.
Deshalb ZUERST die Schrift (--blase-text/--blase-leise, eigene
Farben der Blase), DANN die Flaeche. Andersherum waere es der
Fehler vom selben Vormittag gewesen, als 27 von 31 Startkacheln
unlesbar wurden.
tools/chat-kacheln-rechnen.mjs liest beide Schriftfarben aus dem
CSS und rechnet daraus die hellste Flaeche, die sie noch tragen.
Ergebnis: Buntheit 0,072 bis 0,268, alle zwoelf auf DERSELBEN
Leuchtdichte -- also exakt demselben Kontrast (7,02 bis 7,13:1).
Zwei Anlaeufe waren falsch und stehen im Werkzeug begruendet:
- hoechste Buntheit nehmen, dann Kontrast pruefen. Musste
scheitern: gesaettigtes Gelb ist bei gleicher empfundener
Helligkeit viel heller als Blau.
- gleiche OKLab-Helligkeit statt gleicher Leuchtdichte. Das
Versprechen der zwoelf lautet "ueberall gleich gut lesbar",
und Lesbarkeit haengt an der Leuchtdichte, nicht am Eindruck.
WER NICHTS EINSTELLT, BEKOMMT TROTZDEM EINE FARBE. Gemessen an der
Live-Datenbank hatten vier von fuenfzehn eine gewaehlt -- der Chat
war fuer alle anderen einfarbig. Jetzt vergibt der Server einen der
elf bunten Toene aus der Personennummer, stabil. Schrittweite 4:
elf ist prim, also laufen alle Toene durch, und vier Schritte sind
131 Grad im Farbkreis -- aufeinanderfolgende Nummern landen so weit
auseinander wie moeglich. Mit id % 11 sassen zwei Nachbarn im
selben Gespraech magenta und rot nebeneinander.
Niemand verliert seine Wahl: veilchen, ziegel und moos sind die
drei gewaehlten und behalten ihren Farbbereich.
Dazu: Blasen mit 22px runden Kanten (nur die Ecke zur Person bleibt
spitz -- sie sagt, wer spricht), Lichtsaum oben innen, weicher
Schatten. Der Name hell und fett mit Rollenpunkt davor; er stand
auf leisem Grau mit 85 Prozent Deckung und war der schwaechste Text
der Seite, ausgerechnet der, der sagt, wer spricht.
ZWEI REGELBLOECKE FUER DIESELBE BLASE ZUSAMMENGELEGT. Der untere
gewann und hat an einem Tag zweimal Schaden angerichtet: Er stellte
die runden Kanten auf 16px zurueck (die Aenderung waere wirkungslos
ausgeliefert worden), und er mischte 26 Prozent Akzentfarbe in die
eigene Blase -- die hatte damit eine Farbe, die in CHAT_KACHELN
nicht vorkommt und die die Kontrastpruefung nie angesehen hat.
screen3 -- ALLE FARBEN DES HAUSES IN EINER KACHEL
tools/kachel-regenbogen.mjs leitet die 31 benutzten Toene ab
(bereicheFuer/zusatzBereicheFuer ueber alle Rollen und beide
Haeuser) und schreibt daraus einen Streifenverlauf mit harten
Kanten -- "nicht gemischt" war die eigentliche Ansage. Ein Verlauf
ergaebe Zwischentoene, die es im Haus nicht gibt.
Gegen einen deckenden Grund gemischt, nicht gegen --flaeche: Die
ist halbdurchsichtig, und durch 31 schmale Baender schien das
Buehnenbild -- sie verloren genau das, wofuer sie da sind.
Der Lesesaum ist staerker als auf den anderen Kacheln, und zwar
gemessen: Mit deren Werten kam der Text auf 4,45:1, fuenf
Hundertstel unter der Grenze. Gefunden hat das pruef-kachelfarben,
nicht der Blick -- 4,45 gegen 4,50 sieht man nicht.
pruef-buehne -- DIE ZAHL GEHOERT IN DIE BEDINGUNG
Die Abtastung wurde nachsichtiger (fremde Flaechen zaehlen nicht
mehr als Untergrund eines Textes). Das war richtig und hat einen
Fehlalarm beseitigt, der seit Tagen kam. Eine Lockerung kann aber
zu weit gehen, deshalb muss jetzt jeder gefundene Text in genau
einem von drei Toepfen landen: gemessen, ohne freien Untergrund,
oder aussortiert. Geht die Rechnung nicht auf, ist unterwegs etwas
still verschwunden.
Erster Anlauf war "mindestens 5 Stellen" -- und wurde auf
uebersicht.html sofort rot, weil die Seite nur vier Texte hat.
Eine feste Schwelle ist eine Rechnung von gestern; diese war keine
fuenf Minuten alt.
Gemessen: pruef-kachelfarben 22/0 (war 18, neu: die Willkommenskachel
traegt wirklich alle benutzten Farben, in beide Richtungen geprueft),
pruef-buehne 192/0, pruef-chatkachel 32/0, pruef-chat-optik 45/0,
pruef-chat 48/0, pruef-erwaehnung 69/0, pruef-start-ansicht 153/0,
pruef-treff 80/0, pruef-willkommen 67/0, pruef-treffchat 110/0,
pruef-css-klassen 30/0.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+121
-7
@@ -247,17 +247,18 @@ for (const [breite, hoehe, wie] of [[1440, 950, "Computer"], [390, 780, "Handy"]
|
||||
el2 && el2 !== e && !el2.contains(e) && !e.contains(el2)
|
||||
&& el2.children.length === 0 && el2.textContent.trim().length > 0;
|
||||
|
||||
let schlecht = null, anzahl = 0, ohneStelle = 0;
|
||||
let schlecht = null, anzahl = 0, ohneStelle = 0, uebersprungen = 0;
|
||||
const alle = [...document.querySelectorAll("p, h1, h2, h3, span, a, li")]
|
||||
.filter((e) => e.children.length === 0 && e.textContent.trim().length > 2);
|
||||
for (const e of alle) {
|
||||
const r = e.getBoundingClientRect();
|
||||
if (r.width < 8 || r.height < 8) continue;
|
||||
if (r.top < 0 || r.bottom > window.innerHeight) continue;
|
||||
if (r.width < 8 || r.height < 8) { uebersprungen++; continue; }
|
||||
if (r.top < 0 || r.bottom > window.innerHeight) { uebersprungen++; continue; }
|
||||
|
||||
const mitte = r.top + r.height / 2;
|
||||
const st0 = getComputedStyle(e);
|
||||
const kandidaten = [];
|
||||
let gemessenBei = null, gemessenAuf = null;
|
||||
|
||||
/* ZUERST IN DER EIGENEN POLSTERUNG.
|
||||
|
||||
@@ -286,9 +287,81 @@ for (const [breite, hoehe, wie] of [[1440, 950, "Computer"], [390, 780, "Handy"]
|
||||
for (const [kx, ky] of kandidaten) {
|
||||
if (kx < 0 || ky < 0 || kx >= window.innerWidth || ky >= window.innerHeight) continue;
|
||||
if (istFremderText(document.elementFromPoint(kx, ky), e)) continue;
|
||||
/* UND KEIN FREMDER UNTERGRUND (22.09.2026).
|
||||
============================================================
|
||||
Diese Pruefung meldete tagelang 3,28:1 fuer den Markentext
|
||||
in der Kopfleiste. Drei Vermutungen nacheinander gemessen
|
||||
und alle drei widerlegt: nicht die Glut der Leiste, nicht
|
||||
der Schein hinter der Schrift, nicht die Schriftfarbe.
|
||||
|
||||
Die Antwort kam erst, als die Pruefung sagen konnte, WO
|
||||
sie misst: bei 125,34 -- auf `button.wahl2__knopf`. Bei
|
||||
390 px liegt der Sicht-Umschalter direkt neben dem
|
||||
Schriftzug, und der Abtastpunkt 4 px rechts daneben trifft
|
||||
SEINEN Hintergrund. Der Text liegt dort nicht drauf.
|
||||
|
||||
Dieselbe Lehre wie schon einmal oben, nur andersherum:
|
||||
Damals mass sie daneben statt innen, hier misst sie
|
||||
daneben und trifft einen Nachbarn. Ein Element mit
|
||||
eigenem, deckendem Hintergrund, das KEIN Vorfahre des
|
||||
Textes ist, taugt nicht als sein Untergrund.
|
||||
|
||||
Die Regel ist schmal: Nur deckende Hintergruende zaehlen
|
||||
als fremd. Ein durchsichtiger Nachbar laesst denselben
|
||||
Grund durch wie der Text selbst -- dort darf weiter
|
||||
gemessen werden. */
|
||||
const dort = document.elementFromPoint(kx, ky);
|
||||
if (dort && dort !== e && !e.contains(dort) && !dort.contains(e)) {
|
||||
/* WESSEN FLAECHE IST DAS? Der Knopf selbst ist oft
|
||||
durchsichtig -- seine Flaeche traegt der Behaelter
|
||||
darueber. Deshalb die Elternkette hoch bis zum ersten
|
||||
deckenden Hintergrund und fragen, ob DER auch ueber dem
|
||||
Text liegt. Tut er das nicht, ist es eine fremde
|
||||
Flaeche, und der Text liegt dort nicht drauf. */
|
||||
const flaecheVon = (n) => {
|
||||
for (let q = n; q && q !== document.documentElement; q = q.parentElement) {
|
||||
const st2 = getComputedStyle(q);
|
||||
const g2 = st2.backgroundColor || "";
|
||||
const teile = g2.match(/[\d.]+/g);
|
||||
const deckend = teile && (teile.length < 4 || Number(teile[3]) >= 0.5)
|
||||
&& !/rgba\(0, 0, 0, 0\)/.test(g2);
|
||||
const bild = st2.backgroundImage && st2.backgroundImage !== "none"
|
||||
&& (st2.webkitBackgroundClip || st2.backgroundClip || "")
|
||||
.split(",")[0].trim() !== "text";
|
||||
if (deckend || bild) return q;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
const meine = flaecheVon(e);
|
||||
const fremde = flaecheVon(dort);
|
||||
if (fremde && fremde !== meine) continue;
|
||||
/* AUCH EINE HALBDURCHSICHTIGE EIGENE FLAECHE ZAEHLT.
|
||||
Der Knopf, der den Fehlalarm ausloeste, liegt in
|
||||
DERSELBEN Kopfleiste wie der Text -- die deckende
|
||||
Flaeche ist also dieselbe. Er traegt aber darueber noch
|
||||
eine eigene, halbdurchsichtige, und genau die hebt den
|
||||
gemessenen Punkt an. Ein Text liegt darauf nicht drauf,
|
||||
er liegt DANEBEN. */
|
||||
{
|
||||
let fremdeFlaeche = false;
|
||||
for (let q = dort; q && q !== meine && !q.contains(e); q = q.parentElement) {
|
||||
const st3 = getComputedStyle(q);
|
||||
const t3 = (st3.backgroundColor || "").match(/[\d.]+/g);
|
||||
const hatFarbe = t3 && (t3.length < 4 || Number(t3[3]) > 0.02);
|
||||
const hatBild = st3.backgroundImage && st3.backgroundImage !== "none";
|
||||
if (hatFarbe || hatBild) { fremdeFlaeche = true; break; }
|
||||
}
|
||||
if (fremdeFlaeche) continue;
|
||||
}
|
||||
}
|
||||
const bx = Math.round(kx * skala), by = Math.round(ky * skala);
|
||||
if (bx < 0 || bx >= c.width || by < 0 || by >= c.height) continue;
|
||||
p = g.getImageData(bx, by, 1, 1).data;
|
||||
gemessenBei = Math.round(kx) + "," + Math.round(ky);
|
||||
const hier = document.elementFromPoint(kx, ky);
|
||||
gemessenAuf = hier ? hier.tagName.toLowerCase()
|
||||
+ (typeof hier.className === "string" && hier.className
|
||||
? "." + hier.className.trim().split(/\s+/)[0] : "") : "nichts";
|
||||
break;
|
||||
}
|
||||
/* Kein freier Punkt gefunden -- das wird GEZÄHLT und ausgegeben.
|
||||
@@ -328,10 +401,26 @@ for (const [breite, hoehe, wie] of [[1440, 950, "Computer"], [390, 780, "Handy"]
|
||||
const v = kontrast(farbe, [p[0], p[1], p[2]]);
|
||||
anzahl++;
|
||||
if (!schlecht || v / grenze < schlecht.v / schlecht.grenze) {
|
||||
schlecht = { v, grenze, text: e.textContent.trim().slice(0, 26), grund: [p[0], p[1], p[2]] };
|
||||
/* WO ES STEHT, NICHT NUR WAS DASTEHT (22.09.2026).
|
||||
Diese Pruefung meldete tagelang 3,28:1 bei "Spicy & Dogi"
|
||||
-- und die Suche danach kostete eine halbe Stunde, weil
|
||||
derselbe Text an mehreren Stellen vorkommt. Eine Pruefung,
|
||||
die einen Fehler findet, ihn aber nicht auffindbar macht,
|
||||
kostet mehr Zeit als sie spart. */
|
||||
const wo = e.tagName.toLowerCase()
|
||||
+ (typeof e.className === "string" && e.className
|
||||
? "." + e.className.trim().split(/\s+/).join(".") : "");
|
||||
schlecht = { v, grenze, text: e.textContent.trim().slice(0, 26),
|
||||
grund: [p[0], p[1], p[2]], wo,
|
||||
eltern: (() => { const k=[]; for (let q=e.parentElement; q && k.length<4; q=q.parentElement)
|
||||
k.push(q.tagName.toLowerCase()+(typeof q.className==="string"&&q.className?"."+q.className.trim().split(/\s+/)[0]:"")); return k.join(" < "); })(),
|
||||
lage: Math.round(r.left)+","+Math.round(r.top)+" "+Math.round(r.width)+"x"+Math.round(r.height),
|
||||
gemessenBei, gemessenAuf,
|
||||
groesse: Math.round(gr * 10) / 10, fett: st.fontWeight,
|
||||
verlauf: clipText };
|
||||
}
|
||||
}
|
||||
return { ...schlecht, anzahl, ohneStelle, gesamt: alle.length };
|
||||
return { ...schlecht, anzahl, ohneStelle, uebersprungen, gesamt: alle.length };
|
||||
}, [bild.toString("base64"), DUNKELSTER_QUELLE]);
|
||||
|
||||
/* ---- GEGENPROBE ZUR VERLAUFSSCHRIFT ----------------------------
|
||||
@@ -372,10 +461,35 @@ for (const [breite, hoehe, wie] of [[1440, 950, "Computer"], [390, 780, "Handy"]
|
||||
`${s}: Gegenprobe -- dunkler Verlauf wird als dunkel erkannt `
|
||||
+ `(${gegen.dunkel.dunkelster?.join(",")}), also faellt so etwas auf`);
|
||||
|
||||
ok(schlimmster.v >= schlimmster.grenze,
|
||||
/* DIE ZAHL GEHOERT IN DIE BEDINGUNG (22.09.2026).
|
||||
Sie stand bisher nur im Meldetext. Am 22.09. wurde die Abtastung
|
||||
nachsichtiger gemacht (fremde Flaechen zaehlen nicht mehr als
|
||||
Untergrund) -- richtig, aber eine Lockerung kann zu weit gehen.
|
||||
Wuerde sie irgendwann JEDEN Punkt verwerfen, waere diese Zeile
|
||||
fuer immer gruen, ohne je wieder etwas anzusehen.
|
||||
ERSTER ANLAUF WAR `anzahl >= 5` -- und die Pruefung wurde auf
|
||||
uebersicht.html sofort rot, weil die Seite schlicht nur vier
|
||||
Texte hat. Eine feste Schwelle ist eine Rechnung von gestern;
|
||||
sie war hier keine fuenf Minuten alt.
|
||||
|
||||
Richtig ist die ABLEITUNG: Jeder gefundene Text muss in genau
|
||||
einem der drei Toepfe landen -- gemessen, ohne freien Untergrund,
|
||||
oder vorher aussortiert (zu klein / ausserhalb des Bildes). Geht
|
||||
die Rechnung nicht auf, ist unterwegs etwas verschwunden, und
|
||||
zwar still. Diese Bedingung braucht keine Zahl und veraltet nicht.
|
||||
Wie VIELE davon gemessen werden duerfen, deckelt die Zeile
|
||||
darunter ("hoechstens zwei Texte ohne freien Untergrund"). */
|
||||
ok(schlimmster.anzahl + schlimmster.ohneStelle + schlimmster.uebersprungen
|
||||
=== schlimmster.gesamt
|
||||
&& schlimmster.v >= schlimmster.grenze,
|
||||
`${s}: schlechtester Kontrast ${schlimmster.v.toFixed(2)}:1 (nötig ${schlimmster.grenze}:1) `
|
||||
+ `bei "${schlimmster.text}" auf rgb(${schlimmster.grund.join(",")}) · `
|
||||
+ `${schlimmster.anzahl} Stellen gemessen`);
|
||||
+ `${schlimmster.anzahl} gemessen + ${schlimmster.ohneStelle} ohne Grund `
|
||||
+ `+ ${schlimmster.uebersprungen} aussortiert = ${schlimmster.gesamt}`
|
||||
+ (schlimmster.wo ? ` -- ${schlimmster.wo}, ${schlimmster.groesse}px/${schlimmster.fett}`
|
||||
+ (schlimmster.verlauf ? ", Verlauf im Text" : "")
|
||||
+ ` [${schlimmster.lage}] in ${schlimmster.eltern}`
|
||||
+ ` -- gemessen bei ${schlimmster.gemessenBei} auf ${schlimmster.gemessenAuf}` : ""));
|
||||
/* Wenn rings um einen Text nirgends freier Untergrund liegt, ist er
|
||||
ungeprüft geblieben. Das darf vorkommen (dicht gesetzte Zeilen),
|
||||
aber nicht unbemerkt und nicht bei vielen -- sonst meldet die
|
||||
|
||||
Reference in New Issue
Block a user