Best Practices for Link Styling
Overview
Effective link styling is essential for clarity, usability, and accessibility. Links must be clearly distinguishable from surrounding text without relying solely on hover interactions. This guide outlines the recommended approach for styling text links across states, with an emphasis on visual distinction, contrast, and consistency.
Link Styling Principles
Underline only on hover.
Our default styling omits underlines for link text until the user hovers over it. This approach keeps content visually clean, but it also introduces a usability concern: if the link color matches body text, users won’t know a link is present unless they happen to hover.
To address this, links must be styled with a color that clearly differentiates them from surrounding text, even in the absence of an underline.
Link Color Selection
Use a link color that contrasts effectively with body copy and background. Our hierarchy for selecting link color is:
- Primary, secondary, or accent brand colors — when contrast and accessibility allow.
- Standard Google Blue (
#1a0dab) — the fallback when brand colors do not meet contrast standards, especially on white backgrounds.
Always verify that the chosen color meets our
contrast guidelines.
Do not use black or default text matching colors for links.
