From 48995b3492594c9cbae24a45447f75c06a6715dc Mon Sep 17 00:00:00 2001 From: Angela Tran Date: Thu, 14 Nov 2024 18:45:15 +0000 Subject: [PATCH] style(homepage): set background-color for better contrast with text 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. --- benefits/static/css/styles.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index b74b4b4e0..a2021612b 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -843,6 +843,7 @@ a.card:focus-visible { --landing-main-height: calc(100vh - 80px); /* Header Height (80px) */ --landing-background: url("/static/img/benefits-bg-mobile.webp") no-repeat var(--primary-color); + --landing-background-fallback-color: #1a1b16; /* same color the left side of the background image */ --landing-box-background: var(--bs-white); --landing-box-border: 12px solid var(--primary-color); --landing-text-color: var(--text-primary-color); @@ -865,6 +866,7 @@ a.card:focus-visible { .landing main#main-content { background: var(--landing-background); background-size: cover; + background-color: var(--landing-background-fallback-color); } .landing main#main-content .container .row:first-child {