GameCult/Ratatoskr
Watch
9
0
Fork
You've already forked Ratatoskr
 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

auth: Noonday Sky login card opaque, so text and link pass AA over any terrain
Some checks failed
Build pull request / Build pull request (pull_request) Has been cancelled
Details

Browse source 
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 <noreply@anthropic.com>
This commit is contained in:
Nibu 2026-11-09 20:37:16 +00:00
commit a773bc4932
1 changed files with 8 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/app/pages/auth/styles.css.ts
View file

@ -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',
});