RE: LVTF position on contrast requirements for interactive control states

Setting the selection color isn’t required but in cases where the default colors don’t play nice with the colors used in the page or as in my example the color is changed in such a way that the selected text is unreadable web developers need to consider color contrast for selection as well. I’ve seen cases where selecting text makes it unreadable due to the colors used. The take home message here is selected text should also meet color contrast requirements. Since selection was omitted from the CSS3 spec I don’t know where that leaves us in terms of recommending its use or advising against it.

---
Scott McCormack
Principal Technical Consultant  -- IT Manager
SSB BART Group
scott.mccormack@ssbbartgroup.com
(415)624-2712 (o)
www.ssbbartgroup.com

From: Wayne Dick [mailto:wayneedick@gmail.com]
Sent: Friday, April 01, 2016 11:40 AM
To: Scott McCormack <scott.mccormack@ssbbartgroup.com>
Cc: Jonathan Avila <jon.avila@ssbbartgroup.com>; Andrew Kirkpatrick <akirkpat@adobe.com>; Alastair Campbell <acampbell@nomensa.com>; Katie Haritos-Shea <ryladog@gmail.com>; public-low-vision-a11y-tf <public-low-vision-a11y-tf@w3.org>; Rochford, John <john.rochford@umassmed.edu>
Subject: Re: LVTF position on contrast requirements for interactive control states

Hi Scott et. al.,
I don't understand the change of color issue in this context. The LVTF does assert the need to change color as a basic need as well as element level customization which allows change of color element by element. Is this a different issue?
Wayne

On Wed, Mar 30, 2016 at 2:54 PM, Scott McCormack <scott.mccormack@ssbbartgroup.com<mailto:scott.mccormack@ssbbartgroup.com>> wrote:
It was in CSS3 draft and was removed but it works in IE, safari and Chrome (and probably others). Firefox has a -moz- variant as well. The problem is that if devs use it and don’t pick a good color combination or they choose to only to change the background color (I’ve seen this in the wild) you can get unreadable selected text. I think it is possible for the browser’s default selection color logic to fail with certain colors as well but I’ve not worked out the specifics for this situation.

For example if you put this in the CSS for most pages:

::selection {
    background: black;
}

// Firefox variant
::-moz-selection {
    background: black;
}

The background color for selection will be changed but the text color will not which will result on black text on black since most pages show mostly black text. You can also specify the text color in the CSS rule so we can do something like:

::selection {
    background: yellow;
    color: black;
}

We end up with nice readable selected text but we lose any color in the selected text, which is probably an acceptable trade off. Since ::seletion isn’t in the CSS3 spec I don’t know where this leaves us in terms of offering any guidance but since it does work I suspect people are using it (I’ll be sure to check the next time I see odd selection colors) and it would be good for us to be able to provide guidance even if it is just along the lines of “Make sure selected text meets color contrast requirements”

---
Scott McCormack
Principal Technical Consultant  -- IT Manager
SSB BART Group
scott.mccormack@ssbbartgroup.com<mailto:scott.mccormack@ssbbartgroup.com>
(415)624-2712<tel:%28415%29624-2712> (o)
www.ssbbartgroup.com<http://www.ssbbartgroup.com>

From: Jonathan Avila
Sent: Wednesday, March 30, 2016 10:18 AM
To: Scott McCormack <scott.mccormack@ssbbartgroup.com<mailto:scott.mccormack@ssbbartgroup.com>>; Andrew Kirkpatrick <akirkpat@adobe.com<mailto:akirkpat@adobe.com>>; Alastair Campbell <acampbell@nomensa.com<mailto:acampbell@nomensa.com>>; Katie Haritos-Shea <ryladog@gmail.com<mailto:ryladog@gmail.com>>
Cc: public-low-vision-a11y-tf <public-low-vision-a11y-tf@w3.org<mailto:public-low-vision-a11y-tf@w3.org>>; Rochford, John <john.rochford@umassmed.edu<mailto:john.rochford@umassmed.edu>>
Subject: RE: LVTF position on contrast requirements for interactive control states


>  Are we addressing SELECTION color anywhere with this? Given that developers can now control the selection colors I

I believe selection would be covered already and that didn’t seem to be called into question.  When I checked a few months ago I could not change the selection colors of select items in browsers – has that changed?
Jonathan

