What colors should we use instead?

I think changing this to Base80 from the styleguide, that is #eaecf0 should make it better, I tested it with a good screen in the sun so YMMV. @Pginer-WMF
what do you think.

Once we agree on a color we could put up this task for Google-Code-in-2017.

Testing with colors from the styleguide.

Current	Base 90	Base 80	Base 70
#f1f1f1	#f8f9fa	#eaecf0	#c8ccd1
			With other corrections

Reminder, that we've also got read/unread indicators in the top. How important is that difference with the additional notification badges that have to be interacted with before that dialog is presented to make the difference visually stronger?
Also, I'd like to put a word of caution about using a background-color with lower luminosity than Base80 with the secondary contents like user or date, which would fall below level AA accessibility then.

Related to T177723: Align Notifications/Echo to WikimediaUI color palette

The read notification color is still #f1f1f1, the :hover color was changed to #f8f9fa. @Pginer-WMF your input, please.

In T78594#3749563, @Volker_E wrote:

Reminder, that we've also got read/unread indicators in the top. How important is that difference with the additional notification badges that have to be interacted with before that dialog is presented to make the difference visually stronger?

Excerpts from Wikipedia talk:Notifications:

…the number in the little red background square was "2". I'm not sure how this number works, but if it goes to "0" with a gray background when someone just views the list without going to all the new diffs, here's what might have happened…

The act of clicking the red counter resets it to zero and grey regardless of what you then do.…If you exit and go back in, the top two have also become grey - as far as the notifications system is concerned, you've acted on them all.

I received 2 new notices, as indicated by the red counter, and went to my list. I saw the white background for the two messages, but it was very subtle and I wouldn't have noticed it if you hadn't mentioned it to me…

I made some tests and I'd go with Base80 in this case.

The lighter alternative (Base90) makes it hard to identify when the read section starts as you scroll, and darker alternatives give the completed items too much weight.

As Volker pointed out, using Base80 reduces the contrast with the text. Currently the secondary actions are shown initially at 50% opacity, we may want also to adjust them to be shown at 60% at least to increase the contrast a bit.

Thanks for your inputs @Volker_E and @Pginer-WMF, Base80 it is! I'll update the task description :)

I'd like to mentor this task for Google-Code-in-2017

Imported as: https://codein.withgoogle.com/dashboard/tasks/5636109377732608/

@Prtksxna I haven't found you as a mentor in the GCI site, can I ask, if you want to register as a mentor? Otherwise I'll happily co-mentor the task with you for the communication on the GCI platform :) Thanks for your effort investing in getting the task finished with one of our students this year! :)

Change 396554 had a related patch set uploaded (by Albert221; owner: Albert221):
[mediawiki/extensions/Echo@master] Better color to represent read notifications

https://gerrit.wikimedia.org/r/396554

Change 396554 merged by jenkins-bot:
[mediawiki/extensions/Echo@master] Better color to represent read notifications

https://gerrit.wikimedia.org/r/396554

Checked in betalabs - the background colors (read/unread with hover on states) work as expected.

Thanks @Albert221!