I'm trying to put black and white in a listview, or in other words black and white cells. It doesn't look right, or easy on the eyes.

Doesn't look right

  • 2
    Your question appears to be more about Graphic Design than UX Design - What problem are you trying to solve by using the black and white blocks? – Andrew Martin Mar 29 '16 at 10:09
  • 1
    try graphicdesign.stackexchange.com – Midas Mar 29 '16 at 16:09
  • 1
    Try to avoid this if you can, it's going to put quite a drain on the user's eye, moving from black to white all the time. From an accessibility and readability point of view, it can be difficult to read white text on black backgrounds, and what's more, that grey, red and blue are quite difficult to read with the contrast on the black. Check out the WCAG2.0 on contrast use for accessibility. webaim.org/resources/contrastchecker – Brett East Mar 29 '16 at 18:38
  • There should be a good reason for applying the 'zebra striping' technique to tables or list views. Also, if you intend to do so, it needs to be done with colours that work with the brand/style of the rest of the application. As you can see when you used the back colour the effect of the purple circle around the number can't be applied easily. You'll need to work through these two issues separately and come up with a solution that works for both. – Michael Lai Mar 29 '16 at 23:56
  • Certain recipes (or things in the listview), are special. – leecan999 Mar 30 '16 at 2:49

Never underestimate the importance of brand colors although it may seems trivial in the beginning. If you implement colors only when they needed, you would find yourself in such situation. This is a common design problem and it usually happen in the middle of an app development.

Design Problem

When the colors are not set in the beginning, you will find yourself running into such problems:

  • Conflicting colors
  • Inconsistent colors
  • Colors with low contrast, decrease readability
  • Waste time mix/match colors

This also applies to typography if they are not set properly.


I can't emphasis enough the importance of having a proper styleguide. It should be set (ideally) before the app development to address any color issues such as yours that may arise.

The colors of the component should be chosen from the styleguide, such as list views, table cell, buttons etc.

There are a lot of articles written on styleguide. You might also want read articles on creating a cohesive color palette especially if you are not design trained.

Proposed Solution

If you want to mark items of special meaning, try complimentary colors. Take your brand color (purple) and run it through a color palette tool to get your complimentary colors.

Alternatively, you could try other methods aside from manipulating the colors. Use an icon to mark it as special or the outline of the item.


download bmml source – Wireframes created with Balsamiq Mockups


I would recommend using your theme colors to build alternate row colors... You can use 30% of you purple and 30% of you orange to build alternating pattern. Selected options can go to full 100% of color saturation with reversed text.


Based off your question, here's a 2 part answer.

1. When in doubt, test it.

Since this is UXSE and not Graphic Design SE, I'd suggest conducting usability testing on different versions on your list view app UI. Several ways to find out which color contrast or color choice is best for your end-users are A/B testing or use-case scenarios.

2. Understand the goals of your app

There is no context, interactive prototype or animated gif of the list view page screenshot you've shown so we can see how it works. Keep in mind any colors, contrast or visual design elements will either help or hurt the user achieve their goal in using this particular page or in using your app in general.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.