Color Contrast

Overview

Any information presented only through color cues may not be seen by people who are blind, have partial sight, or are colorblind. This includes information indicating an action, prompting a response, or distinguishing a visual element. 

Your WordPress theme will automatically handle the majority of color contrast as the design of individual components is pre-determined and already should have considered accessibility compliance. Content creators need only be considerate of color contrast when they have control over color, or are overriding styles with custom code. Anytime a content creator manually chooses colors for any reason, they should use a color contrast checker to ensure their chosen background and foreground color meets accessibility standards.

Tips for Color Contrast

1. Ensure that any information presented only through color cues is available in text or through other (non-color) visual cues. Try viewing the page in grayscale to determine what information is unavailable when viewing the page in this state.
2. Use a color contrast tool to ensure that the contrast between the link and the surrounding text is at least 4.5:1.

What to Avoid

1. Avoid using color only to convey a message (ie. “click the red button”).