Jonathan Avila
Chief Accessibility Officer
SSB BART Group
jon.avila@ssbbartgroup.com<mailto:jon.avila@ssbbartgroup.com>
703.637.8957<tel:703.637.8957> (Office)
Visit us online: Website<http://www.ssbbartgroup.com/> | Twitter<https://twitter.com/SSBBARTGroup> | Facebook<https://www.facebook.com/ssbbartgroup> | Linkedin<https://www.linkedin.com/company/355266?trk=tyah> | Blog<http://www.ssbbartgroup.com/blog/>
Check out our Digital Accessibility Webinars!<http://www.ssbbartgroup.com/webinars/>

From: Scott McCormack
Sent: Wednesday, March 30, 2016 11:56 AM
To: Andrew Kirkpatrick; Jonathan Avila; Alastair Campbell; Katie Haritos-Shea
Cc: public-low-vision-a11y-tf; Rochford, John
Subject: RE: LVTF position on contrast requirements for interactive control states

Are we addressing SELECTION color anywhere with this? Given that developers can now control the selection colors I think this is something we need to address as well.

---
Scott McCormack
Principal Technical Consultant  -- IT Manager
SSB BART Group
scott.mccormack@ssbbartgroup.com<mailto:scott.mccormack@ssbbartgroup.com>
(415)624-2712<tel:%28415%29624-2712> (o)
www.ssbbartgroup.com<http://www.ssbbartgroup.com>

From: Andrew Kirkpatrick [mailto:akirkpat@adobe.com]
Sent: Wednesday, March 30, 2016 8:26 AM
To: Jonathan Avila <jon.avila@ssbbartgroup.com<mailto:jon.avila@ssbbartgroup.com>>; Alastair Campbell <acampbell@nomensa.com<mailto:acampbell@nomensa.com>>; Katie Haritos-Shea <ryladog@gmail.com<mailto:ryladog@gmail.com>>; Scott McCormack <scott.mccormack@ssbbartgroup.com<mailto:scott.mccormack@ssbbartgroup.com>>
Cc: public-low-vision-a11y-tf <public-low-vision-a11y-tf@w3.org<mailto:public-low-vision-a11y-tf@w3.org>>; Rochford, John <john.rochford@umassmed.edu<mailto:john.rochford@umassmed.edu>>
Subject: Re: LVTF position on contrast requirements for interactive control states

Proposed recommendation to share with WCAG:

It is recommended that the text of links and controls which changes in response to focus and hover events meets the appropriate contrast requirement in WCAG 2.0 Success Criteria 1.4.3. Both hover and focus states impact low-vision users:

  *   Focus: Low-vision keyboard users may be unable to read low-contrast text on a focused control and due to page magnification may be unable to simply tab away from a focused control and keep that control in view on the screen.
  *   Hover: Many low vision users use the mouse pointer to follow along when reading text (with or without magnification) like people do with a finger or pen when reading printed materials. This is very common for magnification users who will use the mouse pointer to control the magnification view area. In such a case a hover with bad contrast prevents users from being able to read effectively.


Thanks,
AWK

Andrew Kirkpatrick
Group Product Manager, Accessibility
Adobe

akirkpat@adobe.com<mailto:akirkpat@adobe.com>
http://twitter.com/awkawk

http://blogs.adobe.com/accessibility


From: Jonathan Avila <jon.avila@ssbbartgroup.com<mailto:jon.avila@ssbbartgroup.com>>
Date: Tuesday, March 29, 2016 at 10:54
To: Alastair Campbell <acampbell@nomensa.com<mailto:acampbell@nomensa.com>>, Katie GMAIL <ryladog@gmail.com<mailto:ryladog@gmail.com>>, Scott McCormack <scott.mccormack@ssbbartgroup.com<mailto:scott.mccormack@ssbbartgroup.com>>
Cc: Andrew Kirkpatrick <akirkpat@adobe.com<mailto:akirkpat@adobe.com>>, public-low-vision-a11y-tf <public-low-vision-a11y-tf@w3.org<mailto:public-low-vision-a11y-tf@w3.org>>, "Rochford, John" <john.rochford@umassmed.edu<mailto:john.rochford@umassmed.edu>>
Subject: RE: LVTF position on contrast requirements for interactive control states

It is recommended that text of links and controls that changes at any time meets the appropriate contrast requirement in WCAG 2.0 Success Criteria 1.4.3. Given that it can be difficult to find enough color combinations to address the design needs and meet the contrast requirement, it is sufficient to meet the SC 1.4.3 contrast requirement for text that changes upon keyboard focus and allowable that text that changes when the link or control is in the active or hover states to not meet the SC 1.4.3 contrast requirement.