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

1.4.11 Conformance Shown with Non-Technical Explanation

Controls and graphics that have sufficient contrast with surrounding colors are easier to see. The fake button seen below has a border with sufficient contrast and is more easily distinguishable from its surroundings.

1.4.11 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 of the button border was already known.The hex code is listed as the foreground color. If the hex color was unknown, it would need to be matched using a program such as Microsoft PowerPoint.