E-mail List Archives
Thread: Does button:hover have contrast requirements?
Number of posts in this thread: 6 (In chronological order)
From: Henry, Michael (IntelliDyne)
Date: Wed, Jun 07 2017 12:55PM
Subject: Does button:hover have contrast requirements?
No previous message | Next message →
Hello everyone,
I've been searching but with limited time, it's been difficult to find this answer.
Is there a requirement (or best practice) that the hover/focus state of a button (not text link) have some measurable, distinct contrast from its default state?
I know that a button's hover/focus state should look distinctly different than its default state, but is there a numerical requirement that I need to measure, as there is with text color vs background color?
thanks!
Mike
From: Jared Smith
Date: Wed, Jun 07 2017 1:07PM
Subject: Re: Does button:hover have contrast requirements?
← Previous message | Next message →
WCAG and other guidelines do not have requirements that hover/focus states
be notably different in contrast or appearance from their default state. In
general, if the user is actively interacting with the element, then I don't
think a hover/focus state is vital, though it's certainly a good idea.
For mouse users, the state change could be relatively subtle - the user has
already actively hovered over the element and likely will have a cursor
change. I could argue that an overly distinct contrast change on hover
could be a bit distracting as the user explores the page with their mouse.
On focus, there must be a keyboard focus indicator, though this could be an
outline and does not have to be a contrast change - the subtle changes that
are suitable for mouse users are not generally sufficient (alone) on focus.
Thanks,
Jared
From: Meacham, Steve - FSA, Kansas City, MO
Date: Wed, Jun 07 2017 4:44PM
Subject: Re: Does button:hover have contrast requirements?
← Previous message | Next message →
When the indicator is a border-box, I'll measure it's contrast against the background to see if it meets WCAG requirements. If the item itself just changes color, I'd make sure that both the focus and unfocused colors have sufficient contrast to background, but I don't compare them to one another.
From: Mallory
Date: Sat, Jun 10 2017 10:45AM
Subject: Re: Does button:hover have contrast requirements?
← Previous message | Next message →
One could argue that if the focus state in particular is way too subtle
for a user, then for that user it breaks the Visible Focus rule.
On Thu, Jun 8, 2017, at 12:44 AM, Meacham, Steve - FSA, Kansas City, MO
wrote:
> When the indicator is a border-box, I'll measure it's contrast against
> the background to see if it meets WCAG requirements. If the item itself
> just changes color, I'd make sure that both the focus and unfocused
> colors have sufficient contrast to background, but I don't compare them
> to one another.
>
>
From: Karl Brown
Date: Mon, Jun 12 2017 1:36AM
Subject: Re: Does button:hover have contrast requirements?
← Previous message | Next message →
Generally I advise not just changing colour, but adding something else in,
e.g., adding an underline or a border. There isn't a specific requirement
to do so, though my view is that we want to make sure people can tell the
state has changed.
On Sat, Jun 10, 2017 at 5:45 PM, Mallory < = EMAIL ADDRESS REMOVED = > wrote:
> One could argue that if the focus state in particular is way too subtle
> for a user, then for that user it breaks the Visible Focus rule.
>
> On Thu, Jun 8, 2017, at 12:44 AM, Meacham, Steve - FSA, Kansas City, MO
> wrote:
> > When the indicator is a border-box, I'll measure it's contrast against
> > the background to see if it meets WCAG requirements. If the item itself
> > just changes color, I'd make sure that both the focus and unfocused
> > colors have sufficient contrast to background, but I don't compare them
> > to one another.
> >
> >
From: Henry, Michael (IntelliDyne)
Date: Mon, Jun 12 2017 9:41AM
Subject: Re: Does button:hover have contrast requirements?
← Previous message | No next message
Thanks, everyone, for the great feedback! I really appreciate this resource of experts!
Mike
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Karl Brown < = EMAIL ADDRESS REMOVED = >
Sent: Monday, June 12, 2017 3:36:33 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Does button:hover have contrast requirements?
Generally I advise not just changing colour, but adding something else in,
e.g., adding an underline or a border. There isn't a specific requirement
to do so, though my view is that we want to make sure people can tell the
state has changed.
On Sat, Jun 10, 2017 at 5:45 PM, Mallory < = EMAIL ADDRESS REMOVED = > wrote:
> One could argue that if the focus state in particular is way too subtle
> for a user, then for that user it breaks the Visible Focus rule.
>
> On Thu, Jun 8, 2017, at 12:44 AM, Meacham, Steve - FSA, Kansas City, MO
> wrote:
> > When the indicator is a border-box, I'll measure it's contrast against
> > the background to see if it meets WCAG requirements. If the item itself
> > just changes color, I'd make sure that both the focus and unfocused
> > colors have sufficient contrast to background, but I don't compare them
> > to one another.
> >
> >