Randomly passing/failing on contrast between foreground and background

[robertvrabel]

I'm encountering a situation where my script is randomly passing or failing when it tries to figure out the contrast on this particular component. Any suggestions on how to debug this? The chrome extension always reports that it can't pick it up, but doing it through a command like it's like a 50% chance it will pick it up as a failure.

Messages:

• Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds
• Element's background color could not be determined due to a background image

Html:

<a href="https://wayne.edu" class="block min-w-full relative rounded bg-grey-lighter bg-cover overflow-hidden" style="padding-top: 36.39%; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNjAgMTMxIj48cGF0dGVybiB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBpZD0iYSIgdmlld0JveD0iMCAtOCA4IDgiIG92ZXJmbG93PSJ2aXNpYmxlIj48cGF0aCBmaWxsPSJub25lIiBkPSJNMC04aDh2OEgweiIvPjxwYXRoIGQ9Ik0wLTRoNHYtNEgwdjR6bTQgNGg0di00SDR2NHoiIGZpbGw9IiNmZmYyY2EiLz48L3BhdHRlcm4+PHBhdGggZmlsbD0iI2ZmY2QzNCIgZD0iTTAgMGgzNjB2MTMxSDB6Ii8+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTAgMGgzNjB2MTMxSDB6Ii8+PC9zdmc+');">
    <div class="absolute inset-0 rounded bg-white opacity-65"></div>
    <div class="absolute inset-0 p-4 flex items-center">
        <div class="min-w-full text-lg xl:text-xl font-bold text-black leading-tight text-center">Example Text</div>
    </div>
</a>

Screenshot of button:

[straker]

Do you have a page where I could test this? I'm not able to reproduce this with the provided HTML as all the class CSS styles are missing.

[robertvrabel]

@straker Sure enough today it is reporting the problem consistently I am not sure why though. Does axe run 100% locally when it's installed? Regardless I will close this issue and if I figure anything out I'll be sure to report back. Thank you for your help!