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 | Although exempt, users who can’t visually interpret your brand colors may miss your brand or message completely. | 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 | 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 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. |
| 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 color of placeholder text in input boxes do not meet WCAG color contrast requirements. Button text must meet the 4.5.1 contrast with its fill color. Disabled controls do not have to meet a WCAG requirement. But using a 3.1 contrast ratio is probably a good idea. Focus rings need a contrast ratio of 3:1. Labels are considered text and need to 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 was to make text links WCAG compliant is to give link text a color contrast of 4.5:1 and format it with an underline. 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, it needs something other than color to differentiate it, such as an underline, border, symbol, etc. 3. Visited, and hover states must also follow the same requirements as the default state. |
| Tables | Borders, cell colors, heading colors, zebra striping, highlighted cells. | Text in cells 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 use cell color, alone, to communicate information. Include a text equivalent, within the cell, to communicate what the color means. For example, when using red for a cell background color to indicate a problem status you must also include a text version of the 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 good practice. |
| 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 will need multiple focus ring styles to be depending on the color of an element or it background, have a style for links, buttons, form inputs, radio buttons, checkboxes, image links, etc. |
| Icons | Hamburger menu symbol, magnifying glass, carts, etc. | 1.4.11 Non-text Contrast | Technically, these only need to meet the 3.1 color contrast requirement. (If the icon has an important function (e.g., a menu, login, account access, contact information, error message, etc.), consider using 4.5:1 contrast. |