[A11Y] Fixed: Increase contrast for "required" asterisk in all core themes.

[klonos]

This is a sibling issue to #5426, and part of the #5244 meta.

Current style is:

• Seven: #FF0000 text color over #FAFAFA background, which is AA for large text, but fails for normal size text.
• Basis/Bartik: #FF0000 text color over #FFFFFF background, which is AA for large text, but fails for normal size text.

Making the text color #E60000 would pass AA for Seven/Basis/Bartik (would make it AAA for large size text, and AA for normal size text).

Making it #AD0000 would pass AAA for Seven/Basis/Bartik, for both large and normal size text.

[klonos]

Side-by-side progressive change from #FF0000 (current) to #E60000 (AA) to #AD0000 (AAA) on Seven:

[klonos]

PRs filed for both options to compare and choose from:

• AA: Issue #5425: A11Y - Make required asterisks AA backdrop#3883
• AAA: Issue #5425: A11Y - Make required asterisks AAA backdrop#3884

[indigoxela]

@klonos your fix works in Seven and Bartik, but not yet in Basis, which ships with a custom color definition in css/component/backdrop-form.css.

Should be easy to fix.

Re AA vs AAA - I could be wrong, but I think until now we were happy with AA. Both colors look OK, but I have a slight preference for #e60000, because the asterisk appears a little more prominent (more contrast to default text color).

[klonos]

@klonos your fix works in Seven and Bartik, but not yet in Basis...

Thanks @indigoxela ...having a look now.

...I think until now we were happy with AA. ...I have a slight preference for #e60000, because the asterisk appears a little more prominent

Yes, I also prefer #e60000 for the same reason. Let's wait for some others to provide feedback - we have PRs for both AA and AAA, so we can merge the preferred one, and close the other 😉

[klonos]

...re Basis, should I change the value in https://github.com/backdrop/backdrop/blob/1.x/core/themes/basis/css/component/backdrop-form.css#L28, or simply remove the entire thing and allow the one set in core/modules/system/css/system.theme.css to take over?

[indigoxela]

...re Basis, should I change the value in backdrop-form.css or simply remove...

@klonos you have to change the value, because Basis does not load system.theme.css. Otherwise you end up with normal text color.

[klonos]

Right, I missed that. Fixed in both PRs 👍🏼

Thanks @indigoxela 🙏🏼

[stpaultim]

Re AA vs AAA - I could be wrong, but I think until now we were happy with AA. Both colors look OK, but I have a slight preference for #e60000, because the asterisk appears a little more prominent (more contrast to default text color).

I agree

[indigoxela]

@klonos many thanks for the update, this works correctly now in Basis. 👍

We still have two PR, so marking as RTBC might not yet be appropriate. How much feedback do we need, to be able to decide? Currently 3 of 3 people prefer #e60000.

[olafgrabienski]

Currently 3 of 3 people prefer #e60000.

4 of 4 now :-)

[argiepiano]

I too prefer #e60000

[klonos]

Thank you guys 👍🏼

I guess we have enough feedback now 😅

[indigoxela]

I guess we have enough feedback now

Sure! Consent like that is rare. 😉 @klonos mind to close the second PR? The first one's RTBC then.

[klonos]

Done 👍🏼

[quicksketch]

Merged backdrop/backdrop#3883 into 1.x and 1.20.x. Thanks @klonos and all the folks that provided feedback!