1.3 Do not customize the visual aspect of the focus

We strongly recommend not customizing the default keyboard focus styles, as it is sufficiently visible and provides good contrast, except in specific edge cases.

Note

Focus is not visible when using a mouse (the browser’s default focus style relies on the :focus-visible CSS pseudo-class, which only displays focus for keyboard users).

Firefox’s default focus style is a double border in blue and white.
Chrome’s default focus style is a double border in black and white.

Warning

If visual customization of the focus style is desired, different styles should be defined depending on the background color to ensure sufficient contrast in all scenarios.

This customization may become a source of errors, as it can be challenging to maintain over time (design changes, integration of components from external libraries, and so on).

Comments

Back to top