ハイパーリンクの色を調整する

Scrapbox のハイパーリンクの色を調整する UserCSS。Scrapbox のデフォルトテーマのリンクの色 #5e8af7 は明るすぎて少し読みづらい。

https://gyazo.com/4e00d040d4d2ef13a2526ce3237e00cd

実際、白地 #fefefe の背景に対して contrast ratio が 3.22 とやや低い。この値は大きいテキストであれば WCAG の最低基準 (Contrast (Minimum) - Level AA) をクリアしているが、通常のテキストに対しては 4.5 以上を要求されている。

他のサイトを参考にしてみる。

GitHub

https://gyazo.com/de7c75ebd9af8d1d545afd398dcade51

文字色：#0366d6

背景色：#ffffff

contrast-ratio.com と Chrome で値が少し違う。丸め方の違い？

Rustdoc

https://gyazo.com/6bc827d5b06fa431514cade8095eaf3f

文字色：#3873ad

背景色：#ffffff

Go の公式ドキュメント（最近配色が変わった）

https://gyazo.com/f088a3c1007365c15ca389b4e52ed07a

文字色：#007d9c

背景色：#ffffff

Twitter

https://gyazo.com/6ecd9bb5075ad36a9c18aa3bca6a323d

文字色：#1da1f2

背景色：#ffffff

Contrast ratio も良く、また見慣れているので GitHub のリンク色を使うことにした。ついでに下線を hover したときだけに描画するようにした。

code:style.css

.line a.link, .line a.page-link {

text-decoration: none;

}

.line a:hover {

text-decoration: underline;

}

参考