How can I change link colors in Firefox and Chrome, but leave all other colors and fonts as they are?
Some people who suffer protanomaly can hardly distinguish red text from black text on computer screens. Many web pages, like AskUbuntu.com, show visited and unvisited text links in red'ish colors. That reduces usability drastically for those affected.
How do I change the color of un/visited text links of Firefox and Chrome on Windows and Linux to classic blue'ish colors, thus making the web usable for people who suffer protanomaly?
The settings of Firefox and Chrome offer to override fonts and colors, for example, Firefox → menu Edit → Preferences → Content → Colors... → untick Allow pages to choose their own colors. But that changes all fonts and all colors of every element. That's not desired; just the color of text links, no more no less.
Firefox
You can do this by editing (or creating if it is not there) the file userContent.css. Its location depends on the platform (the parent folder can also be found in menu Help → "More Troubleshooting Information" → section "Application Basics" → field "Profile Directory" ("Profile Folder" on Windows). An alternative way to using the menus to open the Troubleshooting Information page is the "URL" about:support. To find the location for other than the current active profile, use the "URL" about:profiles (will open the "About Profiles" page) and press button "Open Directory" in the "Root Directory" row for a profile):
Linux
$HOME/.mozilla/firefox/[xyz].default-release/chrome/userContent.css
Windows
Depending on the Windows version and other configuration, userContent.css is in one of the following folders:
-
C:\Documents and Settings\[username]\Application Data\Mozilla\Firefox\Profiles\[xyz].default\chrome. -
C:\Users\[username]\AppData\Roaming\Mozilla\Firefox\Profiles\[xyz].default\chrome(more generally, it is%APPDATA%\Mozilla\Firefox\Profiles\[xyz].default\chrome).
Common for Linux and Windows
You may have to create the chrome subdirectory and the file userContent.css.
Add these lines to that file to change the colors (obviously, you can change the actual colors used to whatever you prefer - e.g., using Paletton Live Colorizer):
a { color: #333388!important; } /* Unvisited link color */
a:visited { color: #333340!important; } /* Visited link color */
Also, for later versions of Firefox (69 and later), check that toolkit.legacyUserProfileCustomizations.stylesheet in about:config is true. In some cases it is automatically set to true when file userContent.css is created, but that is not always the case.
In most cases Firefox has to be restarted before it takes effect (or rather, the profile in which these settings have been changed. There is a current active profile, but if more than one is in active use, this has to be considered).
Note that both file userContent.css and setting toolkit.legacyUserProfileCustomizations.stylesheet are per profile (they are not global settings), so if using more than one profile it must be copied to the sub folder in the particular profile folder, and set in each profile, respectively. The same goes for restarting - close the corresponding window and in the case of a non-default profile, open it from the default profile (e.g., from "URL" about:profiles).
Chrome
You can do the same for Chrome by editing $HOME/.config/google-chrome/Default/User\ StyleSheets/Custom.css which on Windows, is located at %USERPROFILE%\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css.