Color contrast
In UI design, the effective use of color goes beyond aesthetics—it’s about ensuring readability and accessibility for all users
Color contrast refers to the difference in luminance between foreground elements (such as text) and the background on which they are presented (for example, a button). This contrast is measured as a ratio, allowing us to quantify whether the text will be sufficiently legible for users.
This principle is especially relevant for people with color blindness or low vision, who rely on the difference in luminance to correctly perceive interface elements.
It is important to keep this in mind because it makes navigation and the understanding of information accessible.
Contrast Standard
The Web Content Accessibility Guidelines (WCAG) set specific contrast ratio requirements to ensure text is readable against its background:
| Content type | Minimum ratio (Level AA) | Enhanced ratio (AAA) |
|---|---|---|
| Body text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| Interface components | 3:1 | Not defined |
| These ratios do not apply to "incidental" text, such as inactive controls, logotypes, or purely decorative text. |
Tools for measuring contrast
- Radix Colors
- Able - Figma plugin for evaluating color accessibility
- Material theme builder follow material styles
- Color palettes
- Contrast color checker
- Color review, specially useful for checking backgrounds against text
- Contrast grid