Non-Conformance Demo for WCAG 2.1 Success Criterion Success 1.4.11 Non-text Contrast (Level AA)

1.4.11 Non-Conformance Shown with Non-Technical Explanation

Controls and graphics that lack sufficient contrast with surrounding colors can be difficult to see. The fake button seen below lacks sufficient contrast and is thus not easily distinguishable from its surroundings.

1.4.11 Non-Conformance Shown with Technical Explanation

Below is a screen shot of the color contrast checker. The graphic was created by the author and therefore the hex code was already known.The hex code is listed as the foreground color.