Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Increase font weight in detail page tabs labels to improve contrast. #8505

Closed
wants to merge 1 commit into from

Conversation

isoos
Copy link
Collaborator

@isoos isoos commented Jan 29, 2025

Fixes #8306

I've tried to find different (red) color combinations for the dark mode, but it turns out the issue was more about the thin font over the dark gray background. Once the weight is increased, Lighthouse seems to be happier with the contrasts.

Before/after in light mode:
image
image

Before/after in dark mode:
image
image

An alternative could be to apply the font width only in the dark theme.

@isoos isoos requested review from jonasfj and sigurdm January 29, 2025 10:48
@isoos
Copy link
Collaborator Author

isoos commented Jan 29, 2025

/cc @parlough

Copy link
Member

@jonasfj jonasfj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Curious if @parlough has any thoughts?

@parlough
Copy link
Member

parlough commented Feb 3, 2025

I think this is fine if necessary, but instead or in addition, a color with a higher lightness could be used in dark mode, such as #ff6666. Still ends up red but a bit less harsh.

Example of the higher-lightness red being used in the taps mneu

@isoos
Copy link
Collaborator Author

isoos commented Feb 7, 2025

Closing in favor of #8533.

@isoos isoos closed this Feb 7, 2025
@isoos isoos deleted the contrast branch February 7, 2025 09:11
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.

Red tab text on account pages too low contrast in dark mode
3 participants