Anticipate Blue Light Filters When Designing For The Web

I just no­ticed that I can’t tell a link apart from nor­mal text on this blog when I have blue light fil­ter en­abled, es­pe­cially when it’s nes­tled in a large body of con­tin­u­ous text. There are a few rea­sons for this: I use a dark shade of blue as the ac­cent color of this blog, and I have cho­sen to re­move un­der­lines from links be­cause of ty­po­graph­i­cal rea­sons (al­though, there is ev­i­dence to sug­gest con­trar­ily).

I started us­ing a blue light fil­ter called Redshift on my com­puter more than 5 years ago. Back then, blue light fil­ters weren’t quite as hyped as they are now. So I al­ways as­sumed that I was one of the very few peo­ple who ever used them. These days, every lay­man-ori­ented op­er­at­ing sys­tem comes with blue light fil­ter­ing fea­ture baked in. Even phones come with night mode by de­fault.

So I think it’s bet­ter to start de­sign­ing with blue light fil­ters in mind. I’ll admit that this is a fairly spe­cial­ized prob­lem. The pro­por­tion of peo­ple that ac­cess your web­site at night time and hap­pen to have a strong blue light fil­ter en­abled is prob­a­bly not very high.

But I mostly write tech­ni­cal posts tar­get­ing pro­gram­mers and sim­i­larly com­puter-fac­ing peo­ple. And pro­gram­mers are ex­actly the kind of peo­ple who both stay up late and have enough in­cen­tive and ini­tia­tive to set up blue light fil­ters. So, it seems that I’m the kind of per­son who needs to keep the pos­si­bil­ity of blue light fil­ters in mind.

And it is a fairly easy thing to do. I sim­ply have to ask my­self: is the mean­ing of this el­e­ment lost when the blue-light fil­ter is cranked up?” In other words, is color the only in­di­ca­tor of the el­e­men­t’s prop­er­ties? If so, changes need to be made.

If you’re al­ready de­sign­ing your web­sites for ac­ces­si­bil­ity then you’ve prob­a­bly al­ready solved this prob­lem with­out even car­ing about it. But then again, there might be some night light spe­cific de­sign prob­lem that you did­n’t re­alise.

I try to de­sign web­sites with ac­ces­si­bil­ity when the time al­lows for it, but I just caught this blue light fil­ter prob­lem to­day. Actually, I al­ready had this prob­lem years ago, but my de­fault re­sponse has al­ways been to turn off the fil­ter tem­porar­ily. In fact, I can prob­a­bly type Ctrl+R pkill redshift ⏎ faster than I can type aiypwzqp or some other San Andreas cheat.

The de­fault as­sump­tion has al­ways been that it’s my fault when the web­site or video does­n’t work as in­tended be­cause of night light. But with more and more peo­ple start­ing to have their blue light fil­ters turned on, I think it’s time that web de­sign­ers start an­tic­i­pat­ing it and de­sign­ing around it.

In ni­, I get around the prob­lem by sim­ply ital­i­ciz­ing the links. It’s a very small site, so this works. But in a blog such as this, ital­ics in text of­ten has other mean­ings. I would­n’t want a link in my para­graph to con­vey em­pha­sis or sar­casm to the blue light en­abled mon­i­tor.