Audit & fix Red asterisk for required fields WCAG contrast minimum

Problem/Motivation

Because there have been problems in the past with the required field asterisk not meeting AA contrast requirements, we should review every core theme and check any use case where the background color might be different.

Proposed resolution

Improve colour contrast for the field required asterisk where needed
Needs a contrast of > 4.5:1
Finding a single colour which has sufficient contrast against white, pale grey, and the dark grey of off-canvas could be tricky.
So perhaps we need 2 colours:
One which has sufficient contrast against white and pale grey backgrounds.
Another colour which has sufficient contrast against the dark grey backgrounds.

Review results

Off Canvas (same for every theme)

Asterisk: #e5e5e5 Background: #444444
Contrast ratio 7.73:1: 👍

Claro

Asterisk: #dc2323 Default Background: #FFFFFF
Contrast Ratio: 4.87:1 👍
Default Asterisk: #dc2323 Collapsible element background (f.e. inside sidebar accordion): #F8FAFB
Contrast Ratio: 4.65:1 👍

Olivero

Asterisk: #232494 Default (AND collapsible container) Background: #FFFFFF
11.99:1 👍

Umami

Asterisk: #ee0000 Default (AND collapsible container) Background: #fbf5ee
4.18:1 👎

Umami maintainer @shaal was asked if changing this to #e40000 would be OK, and he said yes. This would bring it to 4.51:1.

Remaining tasks

patch

User interface changes

Colour contrast improvement.

Original issue summary:

Here for reference, but is outdated:

The Classy theme provides a red asterisk to indicate required form inputs. See required.svg in

core/themes/classy/css/components/form.css.</del> (Classy theme no longer in core)

<code>This has sufficient contrast against the white page background in the Seven theme. #ee0000-on-white has contrast ratio 4.53 : 1.

(Seven theme no longer in core)
However in other places, this asterisk has insufficient contrast:

1. In the off-canvas dialog, we find this asterisk against a dark grey background. #ee0000-on-#444444 has contrast ratio 2.14 : 1. The following screenshot comes from layout builder's add-block dialog. The title and formatter inputs are required. (Off canvas CSS has been updated since and no longer exhibits this problem)
   
2. In Seven's entity-meta sidebar on the node form, the asterisk can potentially appear against a pale grey background. #ee0000-on-#edede8 has contrast ratio 3.85 : 1. The standard profile doesn't have any required inputs in the node form sidebar, so the following screenshot is a mockup, made by adding the .form-required class to a label using the browser dev tools.
   

Note: this asterisk is an SVG image of a common typographical character, but it could just as easily have been implemented with the ASCII text character. So there is a question of whether it falls under WCAG SC 1.4.3 "Contrast (minimum)" as text, or SC 1.4.11 "Non-text Contrast" as an image. In this context, let's class it as text; it's a typographical character, presented inline as part of a text label.