"Changes of color" applied to motion definition

[jake-abma]

Since the new focus indicator SCs discussions the last couple of years, every addition / change in pixels is seen as "A change of color"

@alastc introduced this view if I remember well (for the 'addition of focus indicators on the outside of a component as an example), and after a couple of seconds thinking of this it seemed logical and clear.

Introducing this insight to others in training, EVERYONE is a bit surprised at first with a shock-and-awe effect but also get it pretty fast.

NOW...

In https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html / 2.3.3: Animation from Interactions there is a definition for:

motion animation
addition of steps between conditions to create the illusion of movement or to give a sense of a smooth transition

For example, an element which moves into place or changes size while appearing is considered to be animated. An element which appears instantly without transitioning is not using animation. Motion animation does not include changes of color, blurring or opacity.

Which clearly states "Motion animation does not include changes of color"

It also states in the NOTE:

For example, an element which moves into place or changes size while appearing is considered to be animated.

Fundamentally THIS ALSO IS A CHANGE OF COLOR as they are change of pixels.

To confirm this we have the following in the Understanding of 2.4.11: Focus Appearance (Minimum):
https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum#change-of-color

Where it states:

When a component changes to include a focus indicator, that change can always be measured as a change of color contrast. For example, if a yellow outline is added to a button on a blue background, the change of color is from blue to yellow.

Now this creates a contradiction in the approach, although fully understandable it's not consistent.

Changes in pixels ARE or ARE NOT a change in color and we need to set a clear line here in when we mean what.

[jake-abma]

(ps. I think we meant changing the background color of buttons etc. from one color to another but using the same statement / language for the change is the issue here. Using a focus indicator by changing the size IS change of color, but for Motion Animation it's considered differently!)

[jake-abma]

practical example resulting in my comment: https://broken--deque-workshop.netlify.app/

the focus / hover of the blue buttons and the brackets appearing...

[patrickhlauke]

personally, i'd say it's a slippery slope to just say that a change of pixels = a change of color, as that can lead to weird reinterpretations (e.g. if this is a change of color, is using it not a failure of "Use of color" in all cases? is something like an outline or underline or text changing from regular to bold not just a change of pixels, hence a change of color? [ed: and this is then the point where that "color is hue, luminosity/lightness is a different visual aspect" backdoor redefinition, which #1500 tries to bring more into the spotlight, would once again come back to muddy things])

there needs to be some more nuance here to avoid unintended consequences, i'd say... at least some more clearly defined explanation that this handwaved definition is only scoped to that particular SC and doesn't spill out into rethinking all other SCs.

[jake-abma]

at least some more clearly defined explanation that this handwaved definition is only scoped to that particular SC

This doesn't seem like a proper solution, maybe add some words to the explanation it's not only a color change of pixels but a change in shape too

@alastc could you please share your thoughts here?

[alastc]

I think it was @mbgower who started the 'everything is a change of colour' thing, but as you say, it has infected us with it's explanatory power!

I think talking about changes of pixels being a change of colour makes sense when you are explaining how contrast works.

The example in 2.4.11 is clear about this:

When a component changes to include a focus indicator, that change can always be measured as a change of color contrast. For example, if a yellow outline is added to a button on a blue background, the change of color is from blue to yellow.

However, over-using that could lead to madness. Other things (like animation) build on this very low-level changing of colour to create other perceptual effects, like movement.

I.e. when anything changes on screen it can be described as changes of colour. However, some changes of pixels/colour create higher-level effects like movement.

You could change the colour of something without it creating the effect of movement, which is what the motion animation definition is trying to convey.

So then should we change the text in Motion animation? Maybe something small, such as:
"For example, an element which moves into place or changes size while appearing is considered to be animated. An element which appears instantly without transitioning is not using animation. Motion animation does not include changes of color, blurring or opacity which do not change the perceived position of the element."

[alastc]

@jake-abma would the above change help? Is it worth putting to the group?

[jake-abma]

it is going into the right direction, but in CSS we do have transitioning, and this is also used for changing the color only...

which appears instantly without transitioning is not using animation.

[alastc]

If there is a better word I'm open to it, but we can't completely avoid any term that is used in CSS.

[jake-abma]

delete the text "without transitioning" and maybe add "or growth" will solve it?

For example, an element which moves into place or changes size while appearing is considered to be animated. An element which appears instantly is not using animation. Motion animation does not include changes of color, blurring or opacity which do not change the perceived position or growth of the element."

[patrickhlauke]

"or growth" > "or dimensions" perhaps? [edit: or even simpler "or size"]

also, while we're here...should the wording also include something about rotation, distortion, or similar?

[jake-abma]

Exactly!

[alastc]

How about:

For example, an element which moves into place or changes size while appearing is considered to be animated. An element which appears instantly is not using animation. Motion animation does not include changes of color, blurring or opacity which do not change the perceived size, shape, or position of the element.