fix(frontend): audit and fix WCAG AA colour contrast (closes #382) by Olajcodes · Pull Request #453 · Stellar-Ecosystem/lodestar

Olajcodes · 2026-07-29T09:44:48Z

Summary

Closes #382

Audits all design-token colour pairings against WCAG AA thresholds, fixes three failing tokens, and adds an automated contrast test to prevent regressions.

Contrast Audit Results

Token	Before	Ratio on bg	After	New Ratio	Status
accent	`#E85D3A`	3.31:1	`#C2410C`	4.95:1	✅ AA
success	`#22C55E`	2.18:1	`#15803D`	4.80:1	✅ AA
error	`#EF4444`	3.60:1	`#DC2626`	4.62:1	✅ AA
secondary	`#6B6B6B`	5.10:1	(unchanged)	5.10:1	✅ AA
primary	`#1A1A1A`	16.64:1	(unchanged)	16.64:1	✅ AA

All pairings now meet WCAG AA for normal text (≥4.5:1) and large text (≥3:1).

Changes

`tailwind.config.ts`

accent: #E85D3A → #C2410C (orange-700)
success: #22C55E → #15803D (green-700)
error: #EF4444 → #DC2626 (red-600)

`globals.css`

Updated --accent, --success, --error CSS variables to match

`tests/contrast.test.ts` (new)

Automated Jest suite with 16 assertions across 4 test groups:
- Text tokens on #FAFAF7 background (5 pairings)
- White text on coloured backgrounds (4 pairings)
- Text tokens on white/card backgrounds (5 pairings)
- Large-text threshold verification
- Hex format sanity check
Guards against regressions when design tokens change

Testing

TypeScript typecheck: ✅ passed
Jest tests: 17 passed, 2 pre-existing failures (unrelated)
New contrast test: 16/16 assertions passing

Summary by CodeRabbit

Accessibility
- Improved form label associations and field identification.
- Updated color contrast for success, error, and light-theme accents.
- Strengthened input focus visibility and added WCAG contrast coverage.
Bug Fixes
- Improved registration form validation, including price entry and submit checks.
- Prevented misleading TTL warnings when service timing data is invalid or unavailable.
- Improved theme rendering consistency across the application.

…Ecosystem#382) Audit all design-token colour pairings against WCAG AA (4.5:1 normal text, 3:1 large text) and fix the three tokens that fell below the threshold. Before → After (ratio on #FAFAF7 background): accent: #E85D3A (3.31:1) → #C2410C (4.95:1) success: #22C55E (2.18:1) → #15803D (4.80:1) error: #EF4444 (3.60:1) → #DC2626 (4.62:1) Changes: - tailwind.config.ts: updated accent, success, error hex values - globals.css: updated --accent, --success, --error CSS variables - __tests__/contrast.test.ts: new automated Jest suite that validates all text-on-bg, white-on-colour, and text-on-white pairings against WCAG AA thresholds (16 assertions)

drips-wave · 2026-07-29T09:44:55Z

@Olajcodes Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

coderabbitai · 2026-07-29T09:44:56Z

📝 Walkthrough

Walkthrough

The backend hardens TTL-warning handling, updates test isolation, and adds dependencies. The frontend improves form accessibility and validation, stabilizes theme rendering, and adds WCAG contrast checks with updated color tokens.

Changes

Backend hardening

Layer / File(s)	Summary
Backend runtime and test setup `backend/package.json`, `backend/test/demo.test.js`	Adds `pino-http` and `rate-limit-redis`. Mocks service initialization, restores global stubs, and simulates cancellation through `fetch`.
TTL warning validation `backend/src/routes/registry.js`	Validates ledger and registration values as finite numbers before calculating `ttl_warning`. Invalid values return a shallow service copy without the annotation.

Frontend accessibility and form behavior

Layer / File(s)	Summary
Form accessibility and validation `frontend/components/RegisterForm.tsx`, `frontend/__tests__/RegisterForm.test.tsx`	Adds control IDs and label associations, changes price input handling, and recalculates submit validity from current form values. Fixes two test render calls.
Theme provider rendering and tests `frontend/components/ThemeProvider.tsx`, `frontend/__tests__/Navbar.test.tsx`	The theme provider now wraps children on every render. Navbar tests mock a light theme and theme toggle.
Contrast tokens and automated checks `frontend/app/globals.css`, `frontend/tailwind.config.ts`, `frontend/__tests__/contrast.test.ts`	Updates color tokens and focus styling. Adds WCAG 2.1 contrast-ratio and six-digit hex-value tests.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

Stellar-Ecosystem/lodestar#458: Overlaps with the WCAG contrast tests and frontend accessibility color updates.
Stellar-Ecosystem/lodestar#499: Overlaps with the ThemeProvider, theme CSS variables, Tailwind colors, and Navbar tests.
Stellar-Ecosystem/lodestar#470: Overlaps with the ttl_warning validation logic in registry.js.

Suggested reviewers: ritik4ever, nemenwq

🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (2 warnings, 1 inconclusive)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The PR includes unrelated backend dependency, registry, form, theme-provider, and test changes beyond the linked contrast-audit issue.	Remove the unrelated changes or move them into separate pull requests unless they are required and documented conflict-resolution changes.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Linked Issues check	❓ Inconclusive	The contrast fixes and automated assertions are evidenced, but documentation of before-and-after ratios is not shown in the review summary.	Add or identify documentation that records the failing colour pairings with their before-and-after contrast ratios.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the frontend WCAG AA contrast audit and fixes, which are the primary changes.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

ritik4ever · 2026-07-31T11:37:43Z

Hi @Olajcodes,

This PR could not be merged because it has merge conflicts with the target branch.

Please resolve the merge conflicts, push the updated changes, and the PR can be reviewed and merged.

Thank you!

Olajcodes · 2026-07-31T11:47:13Z

@ritik4ever I have resolved the conflicts. Kindly check through and merge

…-contrast

…oses Stellar-Ecosystem#382) The previous main merge (210d136) introduced duplicate color keys in tailwind.config.ts, which broke tsc (TS1117) and silently neutralized the success/error contrast fixes. Resolve the conflict properly: keep main's var() references for theme colors (dark-mode aware) and the WCAG AA-fixed hexes for success (#15803D) and error (#DC2626). Also resolves the remaining pre-existing CI failures inherited from main (all verified identical to upstream/main, fixes reused from the fix/381 and fix/383 branches): - Frontend: drop unsupported focus:ring-primary/30 opacity modifier (CSS-var color) in globals.css; ThemeProvider always renders its context so useTheme no longer crashes during prerender; RegisterForm labels now use htmlFor/id, price input uses type=text + inputMode=decimal, submit disabled via live validation; fixed 2 syntax errors in RegisterForm.test.tsx; mocked useTheme in Navbar.test.tsx (jsdom lacks matchMedia). - Backend: add missing pino-http and rate-limit-redis deps; remove duplicate annotateTtlWarning declaration; demo tests mock services.js and stub global fetch for the AbortError path. - Contract: bump ethnum 1.5.2 -> 1.5.3 in Cargo.lock (current stable Rust cannot compile 1.5.2). Validated locally: frontend tsc + next build + 21/21 suites (128 tests), backend 310/310 tests + npm ci under node 22, contrast suite 16/16.

coderabbitai

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/__tests__/contrast.test.ts`:
- Around line 40-53: Update the contrast test’s TOKENS setup to consume the
production color tokens from the existing shared configuration, such as
globals.css or tailwind.config.ts, instead of duplicating hex values locally.
Ensure contrast calculations use the current configured values, including
BACKGROUND, FOREGROUND, and each TOKENS entry.

In `@frontend/app/globals.css`:
- Line 69: Update the input styling in frontend/app/globals.css at lines 69-69
to use a border token with at least 3:1 contrast against --background, replacing
border-border while preserving the other styles. Add a corresponding 3:1
contrast assertion for border against BACKGROUND in
frontend/__tests__/contrast.test.ts at lines 120-125.

In `@frontend/tailwind.config.ts`:
- Line 20: Update the error token in frontend/tailwind.config.ts at lines 20-20
to a darker value that achieves at least 4.5:1 contrast when rendered over the
5% error-tinted background. In frontend/__tests__/contrast.test.ts lines 94-108,
composite the error color at 5% opacity over BACKGROUND and assert text-error
contrast against the resulting color.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: f921e7d1-039a-435a-afea-af14c8db96e1

📥 Commits

Reviewing files that changed from the base of the PR and between 0546692 and 6cc7bd5.

⛔ Files ignored due to path filters (2)

backend/package-lock.json is excluded by !**/package-lock.json
contract/Cargo.lock is excluded by !**/*.lock

📒 Files selected for processing (10)

backend/package.json
backend/src/routes/registry.js
backend/test/demo.test.js
frontend/__tests__/Navbar.test.tsx
frontend/__tests__/RegisterForm.test.tsx
frontend/__tests__/contrast.test.ts
frontend/app/globals.css
frontend/components/RegisterForm.tsx
frontend/components/ThemeProvider.tsx
frontend/tailwind.config.ts

💤 Files with no reviewable changes (2)

frontend/components/ThemeProvider.tsx
backend/src/routes/registry.js

Olajcodes · 2026-08-02T10:00:32Z

@ritik4ever kindly merge. All checks passed already.

Merge branch 'main' into fix/382-audit-color-contrast

210d136

Olajcodes added 2 commits August 2, 2026 09:17

Merge remote-tracking branch 'upstream/main' into fix/382-audit-color…

a95205e

…-contrast

Olajcodes requested a review from ritik4ever as a code owner August 2, 2026 09:41

coderabbitai Bot reviewed Aug 2, 2026

View reviewed changes

Comment thread frontend/__tests__/contrast.test.ts

Comment thread frontend/app/globals.css

Comment thread frontend/tailwind.config.ts

coderabbitai Bot mentioned this pull request Aug 2, 2026

fix(frontend): add skip-to-content link for keyboard users (closes #381) #452

Open

4 tasks

Navigation Menu

Uh oh!

fix(frontend): audit and fix WCAG AA colour contrast (closes #382) - #453

fix(frontend): audit and fix WCAG AA colour contrast (closes #382)#453
Olajcodes wants to merge 4 commits into
Stellar-Ecosystem:mainfrom
Olajcodes:fix/382-audit-color-contrast

Olajcodes commented Jul 29, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

drips-wave Bot commented Jul 29, 2026

Uh oh!

coderabbitai Bot commented Jul 29, 2026 •

edited

Loading

Walkthrough

Changes

❌ Failed checks (2 warnings, 1 inconclusive)

Uh oh!

ritik4ever commented Jul 31, 2026

Uh oh!

Olajcodes commented Jul 31, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Olajcodes commented Aug 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

Olajcodes commented Jul 29, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Contrast Audit Results

Changes

tailwind.config.ts

globals.css

__tests__/contrast.test.ts (new)

Testing

Summary by CodeRabbit

Uh oh!

drips-wave Bot commented Jul 29, 2026

Uh oh!

coderabbitai Bot commented Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

❌ Failed checks (2 warnings, 1 inconclusive)

Uh oh!

ritik4ever commented Jul 31, 2026

Uh oh!

Olajcodes commented Jul 31, 2026

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Olajcodes commented Aug 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Olajcodes commented Jul 29, 2026 •

edited by coderabbitai Bot

Loading

`tailwind.config.ts`

`globals.css`

`tests/contrast.test.ts` (new)

coderabbitai Bot commented Jul 29, 2026 •

edited

Loading