Color contrast on search box needs update
Closed this issue · 4 comments
Almost everything is fine, but the search widget is not visible to low contrast; the border gives a contrast of 1.34:1 (https://www.joedolson.com/tools/color-contrast.php?type=rgb&color=43%2C36%2C36&color2=252%2C251%2C248&alpha=.15 ), and the placeholder text is also below color contrast. It's acceptable for placeholder text to be under contrast, because it needs to be clear that text is not an entered search term; but something of the search form must be visible. As this currently is, somebody with poor color perception may not be able to find the search form at all.
@melchoyce could use some help with this one – the search border needs more color-contrast, but if I just up it to a passing value it looks silly. Maybe the search style should be redesigned?
Current:
and when the search button is focused it appears like this (see #68):
It definitely feels super dark, but maybe we could reuse #6a7379:
I'm not sure there's a better solution here. I tried just adding a bottom border, and tried changing the background color, and it didn't look good:
Maybe if the border-bottom version had a search icon...?
How's this, stealing from the comment form styles:
In a widget, the second shows the submit button focused (should only happen if you tab to it from the search bar)
In the search header:
Having the label with adequate contrast should be enough to show where the search for is, and we can keep the decorative border at a lower (failing) contrast.
I think if you ditch the border-radius on the button I think it's good to go 👍