リンクの色:#0000FFがダメな理由と、代わりに使うべき8つのリンクカラー
純粋な青は誰もが最初に選ぶリンク色ですが、本文の隣でも暗い画面でも不向きです。下線を引き、ダークでは明るくし、訪問済みを示し、フォーカスリングを残しましょう。8つのコード付き。
正しいリンク色は、#0000FFそのものではなく、少しやわらかい青に下線を足したものです。純粋な青は誰もが最初に選ぶリンク色ですが、黒い本文の隣と暗い画面の2か所で失敗します。ここでは4つの修正と、開発者にそのまま渡せる8色を紹介します。
#0000FFがダメな理由
#0000FFを使おうと決める人はいません。気づくとそこにあるのです。CSSの blue キーワードであり、どのカラーピッカーでも最初に出てくる彩度の高い青だからです。
ブラウザ自身のデフォルトは少し違い、リンクが #0000EE、訪問済みが #551A8B で、どちらにも下線が付きます。下線は本来の約束事の一部です。デザイナーはすっきり見せたくて下線を消し、青だけを残します。
すると青が一人で仕事をするはめになります。純粋な青はとても暗い色です。ほぼ黒の本文の中に置くと、色の区別が苦手な人にはほとんど同じに見えます。暗い画面ではさらに悪く、#0000FFは背景に沈みます。
リンクとは、色、線、状態の3つでできています。
修正1:下線を引く
色だけ
下線あり
この背景にあるルールが、WCAG 1.4.1(色の使用)です。
色だけでリンクを示す場合は、周囲のテキストからはっきり目立たなければなりません。純粋な青と純粋な黒の組み合わせではそれができませんが、#0F62FE と、ここで使っているテキスト色 #161616 の組み合わせならできます。下線を引けば、リンクが色に依存しなくなるので問題自体が消えます。
下線は文章の流れの中にあるリンクに引きます。ナビゲーションバー、ボタン、カードは別で、位置や形がすでに「クリックできる」と語っているので、下線は任意です。
色だけ、グレースケール
下線あり、グレースケール
修正2:ダークでは明るくする
ダーク上の #0000FF
ダーク上の #78A9FF
勝負になりません。#161616 の上の #0000FF は本文サイズでは暗すぎて読めず、同じ背景の #78A9FF なら楽に読めます。白の上で機能する彩度の高い色は、暗い画面では明るくやわらかくします。エラーカラーでやったのと同じ手です。
青は2色だけ持ち、テーマで切り替えます。ライト画面は #0F62FE、ダーク画面は #78A9FF です。ホバーはさらに一段進め、ライトは #0043CE、ダークは #A6C8FF にします。
修正3:行ったことのある場所を示す
すべて未訪問に見える
訪問済みは紫
Nielsen Norman Groupは2004年から、訪問済みと未訪問のリンクが同じ色だと人は迷い、同じところをぐるぐる回ると主張しています。紫が慣習で、ブラウザは最初からそれを使ってきました。ライト画面は #8A3FFC、ダーク画面は #BE95FF を使います。必要なCSSルールは1つ、a:visited だけです。
修正4:フォーカスリングを残す
outline: none
2pxの #0F62FE リング
キーボード利用者、スイッチ操作の利用者、マウスを持つ手が疲れた人など、みんなフォーカスリングに頼っています。
outline: none で消して代わりに何も置かないのは、WCAG 2.4.7(フォーカスの可視化)に違反します。ブラウザ標準のリングがデザインに合わないなら、置き換えてください。消してはいけません。
リンク色の2pxのリングに、少しオフセットを付けるのが安全な形です。WCAG 2.2では、最も強い形として、少なくとも2 CSSピクセルの外周を挙げています。
8つのリンクカラー、ライトとダーク
チップをタップするとコードがコピーされます。
| 役割 | ライト | ダーク | 用途 |
|---|---|---|---|
| テキスト | #161616 | #F4F4F4 | リンクを囲む本文 |
| リンク | #0F62FE | #78A9FF | 通常状態のすべてのリンク |
| ホバー | #0043CE | #A6C8FF | ポインターがリンクに乗ったとき |
| 訪問済み | #8A3FFC | #BE95FF | すでに開いたリンク |
これらはIBM Carbonのリンクトークンで、公開されているテーマの値から読み取ったものです。
開発者に渡すコード
:root {
--color-text: #161616;
--color-link: #0F62FE;
--color-link-hover: #0043CE;
--color-link-visited: #8A3FFC;
}
@media (prefers-color-scheme: dark) {
:root {
--color-text: #F4F4F4;
--color-link: #78A9FF;
--color-link-hover: #A6C8FF;
--color-link-visited: #BE95FF;
}
}
a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.15em; }
a:visited { color: var(--color-link-visited); }
a:hover { color: var(--color-link-hover); }
a:focus-visible { outline: 2px solid var(--color-link); outline-offset: 3px; }
順序が重要です。:link、:visited、:hover、:focus、:active が定番の並びで、visitedルールより前に置いたhoverルールは、訪問済みリンクでは決して勝てません。:focus-visible セレクターはキーボード利用者にだけリングを見せ、マウスクリックでは出さないので、消したくなる理由がなくなります。
「読みやすい」を支える数字
| 組み合わせ | コントラスト |
|---|---|
| 白の上の #0000FF | 8.6対1。合格だが、それでも黒い本文に近すぎる |
| #161616 の上の #0000FF | 2.1対1、不合格 |
| 白の上の #0F62FE | 5.0対1 |
| 白の上の #0043CE | 7.8対1 |
| 白の上の #8A3FFC | 5.0対1 |
| #161616 の上の #78A9FF | 7.7対1 |
| #161616 の上の #A6C8FF | 10.6対1 |
| #161616 の上の #BE95FF | 7.7対1 |
最初の行が、チェッカーだけでは足りない理由です。白の上の純粋な青は、数値の上では合格します。しかし本当のテスト、つまりリンクが隣の黒いテキストと違って見えるかどうかには落第します。
FAQ
リンクは何色にすべき?
ライト背景では #0F62FE のような中間の青、ダーク背景では #78A9FF のような明るい青にし、本文中では下線を付けます。
#0000FFはリンク色として良い?
単独ではダメです。白の上では問題なく読めますが、青が見えにくい人には黒い本文に近すぎ、ダーク背景ではほとんど消えてしまいます。
リンクに下線は必要?
段落の中では必要です。WCAG 1.4.1は、周囲のテキストからはっきり目立たない限り、色だけでリンクを示してはいけないとしており、下線はその依存をなくします。
訪問済みリンクは何色にすべき?
紫です。ブラウザのデフォルトは #551A8B で、IBM Carbonなどのデザインシステムはライト画面で #8A3FFC、ダーク画面で #BE95FF を使います。
ダークモードで使えるリンク色は?
より明るい青です。#78A9FF は #161616 の上で楽に読めますが、#0000FF は本文サイズでは暗すぎて読めません。
リンクのフォーカスアウトラインを消してもいい?
別の目に見える表示に置き換える場合だけです。何も代わりを置かずに消すと、WCAG 2.4.7(フォーカスの可視化)に違反します。
出典
- HTML Living Standard, Rendering:デフォルトのスタイルシートは
:linkを #0000EE、:visitedを #551A8B に設定し、リンクに下線を引きます。#0000FF はCSSの名前付きカラーblueです。 - IBM Carbon color tokens、@carbon/themes 11.40.0 から取得:whiteテーマのlink-primaryは #0F62FE、hoverは #0043CE、visitedは #8A3FFC。g100テーマは #78A9FF、#A6C8FF、#BE95FF。
- WCAG 2, 1.4.1 Use of Color と技法 G183。
- WCAG 2.4.7 Focus Visible と 2.4.13 Focus Appearance。
- Nielsen Norman Group、Change the Color of Visited Links(Jakob Nielsen、2004年)。
- コントラスト比はWCAGの相対輝度の式で計算しています。サンプルテキストはこのページのために作ったものです。
- 最初に UX Brainy でカルーセルとして公開されました。
Want links, forms and every other state designed as one system? Our team designs and builds product UI that holds up in light and dark.
Get Started
