Optimizing Anchor Tag Color for Light & Dark Modes: Boosting Accessibility and PageSpeed Scores

April 2, 2023 • Front-end • CSS • Accessibility

Caption: A detailed photo of a chipmunk carefully selecting colors from a paint store taken with a full-frame DSLR camera, using a 50mm prime lens with cinematic lighting —v 5 —ar 16:9

Picking an anchor tag color is extremely easy as long as you are coding/designing for only one color scheme and don’t care much about how much CSS you write. However, as I mentioned in my 120-Byte Responsive CSS for Auto-Adapting Light/Dark Mode post, I’ve been trying to write the smallest amount of CSS to cover the largest amount of use-cases.

If you ask me, the ideal situation is using LinkText - which defaults to the browser’s or OS’s anchor tag color - should be absolutely sufficient for this type of use-case. However, it is almost comically insufficient. For example, MacOS Chrome defaults to #0000EE (You can check your situation at System-Colors). The light mode is perfectly fine with this one. It is THE anchor tag color you see everywhere since the beginning of time. But as you know, it’s no longer the 90s and people tend to use dark mode a lot. And this default color fails the accessibility test hard in dark mode.

By the way, Google PageSpeed Insights doesn’t care about dark mode if you consider the context, which is color-scheme: light dark;. Google scans for the light mode, and light mode is perfectly fine. It is the dark mode that’s abysmal.

This situation made me lazily pick a color that kinda works when looked at with a naked eye. But turns out, it was even worse than #0000EE in terms of a machine checking for accessibility.

This failure, of course, hurts your audience members that specifically need the proper contrast levels to be able to consume the website properly but also hurts your Google PageSpeed Insights scores. To be exact, this new color dropped my hard-earned 100/100 score to 93/100 for my personal website that you are reading this blog post at.

My website and upcoming classless CSS snippet h2o.css use color-scheme: light dark; which automatically adjusts the color scheme and assigns whatever colors browsers provide. It’s great for dropping your CSS size. But since #0000EE is a really bad color for dark mode, I have to choose a new color that comforts both light mode and dark mode accessibility tests, and increases my Google PageSpeed Insights score back to 100/100.

This promised color is #6161ff. It is almost perfect, as it meets AA accessibility contrast standards fully. However, AAA accessibility contrast requirements are only met with large text. So this color fails to pass AAA small text accessibility requirements for both light mode and dark mode. But apparently, Google doesn’t care, as it bumped my score from the disgusting 93/100 to perfect 100/100 again.

Life’s good.