csscolorsaccessibilitywcagcontrast

Contrast minimum for background color if the bg conveys meaning


I have a green color image icon with a checkmark inside that conveys 'pass' status. So my question here is, since the green color conveys success status, is it required for the green to have 3:1 contrast ratio with the white background outside of the image and the white checkmark to have sufficient contrast with the green background or does it suffice if the white check mark passes minimum contrast requirement against the green background? P.S: This is just a dummy image and the colors and look and feel are not final.

White checkmark on green background surrounded by white page


Solution

  • Yes your icon would be counted as part of a control.

    It is covered under Success Criterion 1.4.11: Non-text Contrast

    Technique G207 has all the info you need, but basically a contrast ratio of 3:1 with surroundings is not necessary (but preferable) and a contrast ratio of 3:1 for the icon with the background is what you need.

    Also just for clarity, ensure that "fail status" has a different icon etc. Don't use just colour for meaning (I am sure you know this just how I read your question made me just double check! "since the green color conveys success status") in case someone is colour blind.