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

Feat: fallback background color #2524

Merged

Conversation

angela-tran
Copy link
Member

@angela-tran angela-tran commented Nov 14, 2024

Part of #2490

This PR will be merged in to #2523.

I think it makes sense for the changes from both PRs to be merged into main together, but I also wanted to have separate code reviews.

Fallback background color

I took the color from the left side of the background image and used that as the background-color for the main section of the landing page.

The WebAIM contrast checker shows this contrast ratio passes WCAG AAA requirements.

Screenshots of background-color in use (background image does not load)

Desktop Mobile
image localhost_11369_(Moto G Power)

@angela-tran angela-tran self-assigned this Nov 14, 2024
@github-actions github-actions bot added the front-end HTML/CSS/JavaScript and Django templates label Nov 14, 2024
Copy link

github-actions bot commented Nov 14, 2024

Coverage report

This PR does not seem to contain any modification to coverable code.

@angela-tran angela-tran marked this pull request as ready for review November 14, 2024 22:55
@angela-tran angela-tran requested a review from a team as a code owner November 14, 2024 22:55
@angela-tran angela-tran marked this pull request as draft November 14, 2024 22:56
@angela-tran angela-tran marked this pull request as ready for review November 14, 2024 23:02
ideally, the user's browser supports WebP and will show the image, but
just in case it doesn't, we want the white text to be readable.

use the same color as the left side of the background image. this
contrast ratio passes WCAG AAA requirements.
@angela-tran angela-tran force-pushed the feat/fallback-background-color branch from d7bb130 to 48995b3 Compare November 14, 2024 23:03
Copy link
Member

@thekaveman thekaveman left a comment

Choose a reason for hiding this comment

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

👍

@angela-tran angela-tran merged commit fb1b473 into feat/webp-background-image Nov 15, 2024
9 checks passed
@angela-tran angela-tran deleted the feat/fallback-background-color branch November 15, 2024 22:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
front-end HTML/CSS/JavaScript and Django templates
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants