Badges on default gray BG

Design
#1

Currently in our dashboard, we have multiple sections of cards and a count above each section that uses the default/read badge treatment. This gray is the same used for the BG color behind the cards, so the badge pill treatment isn’t visible in this situation. After talking with Adam about automatic “theming” of colors, could that be utilized here to change the badge from gray to a different color in order to see the pill? Here’s how it looks now:

Dashboard%20(Default%20PF)
Dashboard (Default PF).png1898×1602 418 KB

Any suggestions on how we can remedy this? Was thinking the pill could be white or a darker gray in this situation, but would depend on what is still accessible from a contrast standpoint.

@kybaker @maceledo

#2

I think our theming system could be a great solution for this. Switching to a white fill when on our gray background should work nicely. I might consult with Jenn on the accessibility needs here, I’m not sure if the shape itself needs to meet contrast or just the content inside.

I could really go either way on this one, I think it depends on how we want to utilize our theming system :slight_smile: In this case going from a light gray to white doesn’t seem like a change drastic enough to introduce confusion or inconsistency. I think the badge component is unique enough to handle that and still be easily recognizable as the badge.

#3

OK, sounds good. We’ll look into making that change to the design and see how we could get it added to the implementation. Thanks!