From fadde5ad5abc6a694a4cff9e93d8fce405b25e8c Mon Sep 17 00:00:00 2001
From: Sergey Kozyrenko <sirozha_blr@tut.by>
Date: Fri, 24 Jul 2026 19:34:09 +0700
Subject: [PATCH] fix(e2e): composite text colour onto its own ground before
 measuring contrast
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`paint()` clears to transparent and the label was painted alone, so a
translucent text token kept its opaque base: 30% black on white measured 21:1
instead of 2.12:1 — a failing token reported as perfect contrast. Paint the
label on the same layer stack as the surface.

No probed token is translucent today, so every current reading is unchanged
(7/7 still pass); this stops the helper lying about the next one.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/e2e/helpers/contrast.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/e2e/helpers/contrast.ts b/frontend/e2e/helpers/contrast.ts
index a8e361d4..463f456e 100644
--- a/frontend/e2e/helpers/contrast.ts
+++ b/frontend/e2e/helpers/contrast.ts
@@ -138,11 +138,14 @@ export const measureContrast = async (page: Page, probe: string): Promise<number
             return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
         };
 
-        const surface = paint(
+        // The text goes on top of the same stack, not on its own: `paint` starts from transparent,
+        // where a translucent colour keeps its opaque base and reads as a contrast it does not have.
+        const ground = [
             getComputedStyle(element.parentElement).backgroundColor,
             getComputedStyle(element).backgroundColor,
-        );
-        const label = paint(getComputedStyle(element).color);
+        ];
+        const surface = paint(...ground);
+        const label = paint(...ground, getComputedStyle(element).color);
         const [high = 0, low = 0] = [luminance(label), luminance(surface)].sort((a, b) => b - a);
 
         return (high + 0.05) / (low + 0.05);