CSSのcaret-colorとは？入力カーソルの色を変える方法

WEBフォームに文字を入力するとき、入力位置を示す細い縦線だけを別の色にしたいことがあります。CSSのcaret-colorを使えば、文字色を変えずにその線の色を指定できます。ただし、入力欄の枠線やマウスポインターまで変わるわけではありません。どの部分に効くのかを確認し、実際の問い合わせフォームで使い方と注意点を見ていきましょう。

caret-colorで変わるのは文字の挿入位置を示す線

caret-colorはCSS（WEBページの見た目を指定するルール）のプロパティで、次に入力される文字の位置を示す「キャレット」の色を指定します。入力欄を選択したときに点滅することの多い細い縦線がキャレットです。<input type="text">やメールアドレス入力欄、<textarea>、編集可能なcontenteditable要素などで使えます。チェックボックスや日付の選択欄には、通常この文字入力用のキャレットはありません。

初期値はautoです。一般には入力文字の色を参照しますが、ブラウザーが背景との見分けやすさを考えて調整する場合があります。文字と同じ色を明示するならcaret-color: currentColor;、別の色にするならcaret-color: rgb(15 118 110);のように指定します。currentColorは、その要素のCSSのcolorを参照する値です。

キャレットは、マウスを文字の上に置いたときのI字型ポインターとは別物です。ポインターにはcursor、入力欄が選ばれていることを示す枠線にはoutlineなどを使います。また、選択中の文字の背景色もcaret-colorでは変わりません。

問い合わせフォームで入力カーソルだけを青緑にする例

メールアドレスとお問い合わせ内容を入力するフォームを考えます。フォーム全体の背景は淡いグレー■#F1F5F9、入力欄は白■#FFFFFF、入力文字は濃い青灰色■#1E293Bです。文字を落ち着いた色に保ちながら、挿入位置だけ青緑■#0F766Eで区別します。入力欄の境界はグレー■#64748B、キーボード操作などでフォーカスした際の外枠は青■#1D4ED8にします。

<div class="contact-sample">
  <label for="contact-email">メールアドレス</label>
  <input id="contact-email" type="email" autocomplete="email">

  <label for="contact-question">お問い合わせ内容</label>
  <textarea id="contact-question" rows="4"></textarea>
</div>

.contact-sample {
  max-width: 32rem;
  padding: 1.5rem;
  background-color: rgb(241 245 249);
  color: rgb(30 41 59);
}
.contact-sample label {
  display: block;
  margin: .75rem 0 .35rem;
  font-weight: 600;
}
.contact-sample :is(input, textarea) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: .75rem;
  border: 2px solid rgb(100 116 139);
  border-radius: .5rem;
  background-color: rgb(255 255 255);
  color: rgb(30 41 59);
  caret-color: rgb(15 118 110);
  font: inherit;
}
.contact-sample :is(input, textarea):focus-visible {
  outline: 3px solid rgb(29 78 216);
  outline-offset: 3px;
}

CSS内のrgb()は、赤・緑・青の数値で色を指定する書き方です。caret-colorは入力欄と複数行入力欄の両方に適用されます。実際に入力欄を選択するとキャレットの色を確認できますが、点滅や線の形はブラウザー・端末によって違う場合があります。HTMLのlabelとfor・idを対応させ、色だけに頼らず入力項目の名前も示しています。これは表示例であり、送信処理は含みません。

背景とのコントラストとフォーカス表示を確認する

今回の白い入力欄■#FFFFFFに対し、濃い青灰色の文字■#1E293Bのコントラスト比は約14.63:1、青緑のキャレット■#0F766Eは約5.47:1です。グレーの境界線■#64748Bと白い入力欄の比率は約4.76:1で、青いフォーカス枠線■#1D4ED8とフォーム外側の淡いグレー■#F1F5F9は約6.12:1です。

WCAG 2.2では、通常サイズの文字には4.5:1、操作部品やフォーカス状態を識別するために必要な非テキストの表示には隣接色との3:1が基準となります。カスタマイズしたキャレットが唯一のフォーカス表示なら、背景と見分けにくい色は問題になります。今回の例ではキャレットとフォーカス枠線を別々に用意していますが、細い線は数値上の差があっても見つけにくい場合があるため、実際の操作でも確認してください。

暗い入力欄を使う場合は、例えば背景を濃い青灰色■#1E293B、文字をほぼ白■#F8FAFC、キャレットを明るい水色■#67E8F9に変える方法があります。この場合、文字と背景は約13.98:1、キャレットと背景は約10.09:1です。ただし暗い背景に変えたら境界線やフォーカス表示もその画面に合わせて再確認します。

caret-color: transparent;は挿入位置の線を見えなくするため、通常の入力欄では避けましょう。キャレットの色だけで「入力可能」「エラー」などの意味を伝えず、ラベルや説明文、境界線も併用します。HueRollでは候補色のHEXコードや選択色と白・黒とのコントラストを確認できますが、任意の背景とキャレットの組み合わせを自動判定する機能ではありません。完成したフォームで確かめることが大切です。