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 | Native HTML or document text (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 Text | Text inside images | 1.4.3. Contrast (Minimum)
1.4.5 Images of Text | Avoid using images for essential text like body copy, paragraphs, headings, lists, or tables. Logos are exempt. |
| Logos & Wordmarks | Brand marks with text | Exempt | Exempt from WCAG, but low-contrast logos can make your brand invisible to some users. Use high-contrast versions when possible. |
| Charts, Graphs, Infographics | Diagrams, pie/bar charts, flowcharts | 1.4.3 Contrast (Minimum)
1.4.11 Non-text Contrast 1.4.1 Use of Color | – Text: 4.5:1 or higher – Visual elements: 3:1 or higher – Don’t rely on color alone—use labels, fill patterns, or icons |
| Interface Elements & Forms | Form inputs, dropdowns, buttons, toggles, sliders, etc. | 1.4.3 Contrast (Minimum)
1.4.11 Non-text Contrast | – Text labels: 4.5:1 contrast with background – Borders, icons: 3:1 contrast – Placeholder text often fails contrast – Disabled controls are exempt but 3:1 is recommended |
| Links | Link text, visited, hover, focus states | 1.4.1 Use of Color
1.4.3 Contrast (Minimum)
1.4.11 Non-text Contrast | – Text links: 4.5:1 contrast with background – 3:1 contrast with surrounding text, or add underline/icon – Visited/hover states must also meet 3:1 contrast with adjacent text |
| Tables | Borders, background fill, zebra striping, emphasis cells. | – Cell text: 4.5:1 with background – Borders: 3:1 recommended – Don’t use color alone—include text labels for meaning | |
| Urgent Messages | Critical alerts with legal or safety implications | 1.4.6 Color Enhanced (AAA) | AAA is not required, but 7:1 contrast can increase clarity and reduce risk |
| Focus Ring | Highlighted element outlines for keyboard users | 1.4.11 Non-text Contrast | – Must be 3:1 contrast against both element and background – Default browser rings may fail – Custom rings should adapt to design (e.g., dark backgrounds vs. light buttons) |
| Icons | Functional symbols like search, cart, menu, etc. | 1.4.11 Non-text Contrast | – Minimum: 3:1 – For key functions (navigation, login, etc.): 4.5:1 improves usability |