clarification for :active state and non text contrast

[ekaufman]

I'm seeking a clarification to the intent of this wording in the understanding 1.4.11 document where it states:

This success criterion does not require that changes in color that differentiate between states of an individual component meet the 3:1 contrast ratio when they do not appear next to each other. For example, there is not a new requirement that visited links contrast with the default color, or that mouse hover indicators contrast with the default state. However, the component must not lose contrast with the adjacent colors, and non-text indicators such as the check in a checkbox, or an arrow graphic indicating a menu is selected or open must have sufficient contrast to the adjacent colors.

I interpret this to mean, for example, that it is sufficient to have a button with an :active pressed state effect that makes the button background color slightly darker while pressed without needing to meet 3:1 contrast with the default button background color as long as the pressed button itself still meets the contrast requirements with the content surrounding it. My rationale being that the exception above applies because "they do not appear next to each other" on the 2d plane that is the screen.

I recently heard an alternative interpretation (that I believe to be inaccurate). Essentially the terms "adjacent" and "next to each other" could have another meaning: "that whatever state immediately preceded the pressed state also needed to have 3:1 contrast". They are adjacent and next to each other on a timeline not just the 2d plane of the screen.

I did find this PR 550 as the source of the text above. The comments from Alastair there lead me to believe that the intent of this text was to "not create a requirement to differentiate states by color internally (e.g. between default and hover, visited link, visited + hover etc.)."

I agree these states should be perceivable, but as a practical matter it would be very difficult to design if every possible state needed a 3:1 contrast with every other possible state (and frankly I don't see many buttons meet a 3:1 contrast when pressed). I think that interpretation would just lead to an avoidance of defining an effect for :active and other states, I do not think that was the intent either.

[patrickhlauke]

I recently heard an alternative interpretation (that I believe to be inaccurate). Essentially the terms "adjacent" and "next to each other" could have another meaning: "that whatever state immediately preceded the pressed state also needed to have 3:1 contrast". They are adjacent and next to each other on a timeline not just the 2d plane of the screen.

yeah, no, that alternative interpretation of "adjacent" is definitely not correct

[patrickhlauke]

as for states, and making them visually distinct: there is likely an argument to be had about permanent states like :focus and others like pressed/checked (for toggles/radios/checkboxes), versus more fleeting/temporary ones like :active and even :hover (for the latter: unless that hover state is important and the only clue given to a user that something is actually actionable/pressable/special somehow compared to other similar elements on the page), and as such that those fleeting states are more "nice to have" visual eye candy, rather than something essential to understanding/operation