Caret color and focus visibility for accessibility

The caret is a visibility signal too

The text caret, the blinking vertical line in an input or a textarea, is how a user knows where their typing goes. Its default colour comes from the browser and can be almost invisible against a dark field. The caret-color property recolours just that line without touching the surrounding element:

input, textarea {
  caret-color: #1a73e8;
}

It refines the view without affecting what the text itself looks like. Keep the caret contrast raised against its field so the insertion point reads on small screens and in dark mode.

The focus outline is a promise, not decoration

Keyboard navigation works because the browser draws a focus ring around the currently focused element. Removing it, the widespread outline: none on focus, breaks that contract for anyone navigating by keyboard, and it is the most common accessibility regression in a custom focus pass.

The honest rules:

• Never remove the focus outline without replacing it. If you reset it, supply an equivalent visible indicator immediately afterwards.
• Prefer :focus-visible over :focus for showing a ring. :focus-visible shows the ring for keyboard and other non-pointer focus, but avoids flashing it on every mouse click, which is the intended behaviour of the selector.

:focus-visible {
  outline: 2px solid #cd3b0f;
  outline-offset: 2px;
}

Contrast still governs the indicator

A focus ring or caret that matches the theme but is too faint helps no one. Two checks keep it accessible:

1. Contrast of the ring against its background. The focused element's outline should differ clearly from the surrounding page, tested at the element's background, not against white.
2. Contrast of the caret against the field. caret-color should read against the input's background, which for a light-on-dark design can mean a light caret rather than the default dark one.

Drive the colours from CSS custom properties so both the caret and the ring use the same named tokens, and verify the pass over the page with the accessibility checks. A visible caret and a visible focus ring are small rules, but they are the difference between a page that keyboard users and low-vision users can actually operate and one that hides where they are, which this tutorial's whole point is to prevent.