Hi!
Changing the visible focus of the browser can be problematic.
When the background is light, we need a dark visible focus, for contrast, but when the background is dark the visible focus must be light or it will not contrast enough.
You can always customize the focus for each element, but this is not very maintainable in the long run, because every time the design changes you have to remember to change the focus color on each element, and it is not very aesthetic or consistent to have a focus of different colors on the same website.
One solution is the two-color focus technique. Visually it is perceived as a solid double black and white border, which allows it to contrast at the same time on light and dark backgrounds.
By example:
*:focus {
padding: 2px;
outline: 2px #fff solid;
outline-offset: 0;
box-shadow: 0 0 0 4px #000;
border-radius: 2px;
}
This is a W3C technique.
At this link you can see code examples and more information:
https://www.w3.org/WAI/WCAG21/Techniques/css/C40
teresa_rodriguez → created an issue.