Text fails contrast in banner

The Color Contrast Analyzer plugin for Chrome is better than most for gradients & background images.

This tool actually compares pixel by pixel color contrasts so that you can see (as per your image) what the contrast is on the page.

Thanks for highlighting this!

Usually it is a best practice to have a background (with some opacity sometimes) between the text and the image/gradient. Makes it easier to nail the color contrast.

Discussed with @eli-t at DrupalEurope. We should try overlaying the image with a CSS generated translucent dark shim (only for breakpoints where the text overlays the image). This shim could also use a vignette to avoid darkening the entire image. Easiest to experiment in the browser once we have a patch, we'll want to review the impact on the hero banner's look and feel.

@mikael_ek, @mrmauriziorusso and me are starting on this issue now at Drupal Europe.

Here's a patch that add a gradient overlay which should darken the area below the text (if media query fits) and make it more readable. It's tested with Contrast Analyser.

Patch in #8 fixes the banner text over the image. Have created a related issue regarding text in general.

+++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
@@ -53,9 +53,20 @@
+    background: linear-gradient(to right, rgba(0,0,0,.40) 40%, rgba(0,0,0,0));

This does affect the design quite a lot. It seems like @kjay already mentioned this on #5 but would be still great to get sign off from him.

There's also some stylelint warnings on the changes. You can see the failures by running command yarn run lint:css inside the /core folder.

I fixed lint errors and added screenshot from Color Contrast Analyzer plugin after applying the patch.

I updated my previous patch, added double colons to 'before'.

I did tests and code review for #14 and the image looks really dark with such mask. Also, this path doesn't resolve the link button contrast issue mentioned in issue description.
I've made another patch, that makes transparency dark background under the text and link button and a bit darker background for the link button (check screens). It passes Level AAA, Medium Bold and Large Non-Bold Text (4.5:1) WCAG, checked in chrome extension. And the button colors checked also in https://contrast-ratio.com/#white-on-%23aa1f47 service.

Picking this up at #uoe-d8-contribution

Picked this up at #uoe-d8-contribution with brucedarby

I've applied the latest patch and the transparency dark background under the text seem to fix the accessibility issues. It passes medium and large text with level AAA.
What one should take into consideration though is that there are differences in the contrast ratio for the dark background under the text. The result depends on whether one checks the light or the dark areas of the text box.
The dark parts get a contrast ratio of 17.9 whereas the light parts get one of 8.4. This can easily be seen in the letter "b" in "bake" where the background is a bit lighter. Nonetheless, the patch is a big improvement to the previous version and passes the accessibility testers that I've used. Moreover, the patch also fixes most of the contrast issues with the link button. It receives a contrast ratio of 6.8 and passes WCAG with AA.

#uoe-d8-contribution

There's still be no +1 from @kjay as per #10.

+++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
@@ -27,7 +27,7 @@
-  background-color: #d93760;
+  background-color: #aa1f47;

This is the colour also used in core/profiles/demo_umami/themes/umami/images/svg/search.svg so by changing it we should discuss whether we should change the colour there too.

Note: the patch in #15 no longer applies for me.

We discussed this issue in this week's OOTB call and agreed that given larger font sizes and a more refined responsive layout, the container shim style should look ok. If we also add a subtle border to the container then it should feel related to the styling of the cards used throughout the theme.

I have attached my suggested approach for styling this.

@andrewmacpherson mentioned that if the font size is >=18.5px it would qualify for the 3:1 contrast ratio compromise. In the attached guide visuals I have suggested we keep the opacity of the background shim as low as possible. I am not able to carry out a contrast test with my design file and so it will probably necessary to come up with a sensible opacity value when testing this in the browser.

If we can, I recommend we keep this block proportional within the banner space. Using larger font sizes with correct line height and plenty of margin (vertical) and padding for the container when we have the space to do so. I've included some grid explanations and I would imagine these will be interpreted into similar percentage widths for the block at each breakpoint.

I like this direction!

To test the contrast ratio, set this up:

• body with white background. This simulates the most extreme situation the image background can present.
• div with background rgba(0,0,0, ?)
• the div will look grey because white behind it. Get the resulting grey with an eyedropper tool.
• tweak the alpha of the div, until the grey is dark enough to have 3:1 contrast against white. (for 4.5:1, it works out at 50% alpha)

I created a patch following #20 guidelines.

This is the problem that happens at 768px width, without changing min-height

To prevent the hero text going outside of the hero image I added a min-height: 54vw; for breakpoint 48em to 60em,

I tested in Firefox Nightly for the minimum background opacity required for a11y according to #21

This patch looks good and I have just a few minor suggestions for refinement:

Margin bottom for the heading should probably be dropped down to something like 0.5em to balance it with the margin bottom of the summary paragraph.

The following changes to the link introduce changes to our new site wide button defaults that were recently introduced by #2983568: Audit and improve focus styles across the Umami theme for logged out users. Was there a specific need to change the styles for the button?

.block-type-banner-block .field--name-field-content-link a {
   display: inline-block;
   padding: 0.7em 1.3em;
-  border: 2px solid #d93760;
+  border: 2px solid #aa1f47;
   border-radius: 3px;
-  background-color: #d93760;
+  background-color: #aa1f47;

The only other issue I noticed was that the summary block does not align vertically with left edge of the logo and cards at large+ size.

I updated patch #22 to include these changes:

• Restored the button border color and button background color
• Margin-bottom under hero text heading set to 0.5em
• Verticaly aligned hero text with logo and cards below

Screenshot of the result of this patch:

Thanks @kjay and @shaal. This is looking pretty slick.

Patch #24 review:

1.  .block-type-banner-block .field--name-field-summary {
      margin-bottom: 1.28em;
   +  font-size: 1.188em;
    }

   Nice, this agrees what @kjay worked out in #20.

2.    .block-type-banner-block .summary {
   +    background: rgba(0, 0, 0, 0.42);
   

   Agreed! I arrived at the same number....

   • A transparent rgba(0,0,0, 0.42) DIV over a solid white background, works out equivalent to solid grey #949494. This gives a 3.03:1 contrast ratio for white text. This is sufficient so long as the text is at least 18.5px.
   • If the text is less than 18.5px, then rgba(0,0,0, 0,5375) will suffice. This works out equivalent to #767676, with a contrast ratio of 4.54:1 for white text.

This looks good to me. I've tested in IE11, Edge 15, 16, 17 and 18. Chrome, Safari.

Marking RTBC :)

The patch looks good and applies successfully. +1 for RTBC.

1. +++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
   @@ -13,13 +13,15 @@
   -  margin: 0 0 1.07em 0;
   +  margin: 0 0 0.5em 0;
   

   Does this currently have an RTL counterpart? If so that needs to be updated as well.

2. +++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
   @@ -87,3 +92,20 @@
   +/* 960px */
   +@media screen and (min-width: 60rem) { /* 960px */
   

   Did you want to add the 960px comment twice?

3. +++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
   @@ -87,3 +92,20 @@
   +}
   \ No newline at end of file
   

   Should have newline at end of file.

I created a new patch

1. (margin: 0 0 0.5em 0; sets only margin-bottom, no special RTL update is needed)
2. Removed the duplicate /* 968px */ comment (and duplicate /* 768 */ comment)
3. Added a new line at the end of file

Thanks all! Committed. It did not apply to 8.6.x though. If we are to fix it in 8.6.x, it needs a backport patch.

I created a patch that can be applied to 8.6.x

I added the following screenshots:
(768x1024)

(1024x768)

(1920x1280)

Running a retest on 8.6.x after #37 failed

Fixing tags

Patch got committed 8.7 (but not to 8.6)