Updating form field borders for better contrast #13131
Conversation
1. Border colour did not have sufficient contrast. New contrast ratio passes WCAG AA for Graphical Objects and user interface components. 2. New border variable to aid consistency and future maintanance.
Inputs include custom made ones such as tags, select2s and tom selects. Some border radii were using mixins but not utilising it, hence they are now variables.
|
Niiiiiice 😍 |
rioug
added
the
user facing changes
Tags' rules are still coming from the old admin styles hence had to add the new (admin_v3) border variable to the old one. Has a hard coded colour value of #2e3132 as it has no access to the new colours.
There was a problem hiding this comment.
Great, thanks for working through this task! Code changes look good to me.
Personally, I find the borders look too dark, and make the screen very busy. So I had a look at the accessibility checker and found that the minimum contrast required for input borders was 3:1 (#2E3132). Maybe that would look better? Although the example given has a 2px border, while we use a 1px border.
In short, I'm not an expert and so will seek more feedback from testers!
The screen is very busy. But I don't think that "hiding" the important input fields is the solution. I find this new version much clearer and I think that it's just a matter of getting used to the new borders. I reckon that ten years ago there was a trend to make things more smooth, rounded, blending in and beautiful. But now people are actually figuring out that harsh contrast has its benefit, too. It may not look as beautiful but it's more practical. |
|
@dacook I've used #2E3132 because that was the only shade of grey(black) in the current palette that passed contrast requirements. Also, it's generally not a good idea to keep introducing new colours as they:
One thing to note is that we are a bunch of relatively young people here who still have good enough sight (hopefully) and hence could have a preference for more "smooth" designs. In your 40s your presbyopia (age related eye sight decline) will really kick into gear at which point you'll be happy for some contrast on the internet 😅️ |
What? Why?
Closes: #12846
Border colours on forms did not have sufficient contrast. New contrast ratio using
$dark-grey #2E3132passes WCAG AA for user interface components.Note: on top of the border change I've refactored (adjusted) a few of the inputs as with the new border it was obvious there were some size and border radius differences.
Screenshots of the new UI on this branch
Inputs and tomselects
Select2
Tags
What should we test?
textareaunder /admin/general_settings/editRelease notes
Changelog Category (reviewers may add a label for the release notes):
Documentation updates
Form related content does not seem to exist on the Wiki. Suggest adding a wiki entry under Design for Design styleguide: forms