4

I'm doing zebra striping in a table. Should I start with the darker ("gray") or the lighter color ("white")?

Is there an accepted theory or standard practice regarding this matter?

Examples:

enter image description here

enter image description here

  • 1
    I made the question more objective by against about "accepted theory or standard practice" and wonder if it can be re-opened in its current form. – Tom Au Jun 26 '17 at 16:36
11

I've always gone with white first for a few reasons.

  • It tends to stand out better against the typically darker header
  • If there is only a single result it doesn't look "grayed out" and thus questionable if it is "active" or special in some way. Some also argue that zebra striping only comes into play when you have 2 or more results, the gray being the addition.
  • Many result listings show a "no results found" placeholder row when there are no results, this typically is default white
  • If gray is shown first and there are only 2 results and the table doesn't have a distinct border (and renders on top of a white background), the 2nd result row doesn't look like it is part of the table/results

Regardless of which you choose I'd recommend that the alternating gray rows be super subtle. The objective is to make it clear where the row separation is (esp if rows can have different heights)... but darker gray rows are harder to read (less contrast) and the pattern becomes visual noise vs an aide.

2

If your table heading row is dark then starting the first row light will probably provide better contrast. However, I think there are many answers you can find on UXSE that provides guidance on zebra striping for data tables, and also arguments against zebra striping in general.

To use or not to use "Zebra Stripes", or Alternating Row Colors for Tables

What is the best practice for data table cell content alignment

Alternate row in Microsoft Modern UI (Metro)

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