Color and Contrast
Text Contrast Ratio
Principle
Ensure sufficient contrast between text and its background for clear readability.
Required Contrast Ratios
| Text Type | Definition | Minimum (AA) | Minimum (AAA - optional) |
|---|---|---|---|
| Normal text | Up to 16px / 1rem, regular weight | 4.5 : 1 | 7 : 1 |
| Large text | 24px (18pt) + regular or 18.66px (14pt) + bold | 3 : 1 | 4.5 : 1 |
| Small text | Below 16px | > 4.5 : 1 recommended | — |
| Disabled text | Text that is part of an inactive UI component | No requirement | No requirement |
| Logotypes | Text that is part of a logo or brand name | No requirement | No requirement |
Guidance
- Minimum contrast values are a baseline. Higher contrast is recommended where possible.
- Increasing contrast is recommended for dense UIs (e.g. tables, forms), small text and mobile use.
- Contrast must remain valid in light mode, dark mode and across all surface colors.
- Text on semi-transparent backgrounds must meet the same contrast ratios after blending. Contrast should be checked in the final implementation, not only in design files.
WCAG Reference
Non-Text Contrast
Principle
Ensure sufficient contrast for user interface components and graphical objects so they remain clearly perceivable and distinguishable.
Required Contrast Ratios
| Element Type | Examples | Minimum Contrast Ratio |
|---|---|---|
| UI components | Input borders, buttons, toggles, sliders, checkbox outlines | 3 : 1 |
| Graphical objects | Icons, indicators, shapes, outlines | 3 : 1 |
| Focus ring | Keyboard focus indicator | 3 : 1 (based on WCAG 2.2) |
| Disabled elements | Disabled buttons, disabled inputs | No requirement |
Guidance
- Contrast must be measured against adjacent colors (not global background).
- Ensure visibility in both light and dark themes.
- Thin borders, subtle icons or ghost buttons may need higher contrast for sufficient perceivability.
- Semi-transparent elements must meet contrast after blending.
- Design visible focus indicator for all interactive elements.
WCAG Reference
Do Not Use Color Alone to Convey Information
Principle
Meaning, status or instructions must not rely on color alone; users must always receive at least one additional visual cue.
Examples of Allowed and Not Allowed Usage
| Situation | Color Alone | Accessible Alternative |
|---|---|---|
| Validation state | Red = error, green = success | Add icons (✔, ✖), text labels (“Error”, “Success”), or patterns |
| Required fields | Marked only by a red border | Add text (“Required”), an asterisk with explanation, or hint text |
| Charts & graphs | Categories differentiated only by color | Add textures, labels, markers or patterns |
| Selected items | Highlighted only by color | Add underline, border, icon, or bold text |
| Status indicators | Green dot = online | Add label (“Online”), tooltip, or icon change |
Guidance
- Ensure every color-coded meaning also includes at least one of the following:
- text label
- icon
- pattern or shape change
- border or underline
- Do not rely on sensory characteristics alone:
- color, size, shape, position, orientation or sound
- For charts and complex visuals, ensure differences are perceivable even by users with color vision deficiencies.
- Avoid using only red and green for opposite meanings — they are the most problematic pair for color-blind users.
