From a773bc4932e081f3de6b763f8d9467cd1eef989b Mon Sep 17 00:00:00 2001 From: Nibu Date: Mon, 9 Nov 2026 20:37:16 +0000 Subject: [PATCH] auth: Noonday Sky login card opaque, so text and link pass AA over any terrain Libby's read: at 54% fill Noonday text was 2.99:1 and the Register link 2.06:1 over shaded terrain. Dark text on a light bubble fails when a dark ground shows through, so Noonday's card now takes the bubble colour with no transparency. Midnight is unchanged (54%). WCAG 2.x ratios, computed (relative luminance, sRGB): Noonday, bubble #b9b6af, text #342d25, link #2a4f27, card over black / white: 54% fill: text 2.23 / 9.51, link 1.54 / 6.55 (fails over dark) 80% fill: text 4.36 / 7.86, link 3.00 / 5.42 (fails over dark) 90% fill: text 5.44 / 7.24, link 3.75 / 4.99 (link fails over dark) 100% fill: text 6.70, link 4.62, independent of backdrop and blur Midnight, bubble #0a090e, text #aeccff, link #609385, 54% fill: over black text 12.49, link 5.83; over white text 2.62, link 1.22 (white is not in the night scene; 4.5:1 over the horizon glow is an estimate, not measured) Co-Authored-By: Claude Sonnet 5.5 --- src/app/pages/auth/styles.css.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/app/pages/auth/styles.css.ts b/src/app/pages/auth/styles.css.ts index 9a4240f0..06339710 100644 --- a/src/app/pages/auth/styles.css.ts +++ b/src/app/pages/auth/styles.css.ts @@ -56,9 +56,12 @@ export const AuthFooter = style({ // signed-out ground is clear and the card is a translucent, blurred pane shaped like a message // bubble (BubbleContent: radius R500, no border), filled with the sky's bubble colour. The // --sky-bubble variables come from the sky theme (PR #22); the plain colours are the fallback -// until it lands. The fill is 54%, the least that gives 4.5:1 text over the brightest backdrop (the -// horizon glow) without depending on the blur; it is >= 7.3:1 elsewhere in the scene. The 18px blur +// until it lands. The fill is 54% in Midnight Sky (light text on a near-black bubble: 12.5:1 over a +// black backdrop; 54% was estimated as the least for 4.5:1 over the horizon glow). The 18px blur // only softens the sky and ridges behind the text. +// Noonday Sky is dark text on a light bubble, so the dark ground behind a translucent card is what +// fails it (Libby: 2.99:1 text, 2.06:1 Register link at 54%). Its card is opaque: bubble #b9b6af +// holds text #342d25 at 6.70:1 and the link #2a4f27 at 4.62:1 whatever is behind it, blur or not. // The card is also made shorter so it leaves more of the scene visible on a phone. const scene = ':root[data-scene]'; globalStyle(`${scene} ${AuthLayout}`, { @@ -76,6 +79,9 @@ globalStyle(`${scene} ${AuthCard}`, { borderColor: 'rgba(183, 199, 217, 0.14)', backdropFilter: 'blur(18px)', }); +globalStyle(`${scene} body.noonday-sky ${AuthCard}`, { + backgroundColor: 'var(--sky-bubble, #b9b6af)', +}); globalStyle(`${scene} ${AuthHeader}`, { backgroundColor: 'transparent', });