I really do not like this design. The text is a really hard to read low contrast blue-gray text on a blue-gray background. The flat design has zero UI affordances. I can't tell the difference between a highlight, a button, and a text field. I would never have guessed that the rectangle with a rectangle in it is a color picker.
I personally feel like the contrast is fine, but the light mode does fail the lighthouse contrast accessibility check, so you may have a point there.
I disagree with your other complaints though. Buttons are pretty obvious based on context clues and placement, as are highlights. Text fields also rely on context to communicate their function and furthermore more, they are labeled. As is the colour picker…
I’m curious to see examples of an inline color picker you like, as well as how you generally expect forms to be styled. I looked for a few minutes through some UI libraries I like and basically all of them handle the color picker the same way.
The other pickers have icons to indicate what they are (calendar and clock) so why not a color palette to provide a similar hint?
Needing to read the context to figure out if it's a button or a text field does not help when quickly scanning the page. Figuring out the context and reading the labels is totally unnecessary extra work that a better design wouldn't require.
It's pretty self explanatory when you click on it. Or are you saying at a visual glance you should know it's a color picker? Do you have an example of how you would do it?
