Improve Contrast for certain elements in the Issue stream for Accessibility

[Fwang36]

Problem Statement

Several of the changes made recently to the issues page has made it harder to read for some users.

I believe the main offender is that we removed the border and color from the issue status and the light gray on white background makes it very hard to read for some users.

The session graph itself looks like the gray bars on it may have been lightened.

Some of the design changes to make it more minimal such as the movement of the event level flag to a small colored dot under the error type contributes to the lack of readability as well.

I am comparing the Before found on this page: https://docs.sentry.io/product/issues/-

With the After here in my org -

Solution Brainstorm

Increase contrast or return color to some of the elements

Product Area

Issues

[getsantry[bot]]

Assigning to @getsentry/support for routing ⏲️

[getsantry[bot]]

Routing to @getsentry/product-owners-issues for triage ⏲️

[lobsterkatie]

@Fwang36 This is feedback that came in from a customer, I assume? Did they give any information about why they want those attributes (the ones we made less attention-grabbing by grey-scaling them) in particular to stand out more?

FWIW, even with the changes we still meet the WGAG AA contrast ratio standard. Still, I'll leave this open for the moment so other folks can leave feedback if they wish.

[vuluongj20]

Hello @Fwang36! I'm the designer behind these changes. Thank you for the feedback 🙏 To add some context, we're making efforts to reduce visual noise and simplify the issues stream. There is a lot of signal (text, color, icon) in the stream that takes the user's focus away from what matters. Hence the de-emphasized treatment for some elements such as the issue status label.

To respond to your specific concerns:

• Removing the border and color from the issue label actually makes it more readable (our accent colors have less contrast than grays/blacks). The new gray color is WCAG AA-compliant, as @lobsterkatie mentioned. It is true that we're removing semantic colors as a signal source (yellow = new), but I think it is justified since it helps further the goal stated above.
  • The lighter gray bars in there session graph are still quite readable in my opinion. I'm not aware of any WCAG standard for non-text visual elements. The goal here is not to help users distinguish pixel-level differences — it is to communicate trend. If the user wants exact numbers, that's what the hover tooltip is for.
  • I'm not sure how moving the event level indicator makes it less readable. Can you elaborate?

[Fwang36]

hey I'm sorry I missed these responses.

Yes, this feedback came from a customer.

They explained that they have poor eye sight, and in the light mode, the new Ui makes it harder to read due to low contrast. The minimalism of the new design also makes everything a little harder to read at first glance. I don't have much more context than that unfortunately.