Design: Search bar is low contrast

[robredpath]

This is very low contrast, especially as it provides instructions to the user on how to use the site.

[xriss]

Uhm?

This is a rather standard search place holder?

https://www.google.com/search?udm=2&q=search+box+placeholder

Intentionally low contrast so as not to be confused with actual content?

Can we get a gamma check on your monitor maybe?

A lot of idiots set up their screen gamma for print and then complain about how everyone else is bad at web design because the colours and contrast are all wrong.

[stevieflow]

I think this has always been the case - I dont think anything has changed between the themes?

Perhaps the light bg color in the new theme accentuates this?

Perhaps the search box in the new theme may benefit from a darker border (either full or part) , to break up this lack of contrast (that isn't so evident in the current theme)?

[IsabelBirds]

This isn't accessible at all so could do with being updated one way or another.
The relevant WCAG info is here: https://www.w3.org/WAI/tutorials/forms/instructions/#placeholder-text

The key sentence is "While placeholder text provides valuable guidance for many users, placeholder text is not a replacement for labels." - currently this makes no sense to navigate with a screenreader.

[xriss]

I would personally argue for a separate theme for accessibility. Trying to roll that all into one creates a mess for both. That's why we originally tried to have a high contrast theme but that got lost and became "print friendly" instead.

All a question of assigned priorities really.

Is accessibility the highest priority? Because designing for screen readers is not as easy as the W3 thinks it is, all the recommendations are little more than band aids.

Quite a fascinating design problem really, would love to spend some time fixing this, it really is all a mess right now, so much work to do.

@stevieflow yes the new theme is quite bright and may be it accentuates the problem, of course we did try toning down the areas around the text a bit. There was a darker surround with a slight watermark picture providing a bit of texture outside the main site content. I quite liked that it gave a nod to the way d-portal has looked for a decade and helped to bridge the gap between the old and new look.

Unfortunately we could not get it past the design committee and it had to be killed.

Wrong shade of grey you see.

[stevieflow]

Linking this to feedback on grey scales in the design system, as that seems relevant / linked: IATI/design-system#67 ?