Using Colors

Color Contrast must meet the WCAG Ratio of 4:5:1 or greater, and cannot be the delineating factor for identification. Text needs to contrast sufficiently against the background to be easy to read.

Color contrast is defined as a ratio between two colors, with higher contrasts being more accessible. The Web Content Accessibility Guidelines state that the contrast ratio between two colors must be at least 4.5:1 for standard sized text, and at least 3:1 for large sized text. Large text is 18 pt. font or larger.

Color as Identifier

Color should not be the sole identifier of functionality or state on a website. It may be used to indicate functionality, but there must also be another visual cue.

• Teal link text is not accessible. Teal and underlined link text is accessible.
• Red error messages are not accessible. Red and bold error messages are accessible.

This guideline also applies to images. The following chart is accessible because it uses both color and style to indicate information. Data for Bob is tracked by the blue dotted line and data for Carol is tracked by the orange dashed line.

Color Palettes

Use the Tri-C Graphics and Style Guide for branding suggestions.  Listed below is the Web Color Palette from page 22 which can be helpful when creating online projects.

You can also use the following Accessible Color Palette Builder for compatible color combinations. It removes the guess work surrounding color and accessibility.