[css-ui] Two different colours for a "double" style outline · Issue #1172 · w3c/csswg-drafts (original) (raw)

I'm on the WCAG team and we are discussing requirements for the next version 2.1 that would require focus contrast in interactive elements.

With different colours of buttons there is almost no one focus indicator colour that could be used across the site. However Apple addressed this issue with their VoiceOver screen reader, by providing two lines to indicate focus, one black and one white. So the indicator is always visible regardless of the colour of the button.

This could be done in CSS if there was the ability to make the outline style "double" where the inside line and outside lines were different colours. Then one CSS class with this two color double line on the focus indicator would be visible across the entire site, without a lot of CSS fuss and development time.

 *:focus{ outline: #000000[inside] #ffffff[outside] double 5px;}