Infra: Table lines instead of zebra stripes

[hugovk]

For consideration, styling can be adjusted.

@gvanrossum said:

In PEP 11 I see a table that has very heavy shading of alternate rows. This makes it seem that those rows are more important than the others. Can we please not use this style? Certainly there's a way to get thin lines between rows instead of the alternate shading.

The results of three user studies recommends using "zebra stripes", but if not, then a lined table:

The results of the three studies conducted to date suggest that the safest option is to shade the alternating, individual rows of your table with a single color. Taking this approach is likely to ensure that:

• task performance is better, or at least no worse, than with other table styles, and
• the aesthetic sensibilities and subjective preferences of the majority of your users are catered for.

If zebra striping of this type cannot be done easily, then ruling a line between each row may be the next best option.

And:

Firstly, if, in your particular circumstance, the cost associated with implementing single-color, single-row zebra striping is acceptable—and I have been told of several cases where this is not the case—then this should be done. Otherwise, stick with a plain or lined design.

Before

https://peps.python.org/pep-0011/#tier-1

After

https://pep-previews--2734.org.readthedocs.build/pep-0011/#tier-1

[gvanrossum]

Apparently I'm in the 4% who dislike zebra stripes. :-)

[CAM-Gerlach]

Personally, I prefer the striping for the in-body tables, as I find it both substantially more aesthetically pleasing, and significantly easier to read and follow—with just lines, I often lose sync of which row corresponds to which, particularly in wider tables. That being said, I can understand the concern about zebra-striping inadvertently giving some rows more undue emphasis. Maybe the shading could be less heavy to reduce this concern, while also introducing lines if needed to preserve baseline contrast for a11y?

[hugovk]

Maybe the shading could be less heavy to reduce this concern, while also introducing lines if needed to preserve baseline contrast for a11y?

Here's how it looks with:

---colour-background-accent: var(--light, #ccc) var(--dark, #333);+--colour-background-accent: var(--light, #eee) var(--dark, #222);

Before

After

[CAM-Gerlach]

Actually, I think the original issue was my fault—#2691 changed --colour-background-accent from #eeeeee to #cccccc in light mode, to match the contrast under dark mode, which resulted in the change to the tables; @hugovk 's above proposal essentially reverts that change (though it in turn makes several admonitions much less visible, as well as link decorations which are particularly important for a11y).

What I would suggest is to meet in the middle with #dddddd for the light theme color, which matches the nominal contrast of the #222222 dark theme color; alternatively, we could split it out to --colour-background-accent-light at #111111/#eeeeee for tables and --colour-background-accent-strong at #333333/#cccccc for the others.

[hugovk]

alternatively, we could split it out to --colour-background-accent-light at #111111/#eeeeee for tables and --colour-background-accent-strong at #333333/#cccccc for the others.

Yeah, good idea, please see PR #2740.