Dear LVTF,
How do we test for contrast on a non-text icon that looks like this:
- white (#FFFFFF) arrow with a
- pink (#FF5FFF) outline on a
- purple (#5B30FF) background
[image: Inline image 1]
In looking at the 3 colors and contrasting them with each other:
- white (#FFFFFF) to purple (#5B30FF) = 6.3 to 1 color contrast
- white (#FFFFFF) to pink (#FF5FFF) = 2.5 to 1 color contrast
- pink (#FF5FFF) to purple (#5B30FF) = 2.5 to 1 color contrast
Do I have to fail this icon for WCAG 2.1 SC 1.4.11 Non-Text Contrast
because the pink outline of the arrow does not contrast enough with the
purple background?
Or...am I allowed to ignore the pink outline..and compare the white arrow
to the purple background and let this arrow icon pass 1.4.11 Non-Text
Contrast.
My brain keeps telling me I should let this pass...but I'm not sure how to
articulate that it is okay to ignore the pink outline. Why do I think it
is okay to ignore the outline? Because when I squint, I can almost make
the pink outline disappear. But how would I explain to a tester...that it
is okay to ignore the outline???
G
glenda sims | team a11y lead | deque.com | 512.963.3773
*web for everyone. web on everything.* - w3 goals
[image: IAAP International Association of Accessibility Professionals:
Certified Professional in Accessibility Core Competencies (CPACC)]
<http://www.accessibilityassociation.org/certification>
