CSS のリンク色とプレースホルダー色をアクセシブルに設定する

リンクは色だけに頼らずに見分けられる必要があります。下線は最もシンプルで確実な手がかりで、ホバーやフォーカスのスタイルはその区別を置き換えるのではなく補強するものです。

a { color: #1d4ed8; text-decoration: underline; }
a:hover { color: #1e40af; }
a:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
a:visited { color: #6b21a8; }

ブルーの濃淡コレクションは出発点として便利なスケールです。フォーカスインジケーターも含め、各状態を実際の面の上でコントラストチェッカーを使って確認しましょう。

長いページやドキュメントサイトでは、訪問済みリンクの色も重要です。紫の訪問済み状態は現在地の把握に役立ちますが、通常のリンク色と同じく読みやすいコントラストが必要です。

プレースホルダーはラベルではない

プレースホルダーは短い例やヒントです。入力すると消えてしまうため、常に表示される <label> の代わりにしてはいけません。

input::placeholder {
  color: #6b7280;
  opacity: 1;
}

ブラウザによっては、以前はプレースホルダーの不透明度を下げていました。opacity: 1 を指定すると、選んだ色がそのまま表示されます。プレースホルダーにも読める程度のコントラストは必要ですが、入力された文字よりは視覚的に控えめであるべきです。候補はグレーのスケールから比較しましょう。

プレースホルダーが薄すぎると、空の入力欄が無効状態に見えることがあります。濃すぎると、ヒントが入力済みの内容に見えてしまいます。ライトモードとダークモードの両方のフォームでテストしましょう。

名前の分からないデザイントークンを受け取ったら、カラー名検索で近い CSS カラー名や中国の伝統色名を探せます。名前は議論の助けになりますが、コードには正確な値を残しましょう。

より広い原則は、HTML と CSS で文字色を設定するで確認できます。