WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Default visual focus ring in Safari and other browsers

for

From: Philip Kiff
Date: Nov 8, 2018 11:16AM

On 2018-11-08 11:51 AM, Subramanian, Poornima (PCL) wrote:

> I have a question re. the 'default visual focus ring in browsers'....Any thoughts on the criticality of this issue, and what is the best way to address this?
You're talking about the border around input boxes in different focus
states, right? These things are all controlled by your CSS or by the
built-in browser defaults. WebAIM recently updated their article on
colour contrast requirements in light WCAG 2, and they address the
question of different colours for different focus "states" on input box
borders under the heading "Non-text Contrast":
https://webaim.org/articles/contrast/#sc1411

The quick summary is that interface components in different states (like
focus) must have 3:1 contrast now, except when "determined by user
agent" - i.e., you can leave them at their defaults and don't apply any
custom CSS at alland that will pass WCAG even if the contrast is poor,
but it is probably best practice is to actively customize them using
custom CSS to ensure that they have 3:1 contrast in each different state.

Phil.

Philip Kiff
D4K Communications