Visual distinction between a placeholder & input text

[pankajparashar]

With placeholder:

With text:

Issue is here, https://github.com/captainbrosset/devtools-tips/blob/main/src/assets/style.css#L249

Do you think the placeholder style should be removed?

[captainbrosset]

The difficulty is that the default placeholder color doesn't offer enough contrast with the background color. But I agree this is a bug and we should find a way to improve this.

Ideally, there should be a visible label too, and not just a placeholder, for accessibility reasons. So maybe the solution is to find a nice way to display a label next to the field, and get rid of the placeholder.

[pankajparashar]

Yes, we should definitely have a label. Meanwhile, rgb(82 82 82) does offer sufficient contrast ratio to meet WCAG guidelines. I used the color suggested by DevTools to fix the contrast ratio.