ハイパーリンクの色を調整する
Scrapbox のハイパーリンクの色を調整する UserCSS。Scrapbox のデフォルトテーマのリンクの色
#5e8af7 は明るすぎて少し読みづらい。
実際、白地
#fefefe の背景に対して contrast ratio が 3.22 とやや低い。この値は大きいテキストであれば WCAG の最低基準 (Contrast (Minimum) - Level AA) をクリアしているが、通常のテキストに対しては 4.5 以上を要求されている。他のサイトを参考にしてみる。
GitHub
文字色：
#0366d6 背景色：
#ffffff contrast ratio: 5.42 https://contrast-ratio.com/#%230366d6-on-%23ffffff
contrast-ratio.com と Chrome で値が少し違う。丸め方の違い？
Rustdoc
文字色：
#3873ad 背景色：
#ffffff contrast ratio: 4.97 https://contrast-ratio.com/#%233873AD-on-%23ffffff
Go の公式ドキュメント（最近配色が変わった）
文字色：
#007d9c 背景色：
#ffffff contrast ratio: 4.75 https://contrast-ratio.com/#%23007d9c-on-%23ffffff
Twitter
文字色：
#1da1f2 背景色：
#ffffff contrast ratio: 2.83 https://contrast-ratio.com/#rgb(29%2C161%2C242-on-%23ffffff
Contrast ratio も良く、また見慣れているので GitHub のリンク色を使うことにした。ついでに下線を hover したときだけに描画するようにした。
style.css.line a.link, .line a.page-link {
color: #0366d6;
text-decoration: none;
}
.line a:hover {
text-decoration: underline;
}参考