Tomas Martty

Thoughts & random stuff

WhatsApp Web: clearer message delivery status

1 month ago · 1 MIN READ

Being colorblind myself I always found it hard to use WhatsApp and differentiate whether my messages had been read or not.

So this

Send message

and this

Recieved message

look 90% the same to me at first sight (if you're also having trouble you might want to do a colorblind test). If I focus and get closer to the screen I'd be able to differentiate them, but why not make it more noticeable at a glance?

So I decided to build a browser extension that provides an easier way for the colorblind to identify WhatsApp Web message delivery status (sadly we can't modify the native apps though). This extension would simply make blue double-tick images a full round circle instead (for chat messages as well as those in the sidebar).

Recieved message 2.0

All it took was a bit of CSS:

span[data-icon="status-dblcheck-ack"] svg,
span[data-icon="msg-dblcheck-ack"] svg {
    background: rgb(79, 195, 247);
    border-radius: 100%;
}

span[data-icon="status-dblcheck-ack"] svg {
    width: 14px;
    height: 14px;
    margin-top: 2px;
}

span[data-icon="msg-dblcheck-ack"] svg {
    width: 10px;
    height: 10px;
    margin-top: 3px;
}

Ta da!

Download for Firefox or Chrome

15 claps

···

Tomas Martty

Entrepreneur & Developer

Built with Canvas
Hosted with DigitalOcean