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.
Use the WebAIM Contrast checker, which is a web-based tool, for testing color contrast. You can input the Hex code or RGB codes for your colors, or click on the color box to open a color selection slider. Once your colors are selected you can lighten or darken them as required to reach the appropriate passing contrast ratio.
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.