I'm writing a simple UI using Material Design, and specifically Material Ui using their Dark theme. I have a simple table for displaying text; however, I want the table to alternate between two contrasting colors to better indicate which rows belong to a 'group'. I also need to show a warning or error state, which means changing the usually white text to yellow or red accordingly. I need the red and yellow to have a strong contrast with the background colors since the monitoring UI's mostly only glanced at by users looking to see if it's in a good state, non-good state must be obvious.

I'm having a surprisingly hard time picking the contrasting colors due to my attempt to keep things functional for color blind individuals. In addition to trying to make sure they can tell the difference between my contrasting colors regardless of color blindness I also need to pick colors that look decent and have an appropriate contrast with white, yellow, or red text.

I do have indicators other then color to indicate both state and how rows are grouped in case color blind individual can't tell the difference between my contrasting colors; but I'd like to do my best to pick good colors to be as functional as possible.

I finally thought I had a good combination but when I ran it by a color blind individual he could see make everything out, but the red error text on my background cause such a strong contrast it apparently hurt his eyes, a problem I hadn't even thought to worry about before.

I'm trying to stick within the Matieral UI color scheme, but I'm not limited to them if I can find any colors that would work. I feel as if someone must have already had this problem and there must already be recommended combination of colors for this sort of use case out there. Can anyone point me to a good site or resource for finding good contrasting colors?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.