Contrast issues with off-canvas dialog styling

(Just embedding the screenshots.)

Drupal core target is AA, not AAA for color contrast. (I lost time hunting down where we document this, I don't think we do yet but our accessibility maintainer says so in the issue summary here: https://www.drupal.org/project/ideas/issues/2864791)

For the submit button it looks like our Drupal blue #0074bd is enough to get AA contrast against its white label text.
The overall dark background set to #444 is ok with most values except for the #bbb used for the form field descriptions. I think we should remove that #bbb so that it becomes #ddd wich is ok against both #444 and #474747 backgrounds.

Thanks @yoroy. I also debated whether we needed AA or AAA compliance but recommended we go for AAA because I myself was struggling to read it. But turns out it was indeed the form field descriptions (edit: and also the labels, details legend, etc.) that were causing me trouble -- good catch!

So based on that I'm probably okay with keeping the background colors and just changing the form field description color. Let's check with an accessibility maintainer to confirm.

Why "needs accessibility review" if the accessibility maintainer already is on the record for AA, not AAA?
(I ran all my suggestions through https://webaim.org/resources/contrastchecker/ to ensure they meet AA)

@yoroy I don't think they did? @mgifford reported it as an issue in #2919837: Accessibility Issues with Off-Canvas dialog and I don't see any accessibility maintainer comments about it after that about this specific issue.

Basically just want a "yep, +1, that's good enough" from them since they raised it as a problem in the other issue.

I understood your comment as "lets double check AA is good enough". @andrewmcpherson says so here: https://www.drupal.org/project/drupal/issues/2919837#comment-12321300 and here: https://www.drupal.org/project/ideas/issues/2864791

I think that's better; thanks @samuel.mortenson Tested it on simplytest.me and it's a lot easier on the eyes. So +1 for #12; it gives us AAA compliance, hurts my eyes less, and still matches the design. :)

I think there's one remaining issue. When you hover over the submit button, its background color is #458AD2 and the text is white, which fails AA. Maybe its hover color should be darker instead of lighter? Thoughts?

Ah, the edit button itself has a similar issue when edit mode is active. Previously @yoroy fixed it so that the blue gradient bar across the top matched the button (so it's just a button that grows into a whole bar when you're in edit mode). But somehow since then the button itself has regressed to be this washed-out periwinkle (#629FE3 according to my color picker) that no longer matches the blue bar gradient and fails AA contrast for the button. So I think we need to fix that too.

Oh and here's a screenshot of the submit button when hovering.

One thing I notice with the darker colors for the edit button/bar is that they're less visually distinct from the default Bartik header gradient. Not sure if that's a concern or not. @yoroy, thoughts?

The dark blue is close to the Bartik header color, but I think the location plus the shadow break it up enough visually to be understandable. I don't think it hurts conceptually for the Edit button to match more closely with the content area, since the intention is to directly edit the content on that page.

The patch didn't apply for me because of a spacing mismatch, so I've fixed that, but otherwise this is the same code from #19.

Uploaded interdiff for #19 and #21.

@DyanneNova thanks for the review here. This patch is looking good.

@ragasirtahk thanks for the interdiff but it has a lot of changes that should not be there.

As @DyanneNova said #21 is the same as #19 except for 1 spacing issue. this was caused by #2866810: Update stylelint rule function-comma-space-after to be consistent with Drupal's CSS standards change to settings_tray.theme.css see https://github.com/drupal/drupal/commit/0013e901feae75545e784b45f3f39a81...

I agree with @DyanneNova’s assessment. The colors are close but the separation is clear, so this is ok.

re #5 and other comments about WCAG level AA vs level AAA. Our level AA target is documented on the core gates page - https://www.drupal.org/core/gates#accessibility

I'm taking patch in #21 for a spin on simplytest.me now...

I've tested the various states of the edit button.
All text + background colour combinations pass WCAG 2.0 SC 1.4.3 Contrast (Minimum).

Good work! Getting it right with CSS gradients is a lot of work, because you have to make sure the background-color passes (when gradients are not supported) AND you have to make sure both colour extremes of the background gradient pass too.

Next I'll test the colours inside the dialog itself.

Uncrediting @ragasirtahk as the interdiff is not really correct (nor needed since it was just a reroll). Thanks!

I tested all the text/background colours inside the settings tray dialog, including focus and hover states. The attached text file has my detailed testing notes.

All color vs. background-color combinations pass WCAG 2.0 success criterion 1.4.3 Contrast (Minimum), for level AA conformance. Awesome!

I did find a couple of failures of SC 1.4.1 Use of Color (A) and SC 2.4.7 Focus Visible (AA), These don't directly relate to colour contrast, so I'll open follow-ups for them. They should be easy to fix.

So this is my sign-off for the colours established here (patch #21). Is anything left to do, or is this RTBC now?

Great, thanks for the awesome work here, all!

Committed and pushed to 8.6.x, cherry-picked to 8.5.x.

I had made mistake while applying the patch so the interdiff showed wrong data. Apologies.

No worries, @ragasirtahk! Thanks for contributing nonetheless. :D

Fixing credit again. Thanks @ragasirtahk for understanding; good luck in your next issue. :)