The WCAG Color Contrast requirement applies to all web content, including text, images, links, buttons, interface elements, tables, icons, and more.
| Content | Description | WCAG | Notes |
|---|---|---|---|
| Text | HTML or Native text in documents (PDFs, Word, etc.) | 1.4.3 Contrast (Minimum) | Regular Text: 4.5:1 (12pt / 16px). Large Text: 3:1 (18pt / 24px or 14pt / 19px + bold). |
| Image | 1.4.3. Contrast (Minimum) 1.4.5 Images of Text | Don’t use images for the main text of a webpage, such as body text, paragraphs, headings, block quotes, lists, tables, etc. | |
| Logos and Word marks | Although exempt, users who can’t visually interpret your brand colors may miss your brand or message completely. | Are exempt from WCAG requirements. | Because the text in charts and diagrams is often quite small, use a higher color contrast ratio (4.5:1 or 7:1). For the visual elements, use a color contrast of 3:1 or higher. You may also need to use pattern and fill to distinguish elements; color alone is not enough. |
| Charts, Graphs, Infographics | Pie charts, bar charts, diagrams, graphs, flowcharts, etc. | 1.4.3 Contrast (Minimum)
1.4.11 Non-text Contrast 1.4.1 Use of Color | Because the text in charts and diagrams is often small, use a higher color contrast ratio (4.5:1 or 7:1). For the visual elements, use a color contrast of 3:1 or higher. You may also need to use pattern and fill to distinguish elements; color alone is not enough. |
| Interface Elements and Forms | Form input boxes, place holder text, drop downs, buttons, etc. | 1.4.3 Contrast (Minimum) 1.4.11 Non-text Contrast | The colors of text box borders, down arrows, radio buttons, check boxes, toggles, sliders, etc. must have a color contrast ratio of 3:1. The default placeholder text color in input boxes doesn’t meet WCAG color contrast requirements. Button text must have a contrast ratio of 4.5.1 against its fill color. Disabled controls don’t need to meet a WCAG requirement. Using a 3.1 contrast ratio is recommended. Focus rings must have a contrast ratio of 3:1. Labels are considered text and must have a contrast ratio of 4.5:1 with its background. |
| Links | All link states, link, visited, hover, focus, etc. | 1.4.1 Use of Color 1.4.3 Contrast (Minimum) 1.4.11 Non-text Contrast | The easiest way to make text links WCAG compliant is by giving them a color contrast of 4.5:1 and underline formatting. Text links in the main content area of a web page: 1. Must have a 4.5:1 contrast with its background. 2. Must have a 3:1 contrast with its surrounding text. If not add an underline, border, arrow, carrot or link symbol. 3. Visited, and hover state colors must have 3.1 contrast with surrounding text. |
| Tables | Borders, cell colors, heading colors, zebra striping, highlighted cells. | Cell text must have a 4.5:1 contrast with the cell’s background color. If borders are present it is good practice to use 3:1 color contrast with its background. Don’t rely on cell color alone to share information. Always add a text description within the cell to explain what the color means. For instance, if you use red as a background to show a problem status, you also need to provide a text version of that status. | |
| Urgent Messages | Essential messages that could put you a legal risk if someone could not read the message. | 1.4.6 Color Enhanced (AAA) | This is not required, but helpful. |
| Focus Ring | Links, linked images, form elements, etc | 1.4.11 Non-text Contrast | Must have a contrast of 3.1 with its element and background. Default browser focus rings are usually not compliant with most website designs. Typically, a website needs multiple focus ring styles, depending on the color of an element or its background. Styles for links, buttons, form inputs, radio buttons, checkboxes, and image links may be needed. |
| Icons | Hamburger menu symbol, magnifying glass, carts, etc. | 1.4.11 Non-text Contrast | Technically, these only need a 3.1 color contrast ratio. Icons with important functions (e.g., a menu, login, account access, contact information, error message, etc.) are more usable with a 4.5:1 contrast. |