Two Safari Quibbles

February 3, 2017 • 3 min read

Update: Since I originally wrote this post, Safari has gained favicon support. This change was enough to make me switch to Safari from Chrome.


As a student, the flexibility of a PC is indispensable. And judging by the technology used by my peers, this is true of near every student. However, it is still true that the majority of my computing (maybe ~60%) happens in the web browser.

On macOS, Safari and Google Chrome are the two powerhouse web browsers. Both have support for modern web standards, and both are very extensible. But Safari has two clear advantages: two-finger scrolling responsiveness and power efficiency. The best comparison I can make between two-finger scrolling in the two web browsers is scrolling in Android and iOS. Chrome feels like scrolling in Android: not bad, but not good. Safari feels like scrolling in iOS: fantastic. Once you tinker around in iOS, you realize how janky Android scrolling is (I use a Moto X Android phone). And there might not be a more important feature than power efficiency. Because of how heavily I use the web browser it is often the largest consumer of battery life.

Having listed Safari’s advantages over Chrome, there are still two quibbles I have with Safari that keep me using Chrome. And both have to do with the way tabs are displayed in Safari. Note that I have Increase Contrast selected in Accessibility.

safari-tabs.pngSafari tabs.

chrome-tabs.pngChrome tabs.

1. Lower Contrast Text

First, the text contrast of website titles in Safari is lower than in Chrome, which makes them harder to read. This quibble might be a function of using a non-retina MacBook Air, as I could see a sharper, more color accurate screen alleviating these issues. Even though Safari has lower contrast than Chrome, its text contrast is still above the 7:1 contrast ratio recommended by Apple.

Web Browser Contrast Ratio Text Color Background Color
Chrome (foreground tab) 19.1:1 rgb(0, 0, 0) rgb(243, 243, 243)
Safari (foreground tab) 14.4:1 rgb(0, 0, 0) rgb(214, 214, 214)
Chrome (background tab) 14.3:1 rgb(0, 0, 0) rgb(213, 213, 213)
Safari (background tab) 10.7:1 rgb(0, 0, 0) rgb(185, 185, 185)

2. No Favicons

The decreased legibility of Safari tab labels wouldn’t be such a large issue if not exacerbated by my second quibble: no favicons next to website titles.

Here’s my reasoning for why Safari does not show favicons. Safari tabs are implemented using native macOS tabs that can be found in TextEdit, Finder, etc. And in every other application, tabs are labeled only with text.

Even so, for me, favicons are the single most important identifier for different tabs. With favicons, I can glance at an icon instead of reading text to figure out which tab is which. Even better, as you navigate to different pages of a website, often the title will change, but the favicon does not. So the favicon offers a certain degree of reliability that text labels do not.

To my point, where appropriate, Apple features icons on many other labels around macOS.

mac-icons.pngIcons used in System Preferences, Finder, and the “Command-Tab” Application Switcher.

Even Safari uses the Touch Bar to display favicons, not text labels.

macbookpro-touch-bar-safari-favorites.pngImage from Apple.

Fingers crossed—🤞🤞—here’s to favicons and increased text contrast in Safari tabs.