oh-my-opencode 5.1.48 → 5.1.54

package/packages/shared-skills/skills/frontend/scripts/detect/rules/color/low-contrast.test.ts

@@ -0,0 +1,209 @@
+import { expect, test } from "bun:test"
+import { lintSnapshot } from "../../lint"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { lowContrast } from "./low-contrast"
+
+const ink = (color: string): Readonly<Record<string, string>> => ({ color, "-webkit-text-fill-color": color })
+
+test("#given small, large and bold text around AA thresholds #then only failures report", () => {
+	const snapshot = buildSnapshot([
+		{ id: "small-fail", text: "Faint body", style: ink("#777777") },
+		{ id: "small-pass", text: "Readable body", style: ink("#767676") },
+		{ id: "large-fail", text: "Faint heading", style: { ...ink("#9b9b9b"), "font-size": "24px" } },
+		{ id: "large-pass", text: "Readable heading", style: { ...ink("#949494"), "font-size": "24px" } },
+		{ id: "bold-fail", text: "Faint bold", style: { ...ink("#9c9c9c"), "font-size": "19px", "font-weight": "700" } },
+		{ id: "bold-pass", text: "Readable bold", style: { ...ink("#949494"), "font-size": "19px", "font-weight": "700" } },
+	])
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#small-fail", "#large-fail", "#bold-fail"])
+	expect(lintSnapshot(snapshot, { rules: [lowContrast] }).every((h) => h.severity === "error")).toBe(true)
+})
+
+test("#given repeated pairs and an ignored first copy #then one readable claimant counts unwaived copies", () => {
+	const snapshot = buildSnapshot([
+		{ id: "waived", text: "Waived copy", style: ink("#bbbbbb"), attributes: { "data-detect-ignore": "low-contrast" } },
+		{ id: "glyph", text: "𝕏", style: ink("#bbbbbb") },
+		{ id: "word", text: "Share this idea", style: ink("#bbbbbb") },
+		{ id: "repeat", text: "Share another idea", style: ink("#bbbbbb") },
+		{ id: "pass", text: "Readable ink", style: ink("#333333") },
+	])
+	const hits = lowContrast.check({ snapshot, config: {} })
+	expect(hits.map((h) => h.element?.selector)).toEqual(["#word"])
+	expect(hits[0]?.message.endsWith("(and 2 more)")).toBe(true)
+})
+
+test("#given named heavy cuts and ordinary family names #then only bold cuts get the large text bar", () => {
+	const snapshot = buildSnapshot(["ProximaNovaBold", "EMprint Semibold", "Gotham-Black", "Blackletter Text", 'Georgia, "Arial Black"'].map((family, i) => ({
+		id: `face-${i}`, text: "Family weight", style: { ...ink("#ffffff"), "background-color": "#ff5757", "font-size": "19px", "font-family": family },
+	})))
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#face-3"])
+})
+
+test("#given scrims, pseudo faces and parked underlines #then contrast uses the painted surface", () => {
+	const snapshot = buildSnapshot([
+		{ style: { position: "relative" }, rect: { width: 500, height: 200 }, children: [
+			{ style: { position: "absolute", "background-color": "rgba(0,0,0,0.8)" }, rect: { width: 500, height: 200 } },
+			{ style: { position: "absolute", "background-color": "rgba(235,230,224,0.3)" }, rect: { width: 500, height: 200 }, children: [
+				{ id: "scrim-pass", text: "White title on scrim", style: ink("#f7f5f3") },
+			] },
+		] },
+		{ id: "pseudo-fail", text: "Dark label", rect: { y: 300 }, style: ink("#333333"), before: { "background-color": "#1a1a1a" } },
+		{ id: "parked-pass", text: "Readable dark label", rect: { y: 400 }, style: ink("#333333"), before: { "background-color": "#1a1a1a", transform: "matrix(1, 0, 0, 1, -300, 0)" } },
+		{ id: "drawn-fail", text: "Ink on itself", rect: { y: 500 }, style: { ...ink("#5d666d"), "background-image": "linear-gradient(#5d666c, #5d666c)", "background-size": "100% 100%" } },
+		{ id: "underline-pass", text: "Ink with parked underline", rect: { y: 600 }, style: { ...ink("#5d666c"), "background-image": "linear-gradient(#5d666c, #5d666c)", "background-size": "0px 1px" } },
+		{ style: { position: "relative", "background-color": "#ffffff" }, rect: { y: 700, width: 420, height: 100 },
+			before: { "background-color": "#312e81", "z-index": "-1" }, children: [
+				{ id: "ring-fail", text: "Faint copy inside a border ring", rect: { y: 724 }, style: ink("#b8bcc4") },
+			] },
+	])
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#pseudo-fail", "#drawn-fail", "#ring-fail"])
+})
+
+test("#given stacked opaque panels and a mask fade #then hidden text cannot claim a pair", () => {
+	const snapshot = buildSnapshot([
+		{ rect: { width: 600, height: 200 }, children: [
+			{ style: { "z-index": "2", "background-color": "#ffffff" }, rect: { width: 600, height: 200 }, children: [{ id: "active", text: "Faint active copy", style: ink("#a0a0a0") }] },
+			{ style: { "z-index": "0", "background-color": "#ffffff" }, rect: { width: 600, height: 200 }, children: [{ id: "covered", text: "Faint covered copy", style: ink("#a1a1a1") }] },
+		] },
+		{ rect: { y: 300, width: 400, height: 160 }, style: { "mask-image": "linear-gradient(#000000 100px, transparent 140px)" }, children: [
+			{ id: "clear", rect: { y: 320 }, text: "Clear zone", style: ink("#a2a2a2") },
+			{ id: "masked", rect: { y: 440 }, text: "Masked zone", style: ink("#a3a3a3") },
+		] },
+	])
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#active", "#clear"])
+})
+
+test("#given a delayed entrance and a fading loop #then final entrance text reports but loop frames do not", () => {
+	const snapshot = buildSnapshot([
+		{ style: { opacity: "0", "animation-name": "enter", "animation-iteration-count": "1" }, children: [
+			{ id: "enter", tag: "a", text: "Get started", style: ink("#bbbbbb") },
+		] },
+		{ style: { opacity: "0.2", "animation-name": "cycle", "animation-iteration-count": "infinite" }, children: [
+			{ id: "cycle", text: "A loop frame", style: ink("#bbbbbb") },
+		] },
+		{ id: "readable", text: "Readable copy", style: ink("#111111") },
+		{ style: { position: "fixed" }, rect: { x: 1400 }, children: [{ id: "drawer", text: "Parked drawer copy", rect: { x: 1400 }, style: ink("#cccccc") }] },
+		{ id: "font-zero", text: "Invisible text", style: { ...ink("#cccccc"), "font-size": "0px" } },
+		{ tag: "video", children: [{ id: "fallback", text: "Unpainted fallback", style: ink("#cccccc") }] },
+	], { cssText: ["@keyframes enter { from { opacity: 0; } to { opacity: 1; } } @keyframes cycle { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }"] })
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#enter"])
+})
+
+test("#given alpha ink, inherited surfaces, gradients and disabled controls #then painted failures report", () => {
+	const snapshot = buildSnapshot([
+		{ style: { "background-color": "#000000" }, children: [
+			{ id: "alpha-fail", text: "Faint alpha", style: ink("rgba(255,255,255,0.1)") },
+			{ id: "alpha-pass", text: "Readable alpha", style: ink("rgba(255,255,255,0.9)") },
+		] },
+		{ tag: "button", attributes: { disabled: "" }, children: [{ id: "disabled", text: "Disabled", style: ink("#cccccc") }] },
+		{ id: "gradient-fail", text: "Faint gradient", style: { "background-image": "linear-gradient(#dddddd, #eeeeee)", ...ink("#bbbbbb") } },
+		{ id: "transparent", text: "Hidden fill", style: ink("transparent") },
+		{ id: "photo", text: "Unknown background", style: { ...ink("#cccccc"), "background-image": "url(photo.jpg)" } },
+	])
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#alpha-fail", "#gradient-fail"])
+})
+
+test("#given pale clipped text and waived plain text #then only unwaived failures report", () => {
+	const snapshot = buildSnapshot([
+		{ id: "clip-fail", text: "Pale glyphs", style: { "background-clip": "text", "background-image": "linear-gradient(#dddddd, #eeeeee)", ...ink("transparent") } },
+		{ id: "clip-pass", text: "Dark glyphs", style: { "background-clip": "text", "background-image": "linear-gradient(#111111, #333333)", ...ink("transparent") } },
+		{ id: "waived", text: "Waived faint text", style: ink("#cccccc"), attributes: { "data-detect-ignore": "low-contrast" } },
+	])
+	expect(lintSnapshot(snapshot, { rules: [lowContrast] }).map((h) => h.location.kind === "element" ? h.location.selector : "")).toEqual(["#clip-fail"])
+})
+
+test("#given gradient bands and an underline tile #then contrast reads only the paint beneath the text", () => {
+	const band = "linear-gradient(#fde68a 0%, #fde68a 30%, #1e3a8a 50%, #1e3a8a 100%)"
+	const snapshot = buildSnapshot([
+		{ id: "light-band", text: "Label", rect: { width: 240, height: 64 }, lineRects: [{ x: 16, y: 2, width: 120, height: 20 }],
+			style: { ...ink("#fffdf7"), "background-image": band } },
+		{ id: "dark-band", text: "Label", rect: { y: 100, width: 240, height: 64 }, lineRects: [{ x: 16, y: 140, width: 120, height: 20 }],
+			style: { ...ink("#fffdf8"), "background-image": band } },
+		{ id: "underline", text: "A readable link", rect: { y: 200, width: 160, height: 31 }, lineRects: [{ x: 0, y: 200, width: 120, height: 20 }],
+			style: { ...ink("#1e293b"), "background-image": "linear-gradient(#1e293b, #1e293b)", "background-repeat": "no-repeat", "background-size": "100% 2px", "background-position": "0% 100%" } },
+	])
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#light-band"])
+})
+
+test("#given safe text repeated across vendors and wordless prices #then only eligible word claimants replace glyphs", () => {
+	const snapshot = buildSnapshot([
+		{ id: "glyph", tag: "a", text: "𝕏", style: ink("#bbbbbb") },
+		{ attributes: { id: "taboola-feed" }, children: [{ id: "vendor-word", tag: "a", text: "Sponsored words", style: ink("#bbbbbb") }] },
+		{ id: "price", tag: "span", text: "R$ 89,90", style: ink("#aaaaaa") },
+		{ id: "name", text: "Linen shirt", style: ink("#aaaaaa") },
+		{ id: "tiny", tag: "span", text: "A tiny mark", style: { ...ink("#cccccc"), "font-size": "8px" } },
+		{ attributes: { class: "slick-dots" }, children: [
+			{ id: "dot", tag: "button", text: "1", style: { ...ink("#333333"), "background-color": "#888888" } },
+		] },
+		{ id: "site-button", tag: "button", text: "Get started", style: { ...ink("#333333"), "background-color": "#888888" } },
+	])
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#glyph", "#name", "#dot", "#site-button"])
+})
+
+test("#given decorative and reading text on identical pairs #then both roles report with project error severity", () => {
+	const snapshot = buildSnapshot([
+		{ id: "stamp", tag: "p", text: "v2.4.1 · 2024-03-01", style: ink("#bbbbbb") },
+		{ id: "heading", tag: "h3", text: "v2.4.1", style: ink("#bbbbbb") },
+		{ id: "initial", tag: "span", text: "A", rect: { y: 100, width: 32, height: 32 }, style: { ...ink("#ffffff"), "background-color": "#93c5fd" } },
+		{ id: "letter-link", tag: "a", text: "A", rect: { y: 150, width: 32, height: 32 }, style: { ...ink("#ffffff"), "background-color": "#93c5fd" } },
+	])
+	const findings = lintSnapshot(snapshot, { rules: [lowContrast] })
+	expect(findings.map((h) => h.location.kind === "element" ? h.location.selector : "")).toEqual(["#stamp", "#heading", "#initial", "#letter-link"])
+	expect(findings.every((h) => h.severity === "error")).toBe(true)
+})
+
+test("#given clipped copies and scroll-sized frames #then whole claimants and reachable lower copy report", () => {
+	const snapshot = buildSnapshot([
+		{ rect: { width: 200, height: 50 }, style: { "overflow-x": "hidden" }, children: [
+			{ id: "cut", rect: { x: -80, width: 160, height: 24 }, text: "Repeated label", style: ink("#aaaaaa") },
+			{ id: "whole", rect: { width: 160, height: 24 }, text: "Repeated label", style: ink("#aaaaaa") },
+			{ id: "sliver", rect: { x: -150, width: 160, height: 24 }, text: "A sliver of another label", style: ink("#bbbbbb") },
+		] },
+		{ rect: { y: 100, width: 500, height: 800 }, style: { "overflow-y": "hidden" }, scroll: { scrollHeight: 1500, clientHeight: 800 }, children: [
+			{ rect: { y: 100, height: 1500 }, children: [
+				{ id: "below-fold", rect: { y: 1400 }, text: "Reachable faint copy", style: ink("#cccccc") },
+			] },
+		] },
+		{ tag: "details", rect: { y: 1700 }, children: [{ id: "closed", rect: { y: 1700 }, text: "Closed panel", style: ink("#dddddd") }] },
+		{ attributes: { hidden: "until-found" }, rect: { y: 1800 }, children: [{ id: "findable", rect: { y: 1800 }, text: "Findable panel", style: ink("#eeeeee") }] },
+		{ rect: { y: 1900, width: 1280, height: 60 }, style: { "overflow-x": "hidden" }, children: [
+			{ id: "shell-layout", rect: { x: 1220, y: 1900, width: 280 }, text: "A clipped desktop column", style: ink("#ababab") },
+		] },
+	])
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#whole", "#below-fold", "#shell-layout"])
+	const base = buildSnapshot([
+		{ rect: { width: 1280, height: 800 }, style: { position: "fixed", "overflow-y": "hidden" }, scroll: { clientHeight: 800, scrollHeight: 1800 }, children: [
+			{ id: "frame-foot", rect: { y: 1500 }, text: "Faint frame footer", style: ink("#cccccc") },
+		] },
+	])
+	const framed = { ...base, document: { ...base.document, scrollHeight: 800 },
+		elements: base.elements.map((el) => el.tag === "body" ? { ...el, style: { ...el.style, "overflow-y": "hidden" } } : el) }
+	expect(lowContrast.check({ snapshot: framed, config: {} }).map((h) => h.element?.selector)).toEqual(["#frame-foot"])
+})
+
+test("#given a declared mockup and labelled screenshot #then hidden drawings claim no pair and screenshot pairs stay separate", () => {
+	const snapshot = buildSnapshot([
+		{ attributes: { inert: "", class: "demo-frame" }, rect: { width: 420, height: 190 }, children: [
+			{ id: "hidden-one", text: "Draft", style: ink("#cccccc") },
+			{ text: "Saved", style: ink("#cccccc") },
+			{ text: "Ready", style: ink("#cccccc") },
+		] },
+		{ id: "outside", text: "Your subscription renews on the first day of every month", style: ink("#cccccc") },
+		{ attributes: { "aria-label": "A screenshot of the billing screen", class: "shot-frame" }, rect: { y: 300, width: 420, height: 190 }, children: [
+			{ id: "shot", rect: { y: 320 }, text: "Billing", style: ink("#bbbbbb") },
+		] },
+		{ id: "after-shot", rect: { y: 600 }, text: "Your plan renews next month", style: ink("#bbbbbb") },
+	])
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#outside", "#shot", "#after-shot"])
+})
+
+test("#given captured opacity motion and a paused vanishing loop #then only steady or held-end ink is scored", () => {
+	const snapshot = buildSnapshot([
+		{ id: "transition", text: "A reveal in progress", motion: ["opacity"], style: { ...ink("#bbbbbb"), opacity: "0.3" } },
+		{ id: "finite", text: "The held entrance label", motion: ["opacity"], style: { ...ink("#bbbbbb"), opacity: "0.3",
+			"animation-name": "enter", "animation-duration": "1s", "animation-iteration-count": "1", "animation-fill-mode": "forwards", "animation-play-state": "running" } },
+		{ id: "paused", text: "A parked loop label", style: { ...ink("#bbbbbb"), opacity: "0.4",
+			"animation-name": "cycle", "animation-iteration-count": "infinite", "animation-play-state": "paused" } },
+		{ id: "steady", text: "Deliberately faded copy", style: { ...ink("#cccccc"), opacity: "0.4" } },
+	], { cssText: ["@keyframes enter { from { opacity: 0; } to { opacity: 1; } } @keyframes cycle { 0% { opacity: 0; } 100% { opacity: 1; } }"] })
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#finite", "#steady"])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/color/low-contrast.ts

@@ -0,0 +1,57 @@
+import { blend, contrastRatio } from "../../core/color"
+import { ancestors, fontSizePx, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { distinctPairs, type ContrastHit } from "./support/contrast-pairs"
+import { gradientStops } from "./support/gradients"
+import { textPainted } from "./support/painted-text"
+import { bareText } from "./support/color-path"
+import { contrastRole } from "./support/contrast-role"
+import { mockupRoots } from "./support/mockup-roots"
+import { placeholderContrast } from "./support/placeholder-contrast"
+import { clipsText, solidGround, textBackgrounds, textInk } from "./support/text-colors"
+
+export const lowContrast: PageRule = {
+	meta: {
+		id: "low-contrast", name: "Low contrast text", category: "quality", severity: "error", engine: "page",
+		description: "Text falls below the WCAG AA contrast ratio for its size.",
+		fixHint: "Increase text and surface contrast to 4.5:1, or 3:1 for large text.",
+	},
+	check: ({ snapshot }) => {
+		const mockups = mockupRoots(snapshot)
+		const text = distinctPairs(snapshot, snapshot.elements.flatMap((el): readonly ContrastHit[] => {
+			if ([el, ...ancestors(snapshot, el)].some((node) => mockups.get(node.index) === "declared")) return []
+			if (!textPainted(snapshot, el)) return []
+			if ([el, ...ancestors(snapshot, el)].some((node) => node.attributes["disabled"] !== undefined || node.attributes["aria-disabled"] === "true")) return []
+			const size = fontSizePx(el)
+			if (bareText(el) && size < 9) return []
+			const familyWords = (styleOf(el, "font-family").split(",")[0] ?? "").replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase().split(/[^a-z0-9]+/)
+			const namedBold = familyWords.some((w) => ["bold", "semibold", "demibold", "extrabold", "ultrabold", "heavy", "black"].includes(w))
+			const weight = namedBold ? Math.max(700, Number.parseFloat(styleOf(el, "font-weight")) || 400) : Number.parseFloat(styleOf(el, "font-weight"))
+			const threshold = size >= 24 || (size >= 18.66 && weight >= 700) ? 3 : 4.5
+			if (clipsText(el) && el.ownText.trim() !== "") {
+				const stops = gradientStops(styleOf(el, "background-image"))
+				if (stops.length === 0 || stops.some((s) => s.color.a < 0.999)) return []
+				const ground = solidGround(snapshot, el)
+				const best = Math.max(...stops.map((s) => contrastRatio(s.color, ground)))
+				return best < threshold ? [{ element: el, pair: JSON.stringify([stops, ground, threshold]), message: `Gradient text contrast ${best.toFixed(2)}:1; needs ${threshold}:1`, snippet: shortSnippet(el) }] : []
+			}
+			const ink = textInk(snapshot, el)
+			if (!ink) return []
+			const backgrounds = textBackgrounds(snapshot, el)
+			if (backgrounds.length === 0) return []
+			const ratios = backgrounds.map((bg) => contrastRatio(blend(ink, bg), bg))
+			const ratio = Math.min(...ratios)
+			if (ratio === 1 && ![el, ...ancestors(snapshot, el)].some((node) =>
+				["a", "button", "input", "select", "textarea"].includes(node.tag) || ["button", "link"].includes(node.attributes["role"] ?? ""))) return []
+			const control = [el, ...ancestors(snapshot, el)].find((node) => node.tag === "button" || node.attributes["role"] === "button")
+			if (ratio === 1 && control && control.children.length > 1 && control.text.trim() === el.text.trim()) return []
+			const shape = size >= 96 && ink.a < 0.25 ? el.text : [el, ...ancestors(snapshot, el)].some((node) => mockups.get(node.index) === "labelled") ? "decorative" : contrastRole(snapshot, el)
+			const gradient = bareText(el) ? ancestors(snapshot, el).find((node) => !clipsText(node) && styleOf(node, "background-image").includes("gradient")) : undefined
+			const ground = backgrounds[ratios.indexOf(ratio)]
+			const pair = gradient ? JSON.stringify([ink, gradient.index, shape]) : JSON.stringify([ink, ground, threshold, shape])
+			return ratio < threshold ? [{ element: el, pair, message: `Text contrast ${ratio.toFixed(2)}:1; needs ${threshold}:1`, snippet: shortSnippet(el) }] : []
+		}))
+		return [...text, ...snapshot.elements.flatMap((el) =>
+			[el, ...ancestors(snapshot, el)].some((node) => mockups.get(node.index) === "declared") ? [] : placeholderContrast(snapshot, el))]
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/color/placeholder-contrast.test.ts

@@ -0,0 +1,62 @@
+import { expect, test } from "bun:test"
+import { lintSnapshot } from "../../lint"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { lowContrast } from "./low-contrast"
+import { textBackgrounds } from "./support/text-colors"
+
+test("#given shown placeholders beside readable host ink #then each field reports its own placeholder without pair dedupe", () => {
+	const snapshot = buildSnapshot([
+		{ id: "first", tag: "input", attributes: { placeholder: "Name" }, style: { color: "#111111", "background-color": "#ffffff" }, placeholder: { color: "#bbbbbb" } },
+		{ id: "second", tag: "textarea", attributes: { placeholder: "Notes" }, style: { color: "#111111", "background-color": "#ffffff" }, placeholder: { color: "#bbbbbb" } },
+		{ id: "alpha", tag: "input", attributes: { placeholder: "Email" }, style: { color: "#111111", "background-color": "#f5f5f5" }, placeholder: { color: "rgba(255,255,255,0.4)" } },
+		{ tag: "label", text: "Team", children: [
+			{ id: "labelled", tag: "input", attributes: { placeholder: "Team name" }, style: { "background-color": "#ffffff" }, placeholder: { color: "#bbbbbb" } },
+		] },
+	])
+	const hits = lintSnapshot(snapshot, { rules: [lowContrast] })
+	expect(hits.map((hit) => hit.location.kind === "element" ? hit.location.selector : "")).toEqual(["#first", "#second", "#alpha", "#labelled"])
+	expect(hits.every((hit) => hit.severity === "error")).toBe(true)
+})
+
+test("#given absent hidden transparent disabled and readable placeholders #then none reports", () => {
+	const snapshot = buildSnapshot([
+		{ tag: "input", attributes: { placeholder: "Filled", value: "Existing value" } },
+		{ tag: "input", attributes: { placeholder: "Transparent" }, placeholder: { color: "rgba(255,255,255,0.02)" } },
+		{ tag: "input", attributes: { placeholder: "" }, placeholder: { color: "#bbbbbb" } },
+		{ tag: "input", attributes: { placeholder: "Disabled", disabled: "" }, placeholder: { color: "#bbbbbb" } },
+		{ tag: "input", attributes: { placeholder: "Readable" }, placeholder: { color: "#111111" } },
+		{ tag: "input", attributes: { type: "range", placeholder: "Not text" }, placeholder: { color: "#bbbbbb" } },
+		{ style: { display: "none" }, children: [{ tag: "textarea", attributes: { placeholder: "Hidden" }, placeholder: { color: "#bbbbbb" } }] },
+		{ tag: "input", attributes: { placeholder: "Waived", "data-detect-ignore": "low-contrast" }, placeholder: { color: "#bbbbbb" } },
+	])
+	expect(lintSnapshot(snapshot, { rules: [lowContrast] })).toEqual([])
+})
+
+test("#given large bold placeholders and translucent field layers #then thresholds use the host size and composited surface", () => {
+	const snapshot = buildSnapshot([
+		{ id: "small", tag: "input", attributes: { placeholder: "Small" }, style: { "font-size": "16px" }, placeholder: { color: "#888888" } },
+		{ id: "large", tag: "input", attributes: { placeholder: "Large" }, style: { "font-size": "24px" }, placeholder: { color: "#888888" } },
+		{ id: "bold", tag: "input", attributes: { placeholder: "Bold" }, style: { "font-size": "18.66px", "font-family": "Brand-SemiBold" }, placeholder: { color: "#888888" } },
+		{ style: { "background-color": "#0f0f11" }, children: [
+			{ style: { "background-color": "rgba(255,255,255,0.15)" }, children: [
+				{ id: "frosted", tag: "input", attributes: { placeholder: "Frosted" }, style: { "background-color": "rgba(255,255,255,0.2)" }, placeholder: { color: "#bbbbbb" } },
+			] },
+		] },
+	])
+	expect(lowContrast.check({ snapshot, config: {} }).map((hit) => hit.element?.selector)).toEqual(["#small", "#frosted"])
+})
+
+test("#given supported modern colors and an unreadable nearer surface #then valid surfaces score and unknown paint stops the walk", () => {
+	const snapshot = buildSnapshot([
+		{ id: "p3", text: "Dim copy", rect: { y: 0 }, style: { color: "color(display-p3 0.35 0.35 0.36)", "background-color": "color(display-p3 0.07 0.07 0.08)" } },
+		{ id: "lch", text: "Warm dim copy", rect: { y: 200 }, style: { color: "lch(35 3 80)", "background-color": "lch(8 3 80)" } },
+		{ rect: { y: 400, width: 600, height: 200 }, style: { "background-color": "#ffffff" }, children: [
+			{ rect: { y: 420, width: 500, height: 100 }, style: { "background-color": "color(rec2020 0.05 0.05 0.05)" }, children: [
+				{ id: "unknown", rect: { y: 440 }, text: "Do not borrow the farther white", style: { color: "#eeeeee" } },
+			] },
+		] },
+	])
+	expect(lowContrast.check({ snapshot, config: {} }).map((hit) => hit.element?.selector)).toEqual(["#p3", "#lch"])
+	const unknown = snapshot.elements.find((el) => el.attributes["id"] === "unknown")
+	expect(unknown === undefined ? null : textBackgrounds(snapshot, unknown)).toEqual([])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/color/radial-halo.test.ts

@@ -0,0 +1,40 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { radialHalo } from "./radial-halo"
+
+test("#given dark radial washes and alternate gradients #then only saturated wide halos report", () => {
+	const snapshot = buildSnapshot([{ style: { "background-color": "#080808" }, children: [
+		...Object.entries({
+			halo: "radial-gradient(circle, rgba(80,111,255,0.85), transparent 70%)",
+			second: "radial-gradient(circle, rgba(255,90,120,0.85), transparent 70%)",
+			soft: "radial-gradient(circle, rgba(80,111,255,0.3), transparent)",
+			neutral: "radial-gradient(circle, rgba(255,255,255,0.85), transparent)",
+			opaque: "radial-gradient(circle, #1e3a8a, #0f172a)",
+			linear: "linear-gradient(#506fff, transparent)",
+			small: "radial-gradient(circle, #506fff 0px, transparent 20px)",
+			repeat: "repeating-radial-gradient(circle, #506fff, transparent)",
+			vignette: "radial-gradient(circle, #020408, transparent)",
+		}).map(([id, image]) => ({ id, style: { "background-image": image } })),
+	] }])
+	expect(radialHalo.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#halo"])
+})
+
+test("#given pseudo halos on dark and light grounds #then only dark visible hosts report", () => {
+	const before = { "background-image": "radial-gradient(circle, #506fff, transparent)" }
+	const snapshot = buildSnapshot([
+		{ id: "dark", style: { "background-color": "#080808" }, before },
+		{ id: "light", style: { "background-color": "#ffffff" }, before },
+		{ id: "hidden", style: { "display": "none", "background-color": "#080808" }, before },
+	])
+	expect(radialHalo.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#dark"])
+})
+
+test("#given a light page with a local translucent panel #then the panel does not turn on the dark-page source form", () => {
+	const base = buildSnapshot([
+		{ style: { "background-color": "rgba(18,20,26,0.86)" }, children: [
+			{ style: { "background-image": "radial-gradient(circle, #a855f7, transparent 70%)" } },
+		] },
+	], { cssText: ["body { background: #fff; } .glass { background: rgba(18,20,26,0.86); }"] })
+	const snapshot = { ...base, elements: base.elements.map((el) => el.tag === "body" ? { ...el, style: { ...el.style, "background-color": "#ffffff" } } : el) }
+	expect(radialHalo.check({ snapshot, config: {} })).toEqual([])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/color/radial-halo.ts

@@ -0,0 +1,31 @@
+import { luminance, parseColor } from "../../core/color"
+import { isRendered, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { backdrop, gradientStops, splitLayers, spread } from "./support/gradients"
+import { darkBackground } from "../source/support/css-effects"
+
+export const radialHalo: PageRule = {
+	meta: {
+		id: "radial-halo", name: "Radial-gradient background halo", category: "slop", severity: "warning", engine: "page",
+		description: "A saturated radial fade decorates a dark surface with a halo.",
+		fixHint: "Ground the section with a solid or subtly shifted background.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((el) => {
+		if (!isRendered(snapshot, el)) return []
+		const body = snapshot.elements.find((node) => node.tag === "body")
+		const root = body ? parseColor(styleOf(body, "background-color")) : null
+		if (root && root.a > 0.5 && luminance(root) >= 0.1 && !snapshot.cssText.some(darkBackground)) return []
+		const surface = backdrop(snapshot, el, "none")
+		if (!surface || luminance(surface) >= 0.1) return []
+		const styles = [el.style, el.before?.style, el.after?.style].filter((s) => s !== undefined)
+		const halo = styles.some((style) => splitLayers(style["background-image"] ?? "").some((layer) => {
+			if (!layer.startsWith("radial-gradient(")) return false
+			const stops = gradientStops(layer)
+			const first = stops[0]
+			const last = stops.at(-1)
+			if (!first || !last || stops.some((s) => /(?:^|\s)(-?\d*\.?\d+)px/.test(s.raw) && Math.abs(Number.parseFloat(s.raw.slice(s.raw.lastIndexOf(" ") + 1))) <= 24)) return false
+			return first.color.a >= 0.7 && spread(first.color) >= 24 && last.color.a <= 0.05 && luminance(first.color) > luminance(surface)
+		}))
+		return halo ? [{ element: el, message: "Chromatic radial halo on a dark surface", snippet: shortSnippet(el) }] : []
+	}).slice(0, 1),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/color/radial-spotlight-glow.test.ts

@@ -0,0 +1,27 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { radialSpotlightGlow } from "./radial-spotlight-glow"
+
+test("#given colored translucent spotlights and faint or opaque cousins #then only prominent low alpha glows report", () => {
+	const snapshot = buildSnapshot([{ style: { "background-color": "#0b0d13" }, children: Object.entries({
+		blue: "radial-gradient(circle, rgba(80,111,255,0.26), transparent 44%)",
+		rose: "radial-gradient(circle, rgba(255,90,120,0.12), rgba(255,90,120,0.28), transparent)",
+		hex: "radial-gradient(circle, #506fff66, transparent)",
+		faint: "radial-gradient(circle, rgba(26,189,226,0.1), transparent)",
+		opaque: "radial-gradient(circle, rgba(80,111,255,0.85), transparent)",
+		neutral: "radial-gradient(circle, rgba(255,255,255,0.35), transparent)",
+		linear: "linear-gradient(rgba(80,111,255,0.28), transparent)",
+	}).map(([id, image], i) => ({ id, text: "Section headline", rect: { width: 900, height: 600, y: i * 700 }, style: { "background-image": image } })) }])
+	expect(radialSpotlightGlow.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#blue", "#rose", "#hex"])
+})
+
+test("#given pale layers, small badges, bare panels and photo heroes #then only a bright photo overlay reports", () => {
+	const image = "radial-gradient(circle, rgba(139,92,246,0.42), transparent)"
+	const snapshot = buildSnapshot([
+		{ id: "photo", text: "Hero headline", rect: { width: 900, height: 600 }, style: { "background-image": `${image}, url(photo.jpg)` } },
+		{ id: "small", text: "Badge", rect: { width: 40, height: 40, y: 700 }, style: { "background-image": image } },
+		{ id: "bare", rect: { width: 900, height: 600, y: 800 }, style: { "background-image": image } },
+		{ id: "pale", text: "Pale headline", rect: { width: 900, height: 600, y: 1500 }, style: { "background-image": "radial-gradient(circle, rgba(63,227,223,0.2), transparent), linear-gradient(#ecf4f8, #ffffff)" } },
+	])
+	expect(radialSpotlightGlow.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#photo"])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/color/radial-spotlight-glow.ts

@@ -0,0 +1,33 @@
+import { blend, contrastRatio } from "../../core/color"
+import { isRendered, shortSnippet, styleOf, textElements } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { backdrop, effectiveOpacity, gradientStops, splitLayers, spread } from "./support/gradients"
+
+export const radialSpotlightGlow: PageRule = {
+	meta: {
+		id: "radial-spotlight-glow", name: "Decorative radial spotlight glow", category: "slop", severity: "warning", engine: "page",
+		description: "A translucent radial accent floats behind a section's copy.",
+		fixHint: "Remove the floating wash or use a deliberate material surface.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((el) => {
+		if (!isRendered(snapshot, el) || el.rect.width < 240 || el.rect.height < 160) return []
+		const layers = splitLayers(styleOf(el, "background-image"))
+		const index = layers.findIndex((layer) => layer.startsWith("radial-gradient("))
+		if (index < 0) return []
+		const stops = gradientStops(layers[index] ?? "")
+		const last = stops.at(-1)
+		const colors = stops.filter((s) => s.color.a > 0.05)
+		if (!last || last.color.a > 0.05 || colors.length === 0 || colors.length > 2 || colors.some((s) => s.color.a >= 0.45)) return []
+		const surface = backdrop(snapshot, el, layers.slice(index + 1).join(", "))
+		const prominent = colors.some((s) => {
+			const a = s.color.a * effectiveOpacity(snapshot, el)
+			return spread(s.color) > 24 && a >= 0.14 && (surface === null || contrastRatio(blend({ ...s.color, a }, surface), surface) >= 1.3)
+		})
+		if (!prominent) return []
+		const behindText = textElements(snapshot).some((text) => {
+			const r = text.rect
+			return r.x < el.rect.x + el.rect.width && r.x + r.width > el.rect.x && r.y < el.rect.y + el.rect.height && r.y + r.height > el.rect.y
+		})
+		return behindText ? [{ element: el, message: "A radial spotlight glows behind text", snippet: shortSnippet(el) }] : []
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/color/support/animation-opacity.ts

@@ -0,0 +1,78 @@
+import { ancestors, styleOf } from "../../../core/page"
+import { cssBlocks } from "../../../core/source"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { opacity } from "./gradients"
+
+function opacityFrames(snapshot: PageSnapshot, name: string): readonly { readonly at: number; readonly opacity: number }[] {
+	const frames: { at: number; opacity: number }[] = []
+	for (const css of snapshot.cssText) {
+		const marker = new RegExp(`@(?:-webkit-)?keyframes\\s+${name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\s*\\{`).exec(css)
+		if (!marker || marker.index === undefined) continue
+		const open = marker.index + marker[0].length - 1
+		let depth = 1
+		let end = open + 1
+		for (; end < css.length && depth > 0; end++) {
+			if (css[end] === "{") depth++
+			if (css[end] === "}") depth--
+		}
+		for (const block of cssBlocks(css.slice(open + 1, end - 1))) {
+			const value = /(?:^|;)\s*opacity\s*:\s*([\d.]+)/.exec(block.body)
+			if (!value) continue
+			for (const selector of block.selector.split(",")) {
+				const at = selector.trim() === "to" ? 100 : selector.trim() === "from" ? 0 : Number.parseFloat(selector)
+				if (Number.isFinite(at)) frames.push({ at, opacity: Number(value[1]) })
+			}
+		}
+	}
+	return frames.sort((a, b) => a.at - b.at)
+}
+
+function settled(snapshot: PageSnapshot, node: ElementSnapshot): number {
+	let value = opacity(node)
+	const names = styleOf(node, "animation-name").split(",").map((n) => n.trim())
+	const entries = names.flatMap((name, index) => {
+		const frames = !name || name === "none" ? [] : opacityFrames(snapshot, name)
+		return frames.length ? [{ name, index, frames }] : []
+	})
+	const at = (property: string, index: number, missing: string): string => {
+		const list = styleOf(node, property).split(",").map((n) => n.trim())
+		return list[index % list.length] || missing
+	}
+	for (const entry of entries) {
+		const count = at("animation-iteration-count", entry.index, "1")
+		const paused = at("animation-play-state", entry.index, "running") === "paused"
+		const composition = at("animation-composition", entry.index, "replace")
+		const vanishes = entry.frames.some((frame) => frame.opacity <= 0.1)
+		if (count === "infinite" && paused && value < 0.999 && composition === "replace" && vanishes) return 0
+	}
+	if (node.motion.includes("opacity")) {
+		const entry = entries.length === 1 ? entries[0] : undefined
+		if (!entry) return 0
+		const count = Number(at("animation-iteration-count", entry.index, "1"))
+		const fill = at("animation-fill-mode", entry.index, "none")
+		const composition = at("animation-composition", entry.index, "replace")
+		const duration = at("animation-duration", entry.index, "0s")
+		const delay = at("animation-delay", entry.index, "0s")
+		const seconds = (time: string): number => /^-?[\d.]+m?s$/.test(time) ? Number.parseFloat(time) / (time.endsWith("ms") ? 1000 : 1) : Number.NaN
+		if (!["forwards", "both"].includes(fill) || composition !== "replace" || !Number.isInteger(count) || count < 1
+			|| at("animation-play-state", entry.index, "running") !== "running"
+			|| !(seconds(duration) > 0 && Math.max(0, seconds(delay)) + seconds(duration) * count <= 60)) return 0
+		const direction = at("animation-direction", entry.index, "normal")
+		if (!["normal", "reverse", "alternate", "alternate-reverse"].includes(direction)) return 0
+		const last = direction === "normal" || (direction === "alternate" && count % 2 === 1) || (direction === "alternate-reverse" && count % 2 === 0)
+		const frame = entry.frames.find((candidate) => candidate.at === (last ? 100 : 0))
+		return frame?.opacity ?? 0
+	}
+	for (const entry of entries) {
+		const final = entry.frames.at(-1)
+		const count = at("animation-iteration-count", entry.index, "1")
+		if (count === "infinite" && final?.at === 100 && final.opacity <= 0.02) return 0
+		if (styleOf(node, "animation-fill-mode") === "" && count !== "infinite" && final?.at === 100
+			&& at("animation-play-state", entry.index, "running") !== "paused") value = final.opacity
+	}
+	return value
+}
+
+export function textOpacity(snapshot: PageSnapshot, el: ElementSnapshot): number {
+	return [el, ...ancestors(snapshot, el)].reduce((value, node) => value * settled(snapshot, node), 1)
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/color/support/color-path.ts

@@ -0,0 +1,15 @@
+import { parseColor } from "../../../core/color"
+import { fontSizePx, styleOf } from "../../../core/page"
+import type { ElementSnapshot } from "../../../types"
+
+const safeTags = new Set([
+	"blockquote", "nav", "a", "input", "textarea", "select", "pre", "code", "span", "th", "td", "tr", "li", "label", "button",
+	"hr", "html", "head", "body", "script", "style", "link", "meta", "title", "br", "img", "svg", "path", "circle", "rect",
+	"line", "polyline", "polygon", "g", "defs", "use",
+])
+
+export function bareText(el: ElementSnapshot): boolean {
+	if (!safeTags.has(el.tag)) return false
+	const fill = parseColor(styleOf(el, "background-color"))
+	return !(el.ownText.trim() && fontSizePx(el) >= 9 && ((fill?.a ?? 0) > 0.5 || styleOf(el, "background-image").includes("gradient")))
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/color/support/contrast-pairs.ts

@@ -0,0 +1,54 @@
+import { ancestors, isIgnored } from "../../../core/page"
+import type { PageHit } from "../../../rule"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { bareText } from "./color-path"
+import { textWhole } from "./painted-text"
+
+export type ContrastHit = PageHit & { readonly element: ElementSnapshot; readonly pair: string }
+
+const vendors = [
+	{ name: "Taboola", subtree: true, ids: ["taboola-", "internal_trc_"], prefixes: ["trc_rbox"], classes: ["trc_related_container"] },
+	{ name: "Swiper", subtree: false, ids: ["swiper-wrapper-"], prefixes: [], classes: ["swiper", "swiper-container", "swiper-wrapper", "swiper-slide"] },
+	{ name: "Slick", subtree: false, ids: [], prefixes: [], classes: ["slick-slider", "slick-list", "slick-track", "slick-slide", "slick-arrow"] },
+	{ name: "Slick", subtree: true, ids: [], prefixes: [], classes: ["slick-dots"] },
+	{ name: "SuperSlide", subtree: false, ids: [], prefixes: [], classes: ["tempWrap"] },
+	{ name: "react-fast-marquee", subtree: true, ids: [], prefixes: ["rfm-"], classes: [] },
+	{ name: "Kaltura", subtree: true, ids: [], prefixes: ["playkit-"], classes: ["kaltura-player", "kaltura-player-container"] },
+] as const
+
+function vendorOf(snapshot: PageSnapshot, el: ElementSnapshot): string | null {
+	for (const vendor of vendors) for (const node of vendor.subtree ? [el, ...ancestors(snapshot, el)] : [el]) {
+		const classes = (node.attributes["class"] ?? "").split(/\s+/)
+		if (vendor.ids.some((prefix) => (node.attributes["id"] ?? "").startsWith(prefix))
+			|| classes.some((token) => vendor.classes.some((name) => name === token) || vendor.prefixes.some((prefix) => token.startsWith(prefix)))) return vendor.name
+	}
+	return null
+}
+
+export function distinctPairs(snapshot: PageSnapshot, hits: readonly ContrastHit[]): readonly PageHit[] {
+	const groups = new Map<string, ContrastHit[]>()
+	const safeOwners = new Map<string, string | null>()
+	for (const hit of hits) {
+		if (isIgnored(snapshot, hit.element, "low-contrast")) continue
+		const vendor = vendorOf(snapshot, hit.element)
+		if (bareText(hit.element)) {
+			if (safeOwners.has(hit.pair) && safeOwners.get(hit.pair) !== vendor) continue
+			safeOwners.set(hit.pair, vendor)
+		}
+		const key = `${hit.pair}|${vendor ?? "page"}`
+		const group = groups.get(key) ?? []
+		group.push(hit)
+		groups.set(key, group)
+	}
+	return [...groups.values()].flatMap((group) => {
+		const whole = group.find((hit) => textWhole(snapshot, hit.element)) ?? group[0]
+		const owner = (whole?.element.ownText.match(/\p{L}/gu)?.length ?? 0) >= 2 ? whole
+			: group.find((hit) => textWhole(snapshot, hit.element) && (hit.element.ownText.match(/\p{L}/gu)?.length ?? 0) >= 2) ?? whole
+		if (!owner) return []
+		return [{
+			element: owner.element,
+			message: `${owner.message}${group.length > 1 ? ` (and ${group.length - 1} more)` : ""}`,
+			snippet: owner.snippet,
+		}]
+	})
+}