🎨 Palette: Improve contrast for secondary labels#32
Conversation
- Increased contrast for small text in .spec-cell, .req-card, and .team-info - Switched from --gray-400 (#9aa0a6) to --gray-700 (#5f6368) to meet WCAG AA (4.5:1) - Added learning to .Jules/palette.md regarding targeted accessibility overrides Co-authored-by: christopherfoxjr <213370400+christopherfoxjr@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
Deploying cybr with
|
| Latest commit: |
bb94d76
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://1006296f.cybr.pages.dev |
| Branch Preview URL: | https://palette-contrast-fix-6159305.cybr.pages.dev |
Deploying foxos with
|
| Latest commit: |
bb94d76
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://f67eadd1.foxos.pages.dev |
| Branch Preview URL: | https://palette-contrast-fix-6159305.foxos.pages.dev |
Deploying wolfos with
|
| Latest commit: |
bb94d76
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://0766f484.wolfos.pages.dev |
| Branch Preview URL: | https://palette-contrast-fix-6159305.wolfos.pages.dev |
1 participant
💡 What
This PR increases the color contrast for secondary labels (small text) across the "Components", "Requirements", and "Team" sections of the main landing page.
🎯 Why
The original design used
--gray-400(#9aa0a6) for these labels, which resulted in a contrast ratio of approximately 2.85:1 against the white background. This falls short of the WCAG 2.1 AA requirement of 4.5:1 for small text, making the interface difficult to read for users with visual impairments.♿ Accessibility Improvements
--gray-400token, which is still used for decorative or non-text elements where high contrast is less critical.🎨 Visual Polish
The labels now have a more grounded, readable appearance (
var(--gray-700)) while maintaining the intended visual hierarchy of the section.🧪 Verification
verify_contrast.py) that calculates the contrast ratio of live elements viagetComputedStyle.verification.pngconfirms the layout remains clean and professional..Jules/palette.md.PR created automatically by Jules for task 6159305055654974357 started by @christopherfoxjr