As a long-time macOS user and software developer, I‘ve seen the appearance of links on Apple platforms evolve significantly over the years. From the early days of simple blue underlines in Safari to today‘s more nuanced color schemes across apps and interfaces, link styling has played an essential role in shaping the usability of the Mac experience.
However, the default link colors chosen by designers haven‘t always served the needs of users with color vision deficiencies, which affect approximately 1 in 12 men (8%) and 1 in 200 women (0.5%) worldwide[^1^]. For people with conditions like deuteranomaly or protanomaly, blue and purple links can be difficult to distinguish from each other and surrounding text, making navigation slower and more error-prone.
Thankfully, macOS and its built-in apps provide several ways to customize link appearance for better visibility and accessibility. In this guide, we‘ll explore how to change link colors in Safari, Mail, and other native Mac software, as well as some third-party tools for optimizing contrast and legibility. By the end, you‘ll have a deeper understanding of how to create an inclusive digital environment that works for you and your users.
The Evolution of Link Colors in macOS
To appreciate the current state of link styling on Mac, it‘s helpful to look back at how Apple‘s design language has changed since the early 2000s. Here are a few key milestones:
-
Mac OS X 10.0 (2001): The first release of Mac OS X used a simple blue (#0000EE) for links across all built-in apps like Internet Explorer and TextEdit. Visited links were purple by default.
-
Safari 1.0 (2003): With the introduction of Apple‘s own web browser, links gained underlines on hover and a lighter shade of purple for visited pages. However, these colors remained inconsistent between websites.
-
iTunes 4 (2003): iTunes began displaying links in its music store with a darker blue and no underline, setting a trend for "flat" link styles in Mac apps.
-
iPhone OS 1 (2007): The launch of the iPhone prompted a renewed focus on legibility and accessibility, with higher contrast link colors and the use of visual indicators like chevrons to denote tappable elements.
-
OS X Yosemite (2014): Yosemite introduced a new system-wide appearance with thinner fonts and more white space. Blue link colors became brighter and more saturated across apps.
-
macOS Mojave (2018): Mojave brought an optional systemwide dark mode that automatically adjusted link colors for better readability. Safari also gained a new "Intelligent Tracking Prevention" feature that broke many websites‘ custom link styles.
-
macOS Big Sur (2020): Big Sur‘s refreshed UI included more colorful blue links in toolbars and sidebars, while keeping underlines minimal. Safari 14 also introduced support for the :focus-visible pseudo-class to improve link keyboard navigation.
As we look ahead to macOS in 2023 and beyond, it‘s clear that link styling will continue to evolve in response to changing design trends and user needs. By staying informed about these changes and proactively optimizing for accessibility, we can create more intuitive and inclusive digital experiences for all.
The Importance of Inclusive Design
Inclusive design is about creating products and interfaces that are usable and accessible to the widest possible audience, regardless of their abilities or circumstances. This philosophy has become increasingly important in recent years as our society has recognized the diversity of human experiences and the need for more equitable access to technology.
For software developers and web designers, inclusive design means considering the needs of users with visual, auditory, motor, and cognitive impairments at every stage of the creative process. This includes choosing color palettes that are easy to perceive for people with different types of color blindness, which affects millions of individuals worldwide:
| Type of Color Blindness | Prevalence in Males | Prevalence in Females |
|---|---|---|
| Deuteranomaly (green weak) | 5% | 0.35% |
| Protanomaly (red weak) | 1.08% | 0.03% |
| Tritanomaly (blue weak) | 0.001% | 0.03% |
| Deuteranopia (green blind) | 1.27% | 0.01% |
| Protanopia (red blind) | 1.01% | 0.02% |
| Tritanopia (blue blind) | 0.0001% | 0.0001% |
| Monochromacy (totally color blind) | 0.00001% | 0.00001% |
Data sourced from Colour Blind Awareness[^2^]
As these statistics show, red-green color blindness is by far the most common form, impacting around 6-7% of males and 0.4% of females to some degree. For this group, the most problematic color pairings are shades of red/green, green/brown, blue/purple, and green/blue.
To design more accessible digital products, then, we need to move beyond using color alone to convey information and instead leverage multiple visual cues like contrast, positioning, and iconography. This is especially critical for interactive elements like links, buttons, and form controls, which should be easily identifiable and clickable regardless of one‘s color perception.
Improving Link Accessibility on Mac
With these principles in mind, let‘s look at some specific ways to enhance link colors and styling on macOS for better usability:
Customizing Link Colors in Safari
As Apple‘s built-in web browser, Safari is where many Mac users spend a large portion of their time online. While you can‘t change Safari‘s default link colors directly, there are a few workarounds to optimize contrast and legibility:
-
Enable the "Increase contrast" option in Settings > Advanced. This will darken UI elements like buttons and form fields for improved visibility.
-
Use the free NightEye extension to enable a customizable dark mode that inverts colors and enhances contrast across all websites. You can adjust the link settings under NightEye‘s Style options.
-
Install the open-source Cascadea extension to create your own custom stylesheets for specific sites using CSS. For example, you could use the following code to make links more prominent:
a { color: #00e; text-decoration: underline; font-weight: bold; } a:visited { color: #609; } -
Enable Safari‘s "Show Reader" icon in Settings > Advanced and use Reader mode to read articles with more accessible link styling. You can customize the background color and font size under the Reader view settings.
Adjusting Link Appearance in Mail
macOS‘s built-in Mail app lets you customize both the color and underline style of links in messages:
- Go to Mail > Preferences > Fonts & Colors.
- Select "Links" in the list of message components.
- Click the "Text color" box to choose a new color for links using the picker or by entering a hex code.
- Check or uncheck the "Underline" option to add or remove link underlines.
- Close the preferences window to apply your changes.
I recommend using a bright, high-contrast link color like #00e or #06c to make links stand out against both light and dark backgrounds. Adding underlines can also help distinguish links from surrounding plain text.
Optimizing Links in Notes and TextEdit
For Apple‘s Notes and TextEdit apps, which use rich text formatting, you can style links on a per-document basis:
- Select an existing link or create a new one by highlighting text and pressing Cmd+K.
- Click the "A" icon in the toolbar to open the font panel.
- Go to the "Color" tab and choose a new link color from the picker.
- Optionally, add an underline or background color to the link for further emphasis.
When collaborating with others in shared notes, be sure to choose link colors that meet the WCAG‘s minimum contrast guidelines to ensure readability for all participants.
Checking Color Contrast
To verify that your custom link colors provide sufficient contrast against the background, you can use tools like the open-source Contrast app for macOS. Just select your foreground and background colors using the picker, and Contrast will calculate the luminance ratio and WCAG level for normal and large text sizes.
For a quick browser-based solution, the WebAIM contrast checker also lets you test color combinations and save your custom palettes for later reference. Aim for a minimum ratio of 4.5:1 for normal text links and 3:1 for large text (18pt+) to meet WCAG AA standards.
Simulating Color Vision Deficiencies
To get a sense of how your link colors will appear to users with different types of color blindness, check out the Color Oracle app for Mac. It applies color vision filters to your entire screen in real-time, letting you experience your design through the eyes of someone with protanopia, deuteranopia, or tritanopia.
For a more precise evaluation, upload screenshots of your interfaces to the Coblis color blindness simulator. It can generate filtered images showing how your links will look with eight different types of color vision deficiency.
Advocating for Better Link Accessibility
Beyond optimizing your own Mac environment, there are also opportunities to advocate for better link accessibility across the broader digital ecosystem:
-
If you encounter a website or app with poor color contrast, reach out to the creator and kindly explain the accessibility barriers it creates. Share resources like the WCAG guidelines and offer to help implement more inclusive design.
-
When designing your own products, prioritize accessibility from the start by choosing high-contrast color palettes, supporting keyboard navigation, and testing with assistive technologies. Solicit feedback from people with a range of abilities and incorporate their insights.
-
Contribute to open-source accessibility projects on GitHub, such as Spectrum by Adobe or a11y-color-tokens by Salesforce, which provide inclusive color palettes and tools for designers and developers.
The more we normalize accessible practices and lead by example, the faster the tech industry will embrace inclusive design as the default standard.
Looking Ahead
As digital experiences become increasingly central to our daily lives, the ability to perceive and interact with on-screen elements is essential for full participation in work, education, and society. By proactively designing for the diversity of human visual abilities, we can create a more equitable and empowering technological landscape for all.
On macOS, this means continuing to push for more user customization options, higher contrast UI elements, and smarter defaults that adapt to individual preferences. It also requires a cultural shift within the design and development community to prioritize accessibility not as an afterthought, but as a core principle guiding every decision.
As a Mac user and software creator, you have the power to shape this inclusive future by being an advocate and an example. By optimizing your own link colors, sharing your knowledge with others, and supporting accessible products, you can help make the digital world a more welcoming place for everyone. The future of inclusive design is ours to write — one hyperlink at a time.
References
[^1^]: Color Blind Population – Colblindor
[^2^]: Types of Colour Blindness – Colour Blind Awareness