Skip to content

Fix demo login hint contrast - #11340

Open
LyraZeta wants to merge 1 commit into
marmelab:masterfrom
LyraZeta:fix/demo-login-hint-contrast
Open

Fix demo login hint contrast#11340
LyraZeta wants to merge 1 commit into
marmelab:masterfrom
LyraZeta:fix/demo-login-hint-contrast

Conversation

@LyraZeta

Copy link
Copy Markdown

Problem

The demo login hint uses MUI's text.disabled color. In the current light theme this renders as rgba(0, 0, 0, 0.38) on white, giving the 16px regular text a measured contrast ratio of 2.68:1. WCAG AA requires 4.5:1 for text at this size.

Solution

Use the existing text.secondary theme token for the hint. It preserves the visual hierarchy while giving the instructional text readable contrast.

How To Test

  1. Open https://marmelab.com/react-admin-demo/#/login at a 390x844 viewport.
  2. Inspect the computed color of Hint: demo / demo against the white login card.
  3. Before this change: 2.68:1 (rgba(0, 0, 0, 0.38) on white).
  4. After this change: the hint uses the theme's text.secondary token.

Validation performed locally:

  • prettier@3.2.5 --check examples/demo/src/layout/Login.tsx
  • git diff --check

The full repository install did not finish in this environment, so I could not run the project-wide ESLint command locally.

Additional Checks

  • The PR targets master for a bugfix or a documentation fix, or next for a feature
  • The PR includes unit tests (not added: this is a one-token visual contrast correction in the demo application)
  • The PR includes one or several stories (not applicable to the demo login page)
  • The documentation is up to date (no public API or documentation change)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant