Placeholder texts do not have enough contrast

[acelaya]

The text color we use in input and textarea placeholders does not have enough contrast.

You can see the contrast checker result here https://webaim.org/resources/contrastchecker/?fcolor=9CA3AF&bcolor=FFFFFF

We need to verify if this contrast is ok for placeholders, as using a more prominent color might make it look like it's the actual input text and not a placeholder.

[robertknight]

GitHub uses #59636E for its placeholder color, giving a contrast ratio of 6.11:1. That looks OK to me, perhaps just a little dark. The minimum contrast ratio for WCAG AA with normal-sized text is 4.5. I'm sure we can find a value in our palette within that range which will work.

[acelaya]

GitHub uses #59636E for its placeholder color, giving a contrast ratio of 6.11:1. That looks OK to me, perhaps just a little dark. The minimum contrast ratio for WCAG AA with normal-sized text is 4.5. I'm sure we can find a value in our palette within that range which will work.

Good one! I didn't think about checking what others do.

That color is dark enough and definitely still looks like a placeholder.

[acelaya]

I realized the grey-6 (#737373) color from our standard color palette, does fulfill the minimum contrast, so I think we could use that.

In the frontend-shared library we were setting grey-5 (#9c9c9c) as the placeholder color for Input and Textarea components, although, the sidebar's textarea uses a standard textarea element, so we have to explicitly set it there.

In any case, the styles in frontend-shared have two problems:

1. grey-5 does not have enough contrast when used with white background:
   
2. There's a typo in the placeholder: class, so we are in fact not setting the intended color 😅
   See https://github.com/hypothesis/frontend-shared/blob/fa1617d/src/components/input/Input.tsx#L19
   In there we set placeholder:text-color-grey-5 disabled:placeholder:color-grey-6, but none is correct. It should be placeholder:text-grey-5 disabled:placeholder:text-grey-6. I'll fix that separately, and probably up the tone to grey-6 by default.

[acelaya]

FYI, this page confirms placeholder text should fulfill the same contrast ratio as any other text in the page https://accessibleweb.com/question-answer/does-placeholder-text-need-to-meet-color-contrast-requirements/

It links to w3.org, where it explicitly states that placeholder texts also need to fulfill the contrast ratio.

[acelaya]

Checking how this is handled by some popular UI frameworks, where I would expect accessibility to be taken into consideration, I found this:

• Bootstrap does in fact set a quite dark placeholder color in light mode, where inputs have a white background: #595c5f.
  The text color is then much darker: #212529
  Surprisingly, I was in fact able to tell that was a placeholder, so maybe it strikes me as too dark in the sidebar, just because I'm used to current color palette.
• MUI sets a darker color than us, but still not enough contrast ratio (around 4): #7B7F84.
  For text they use #32383e.
• Bulma CSS sets a terribly light placeholder color. It has a contrast ratio of 1.8: #c0c1c4.
  I did have difficulties reading this one. I don't think it's a good example.

Additionally, I have found the lightest shade of grey that still has enough contrast with white is #767676, in case we want to use it.

[acelaya]

As per my comment above, these are some screenshots to compare current placeholder and text color with a potential new set of colors, using #767676 for the placeholder.

Current colors:

Using #767676 for the placeholder:

Being honest, we are probably using too light colors in the textarea at the moment, not only for the placeholder, but also for the text.

For a more contextual comparison, this is how other colors look in the sidebar:

In general, colors are much darker, so I think we can "safely" darken both the placeholder and text color in the annotation textarea.

I still need to check other inputs, and other contexts (like the LMS), but I would expect darker colors to be fine.

[acelaya]

I'm closing this as completed, as the contrast issues have been solved by moving to a darker shade of gray for placeholders.

There's still some potential improvements here, like adding ellipsis to placeholder values, but we can address that separately.