When in dark mode, labels do not have appropriate text contrast and remove label buttons sometimes have incorrect colors
Description
When Dark mode is turned on, two issues affect the colors used on labels:
- The color of the text on labels in the sidebar is often not an accessible contrast on the label's background (or in the case of scoped labels, the page background)
- The
x
button to remove the label is also usually the wrong color for normal labels, though for scoped labels this doesn't seem to be a problem
A few illustrative screenshots:
In this screenshot from this issue, the text and the x
button have opposite colors on both labels.
In this case, the lighter text color (#ececef
) is not a sufficient contrast on the green (#8fbc8f
) background, and both the lighter color and the darker text color (#333238
) are not a sufficient contrast on the red (#d9534f
) background.
In this screenshot from my onboarding issue, some labels have an appropriate color for their removal button (the first, third, and fourth label), but the rest do not.
The scoped labels shown here show the body background color (#1F1E24
) behind the scoped text. The Manager | Pre Start Complete
label uses the purple color #5843AD
, which does not have an accessible contrast on the body background color (which is also an issue for the label border's perceivability).
The onboarding
label has the same issue as the labels in the previous example, where the text (which is an acceptable contrast in this case) is the opposite color of the button (which does not have an acceptable contrast).