jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis Generador de anillo de foco CSS

Crea reglas CSS :focus-visible accesibles con outline o box-shadow y verificación de contraste.

Cargando herramienta...

Qué es Generador de anillo de foco CSS?

A focus ring is the visual indicator that shows which element is currently focused by the keyboard. WCAG 2.4.7 requires a visible focus indicator for all interactive elements. CSS :focus-visible targets keyboard focus specifically without showing a ring on mouse clicks. A good focus ring has sufficient contrast (3:1 minimum) against the background.

Respuesta rápida

Generate an accessible keyboard focus ring CSS rule. Use :focus-visible to show the ring only for keyboard navigation. Ensure at least 3:1 contrast between the focus color and the background. Add a box-shadow fallback when you need rounded focus rings.

Limitaciones

  • Outline does not follow border-radius in all browsers. Chrome and Safari draw outlines with square corners on rounded elements. Use box-shadow as a fallback for rounded focus indicators.
  • The focus ring contrast check uses a simplified relative luminance calculation. Actual perceived contrast depends on the surrounding UI — test visually with real content.
  • Some operating system high-contrast modes override author focus styles. Always test with Windows High Contrast Mode and macOS Increase Contrast settings enabled.

Cómo usar esta herramienta

  1. Set the focus ring width, offset, color, and style, or choose box-shadow as a fallback.
  2. Specify the CSS selector — :focus-visible for keyboard-only focus, or :focus for all focus.
  3. If using a background color field, the tool checks the contrast ratio and warns if it falls below WCAG thresholds.
  4. Copy the CSS rule and apply globally or to specific components.

Para qué puedes usarla

  • Create a global keyboard focus style that meets WCAG 2.4.7 visible focus requirements.
  • Design a brand-aligned focus ring that matches the site color palette while maintaining accessibility.
  • Replace the default browser outline with a custom box-shadow focus indicator that works on rounded elements.

Casos de uso

Ejemplos prácticos

Ejemplo

Global keyboard focus style

Set a 3px solid blue outline with 2px offset on :focus-visible for all interactive elements. The ring shows only when users navigate by keyboard and has 5.6:1 contrast against white backgrounds.

Ejemplo

Dark theme focus ring

For a dark-themed application, use a 3px solid white outline on :focus-visible. The tool confirms the white ring has sufficient contrast against the dark background.

Errores comunes

  • Setting outline: none without providing a replacement — this removes the focus indicator entirely and violates WCAG 2.4.7.
  • Choosing a focus color that blends with the background — the ring must have at least 3:1 contrast to be perceivable.
  • Using :focus instead of :focus-visible — :focus shows the ring on mouse clicks too, which can look visually noisy. :focus-visible targets keyboard navigation only.

Verificación

  1. Tab through the page with the keyboard and confirm each interactive element shows a clearly visible focus indicator.
  2. Use a contrast checker tool or browser extension to verify the focus ring color has at least 3:1 contrast against the adjacent background.

FAQ

Preguntas sobre Generador de anillo de foco CSS

Should I use outline or box-shadow for focus rings?

Outline is the native focus mechanism and works on all elements. Box-shadow is useful when you need rounded focus rings (outline follows the element box, not border-radius in all browsers) or when you need a more prominent visual style. Never remove the outline without replacing it with an equally visible indicator.

What is the minimum contrast ratio for a focus indicator?

WCAG 2.4.7 requires a visible focus indicator. While the spec does not mandate a specific ratio, WCAG 2.2 Non-text Contrast (1.4.11) requires UI components to have at least 3:1 contrast. Applying this to focus indicators: the ring should have at least 3:1 contrast against the adjacent background.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también