I don't see any harm in using the destructive color here as long as we create a new @color-invalid (or something) variable that references the destructive red.

@violetto, given the changes being proposed to the colors, would the destructive red still be appropriate to show invalid data?

The currently applied red – #f00 – also has accessibility issues as it fails WCAG 2.0 level AA contrast while current destructive @d11d13 passes AA.

@Prtksxna Your question is pointed. I think we should merge those two right now and revisit the invalid with the proposed destructive again (probably lighten it for this certain use case). – @violetto An example of an invalid input field needs to go into

M101 WikimediaUI

13

Change 264429 had a related patch set uploaded (by VolkerE):
MediaWiki theme: Change @color-invalid to destructive

https://gerrit.wikimedia.org/r/264429

Accessibility color contrast issue is true for custom dialog error border color #ff9e9e as well with a failing contrast ratio of 1.97:1

Change 264563 had a related patch set uploaded (by VolkerE):
MediaWiki theme: Change custom error border color to destructive

https://gerrit.wikimedia.org/r/264563

Hmm, I think we're going a bit overboard here.

About the 'invalid' input state:

Currently the invalid text input "framing" color is set to #f00 and the dialog error border color is set to #ff9e9e. We have an accorded "destructive" color, we should probably use it for marking invalid inputs and errors as much as possible. Or do I miss a use case, where this might cause issues?

A "destructive" button is very distinct from a widget in "invalid" state. While giving them the same color might be neat from maintainability perspective, that doesn't seem like enough justification for me. If anything, I'd strive for different colors to indicate the difference. (We need to draw users' attention to "invalid" widgets, since they require a correction from the user; we need to draw their attention away from destructive buttons, as they're not meant to be clicked often.)

I'm not very fond of #f00 either, so I dunno, go wild. But the destructive color looks very meh with the current design:

About error message box in dialogs

In T123812#1939526, @Volker_E wrote:

Accessibility color contrast issue is true for custom dialog error border color #ff9e9e as well with a failing contrast ratio of 1.97:1

We don't need high contrast for a border of an error message against anything (I'm not sure what you compared to); we need it for the text color against background color. I haven't checked, but it being pure black #000 on very light pink #fff7f7, it's probably fine.

If we want to be consistent here, we should aim for consistency with the existing MediaWiki errorbox class, which we've been using with MediaWiki UI forms for a while. (It would be pretty good to have it codified in M101 or something too, after checking for contrast issues and the like.) The colors are only a bit different (live example: https://rawgit.com/wikimedia/mediawiki/master/docs/uidesign/design.html):

@matmarex Just as short reply here before going into a longer one at the linked task. I completely agree with it being useful to try a consistent approach on the message box classes.

I oppose that the border contrast doesn't play –and even if just a small– a role though in ensuring widely accessible interfaces. Citing from WCAG 2.0 Techniques and Failures for Success Criterion

Using a higher contrast values for lines in diagrams (future link)

Does the color in this case convey important information? Yes.
Should the color be the only way of conveying information? No.
Should the color be a low contrast red or a close higher contrast one? Probably the latter depending on the solution.

Change 264429 abandoned by VolkerE:
MediaWiki theme: Change @color-invalid to destructive

Reason:
Eventually picking this up later again. No buy-in for proposed change.

https://gerrit.wikimedia.org/r/264429

Change 264563 abandoned by VolkerE:
MediaWiki theme: Change custom error border color to destructive

Reason:
No buy-in here right now. This is a clear issue, that needs to be targeted for our users. Getting back to it after definition of overhauled and improved color palette is finished.

https://gerrit.wikimedia.org/r/264563

Change 264429 restored by VolkerE:
MediaWiki theme: Change @color-invalid to destructive

https://gerrit.wikimedia.org/r/264429

Change 264563 restored by VolkerE:
MediaWiki theme: Change custom error border color to destructive

Reason:
Revisiting with new color palette.

https://gerrit.wikimedia.org/r/264563

+1. While the new red isn't as bright, it's certainly good enough.

Change 264429 merged by jenkins-bot:
MediaWiki theme: Change error/invalid color to alias of destructive

https://gerrit.wikimedia.org/r/264429

Change 264563 merged by jenkins-bot:
MediaWiki theme: Change custom error border color to destructive

https://gerrit.wikimedia.org/r/264563