UI/UX: Low-contrast secondary text color in global theme token#4158
Open
Nam0101 wants to merge 1 commit intoapache:masterfrom
Open
UI/UX: Low-contrast secondary text color in global theme token#4158Nam0101 wants to merge 1 commit intoapache:masterfrom
Nam0101 wants to merge 1 commit intoapache:masterfrom
Conversation
The LESS variable `text-color-secondary` is set to `#c0c0ca`, which has poor contrast on light backgrounds (commonly white in Ant Design layouts). Because this token is used globally, secondary labels, helper text, and metadata can become hard to read for low-vision users and may fail WCAG AA contrast requirements. Affected files: vite.config.ts Signed-off-by: Nguyen Van Nam <nam.nv205106@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Hi there! 👋
While exploring the codebase, I noticed a minor opportunity for improvement in
amoro-web/vite.config.ts.Context:
The LESS variable
text-color-secondaryis set to#c0c0ca, which has poor contrast on light backgrounds (commonly white in Ant Design layouts). Because this token is used globally, secondary labels, helper text, and metadata can become hard to read for low-vision users and may fail WCAG AA contrast requirements.Proposed fix:
Increase contrast by replacing the token with a darker value that meets AA on white, e.g.:
'text-color-secondary': '#595959',(or another color with >= 4.5:1 contrast for normal text). Update incss.preprocessorOptions.less.modifyVars.Files changed:
amoro-web/vite.config.ts(modified)(Note: Tested the changes locally to ensure everything works as expected. Let me know if you need any adjustments, happy to help!)
——
NamNV
📍 Hanoi, Vietnam
📧 nam.nv205106@gmail.com
Closes #4157