Difference between read and unread very light

[tbille]

Summary

The colour for read and unread threads on the list of topics is not very visible

Process

• Go on the list of topics: https://forum.snapcraft.io/
• Open a topic, and go back on the homepage: https://forum.snapcraft.io/
• The colour on the title of the read topics is light grey.
• It is quite difficult to see the difference between read and unread

Current and expected result

• we should make the difference between read and unread more impactful

Screenshot

Here is side by side a read and an unread topic. The difference is more visible when on the full list of topics.

https://forum.snapcraft.io/

[solazio]

@tbille @danielmutis is this solution better or we want to make it even more obvious?

[elioqoshi]

I am not @danielmutis but here are my 2 cents:

• 767676 is the lightest gray which still satisfies WCAG AA color contrast on pure white. That could be used for read topics. Anything lighter than that would have accessibility problems. @solazio you seem to use #888 in the example above so that should be fine (unless you choose to use another row background colour).

One way to make it clearer, is to use a bolder text weight for unread and a lighter weight for read. For example you could use Ubuntu Light for read topics and Ubuntu Regular or Medium for unread topics. Similar like in Email clients (check gmail, they do a similar pattern).

Let me know what you think!

[evilnick]

A change of weight is more obvious as @elioqoshi says, and also makes the tonal difference clearer - the human brain doesn't do well at determining how grey something is without a lot of samples (by design!).

[spencerbygraves]

@tbille can we try a couple of things please to see if it's an improvement.

• Make the unread style regular weight (400) and use our color-dark of #111111
• Make the read style light weight (300) and use our color-mid-dark of #666666, which we use on our muted text style

Thanks

[solazio]

This is now fixed.