1.) What is considered essential to understanding the information and functionality in the image slider? Is it the circle in the middle of
the slider that one uses to drag between the two images? Or does the
vertical divider between the images also count as essential?
The applicable WCAG specifications for the visual design are:
The visual presentation of the following have a contrast ratio of at
least 3:1 against adjacent color(s):
User Interface Components Visual information required to identify user
interface components and states, except for inactive components or
where the appearance of the component is determined by the user agent
and not modified by the author;
Graphical Objects Parts of graphics
required to understand the content, except when a particular
presentation of graphics is essential to the information being
conveyed.
Color is not used as the only visual means of conveying information,
indicating an action, prompting a response, or distinguishing a visual
element.
Per SC 1.4.11--The circle is the interactive element of the slider so that is definitely required to have sufficient color contrast. The circle would need to stand out against the background by 3:1 contrast ratio. And the arrows inside the circle need to have a minimum of 3:1 contrast ratio against the circle background.
The guidelines are a bit vague when it comes to the dividing border between the graphics, so there's an element of interpretation. Think of it this way: is it merely decorative or does it serve a purpose to help understand the meaning/intention? If you remove it, will this feature lose any usability or understanding?
I think the border is necessary, and for that reason might be considered essential. It helps distinguish the two images (mostly because the rendering is so well-executed. If it was a black-and-white sketch, I might think differently.)
And per SC 1.4.1--You might want to consider labeling each side in some way so that the border and graphics alone aren't the only thing that convey information. (Even if someone can't see it, they will know that there is a photo on one side and a rendering on the other.)
2.) How does one ensure sufficient contrast with the slider and the images behind it? If the images in the component were unpredictable,
how can you design the component in a way that ensures sufficient
contrast with any image? Is good contrast between the inner arrows of
the slider and the background enough? (For example, the middle circle
in the slider component would have white inner arrows with a blue
background).
You're off to a good start in thinking about filling the circle with a solid color. The inner arrows need to be 3:1 contrast ratio against the circle background color. Since the images behind the cirlce are unpredictable, you might consider putting a border around the circle (also with a 3:1 contrast against the circle background) to further distinguish it from the graphics behind it. That way the images will always contrast with either the border or the circle, ensuring the interactive element is distinguishable 100% of the time.
Can you also add a border on the left and right side of the dividing line?
Here is a quick and unelegant mockup I created to try to illustrate my explanation:
There are also keyboard interactions that need to be considered for this type of element, so make sure that's on the radar. (But out of my wheel-house to advise.)
Glad you're thinking about accessibility! Hope this helps.
