fix(auth): darken muted sign-in text to meet WCAG AA - #232
Conversation
--muted-foreground was #999, which carries the 13px terms line, the "Recover with backup email" link, and the "powered by Certified" footer. Measured against the two backgrounds those actually sit on: #999 on #F8F8F8 (card) 2.68:1 #999 on #E8E8E8 (page) 2.33:1 Both are far below the 4.5:1 WCAG AA minimum for normal-size text, and below even the 3.0:1 large-text threshold that does not apply at 13px anyway. Use #666 (5.41:1 and 4.69:1). #6b6b6b was the value originally proposed alongside the spam-folder hint in #221, but it clears AA only on the card: .powered-by lives in .page-wrap outside .container, so it renders on the page background where #6b6b6b reaches just 4.35:1 and still fails. #666 passes on both, and is a conventional shorthand. Extracted from #221, where it rode along as an undocumented global change. The hint that motivated it is gone — superseded by the resend-time message — but the contrast defect predates that PR and stands on its own. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: 9b6b1f6 The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 53 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
🚅 Deployed to the ePDS-pr-232 environment in ePDS
|
There was a problem hiding this comment.
Pull request overview
This PR updates the auth-service sign-in page’s “muted” text color token to improve readability and meet WCAG AA contrast for small (13px) text on both the card and page backgrounds, and documents the user/operator impact via a changeset.
Changes:
- Darken
--muted-foregroundon the sign-in page from#999to#666. - Add a changeset describing the accessibility/readability improvement and the operator-facing CSS variable change.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
packages/auth-service/src/routes/login-page.ts |
Updates the inline CSS --muted-foreground variable used by small muted UI text on the sign-in page. |
.changeset/muted-text-contrast-on-sign-in.md |
Adds release notes describing the end-user contrast improvement and operator guidance if overriding branding CSS. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Coverage Report for CI Build 30914465432Coverage remained the same at 57.672%Details
Uncovered ChangesNo uncovered changes found. Coverage RegressionsNo coverage regressions found. Coverage Stats
💛 - Coveralls |
.divider ("or continue with", "or use email") hard-coded color: #999
at 13px instead of using the variable, so darkening
--muted-foreground left it behind at 2.68:1 — the same defect this
branch exists to fix, in the one place that had opted out of the
variable.
Point it at var(--muted-foreground). Side effect worth noting: the
divider now honours a branding.css override of --muted-foreground,
which it previously ignored.
Caught by Copilot in review of #232.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Good catch — fixed in 6ed3d05.
It now uses (reply generated by Claude Opus 5 via Claude Code) |
Both shots are of real Railway preview deployments rather than a local mock: the "before" is PR #229's preview, which still serves --muted-foreground: #999, and the "after" is this branch's own preview at #666. Captured on the OTP step so three of the variable's consumers are in frame at once — the terms line, the "Recover with backup email" link, and the "Powered by Certified" footer, the last of which sits on the page background rather than the card and is the reason #666 was needed over #6b6b6b. Computed colours at capture time confirm the swap reached every consumer: rgb(153,153,153) before, rgb(102,102,102) after. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The changeset filed the --muted-foreground override advice under
Operators, but branding.css is not an operator surface: it is a field
in the client's own client-metadata.json, and docs/configuration.md,
docs/tutorial.md and every prior CHANGELOG entry that mentions it
address client app developers.
An operator's only involvement is gating which client_ids may inject
CSS at all, via PDS_OAUTH_TRUSTED_CLIENTS — they never author the
file, so the adaptation instruction was pointed at the wrong reader.
Reattribute to Client app developers and reword accordingly ("your
override" rather than a third party's). Also note explicitly that a
value chosen to sit alongside the old #999 may itself be below AA,
which is the actionable part for anyone who did set it.
Raised by @aspiers in review of #232.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 4 changed files in this pull request and generated no new comments.
Suppressed comments (1)
.changeset/muted-text-contrast-on-sign-in.md:11
- PR description says the divider side effect is noted in the changeset’s Operators section, but this changeset only lists “End users, Client app developers” in Affects: and has no Operators section. Either add Operators to the changeset (and document the divider/branding override impact there) or update the PR description so the release notes and PR narrative agree.
**Affects:** End users, Client app developers
**End users:** the 13px grey text — the terms line, the "Recover with backup email" link, the "or continue with" / "or use email" separators, and the "powered by Certified" footer — was too light to meet the WCAG AA contrast minimum against either the card or the page background behind it. It is now dark enough to pass on both.
**Client app developers:** the `--muted-foreground` custom property on the sign-in page changes from `#999` to `#666`. If your `branding.css` sets it, check your value clears 4.5:1 against both `#F8F8F8` (the card) and `#E8E8E8` (the page) — the old default reached only 2.68:1 and 2.33:1 respectively, so a value chosen to sit alongside it may be equally low. The separator text between the social and email sign-in options now follows `--muted-foreground` too, where it previously ignored your override and stayed grey.
Screenshots for a pull request are review ephemera. They have no value to the codebase, they are binaries that git keeps forever, and GitHub already hosts images attached to a PR body for free. f4ff99f introduced docs/screenshots/ for #232 and it holds nothing but those two files, so removing them takes the directory with it. The three added for #220 were dropped from that branch before merge. The blobs stay reachable in history; purging them would mean rewriting main, which is not worth it for ~100KB. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
What
Changes
--muted-foregroundon the sign-in page from#999to#666, and routes.dividerthrough that variable instead of its own hard-coded#999.Why
--muted-foregroundcarries the 13px terms line, the "Recover with backup email" link, the "or continue with" / "or use email" separators, and the "powered by Certified" footer. Measured against the two backgrounds those elements actually sit on:#F8F8F8#E8E8E8#999(current)#6b6b6b#666(this PR)Both current values fall far below the 4.5:1 WCAG AA minimum for normal-size text — and below even the 3.0:1 large-text threshold, which does not apply at 13px anyway.
Screenshots
Both are real Railway preview deployments, not local mocks. The OTP step is shown so three consumers of the variable are in frame at once.
Before: muted text at
#999— washed out against the card, and worse against the page background behind the footer.After: the same elements at
#666, clearing AA on both backgrounds.Computed colours at capture time confirm the swap reached every consumer:
rgb(153,153,153)before,rgb(102,102,102)after, for.terms,.recovery-linkand.powered-byalike.Why
#666and not#6b6b6b#6b6b6bwas the value proposed alongside the spam-folder hint in #221, but it clears AA only against the card..powered-bylives in.page-wrapoutside.container, so it renders against the page background — visible in the screenshots above as the lighter band below the card — where#6b6b6breaches just 4.35:1 and still fails at 13px.#666passes on both and is a conventional shorthand.The
.dividerfollow-upCopilot caught that
.divider("or continue with", "or use email") hard-codedcolor: #999at 13px rather than using the variable, so darkening--muted-foregroundwould have left it behind at 2.68:1 — the same defect, in the one place that had opted out of the mechanism being fixed. Fixed in 6ed3d05.Side effect worth recording: the divider now honours a
branding.cssoverride of--muted-foreground, which it previously ignored. Noted in the changeset's operator section. It does not appear in the screenshots because dividers only render when social providers are configured.Provenance
Extracted from #221, where it rode along as an undocumented global change justified by a hint element that PR was adding. That hint is superseded by a resend-time message in #220, so the original motivation is gone — but the contrast defect predates #221 and stands on its own.
Testing
format,lint,typecheckall pass; 1084 unit tests pass. Contrast ratios computed with the WCAG 2.x relative-luminance formula.🤖 Generated with Claude Code