←  All terms
F
Accessibility

Color Contrast

Color contrast is the luminance difference between foreground and background and affects the readability of visual content.

Color contrast is the luminance difference between foreground and background and affects the readability of visual content. Implementation should favor native web standards and combine automated checks with keyboard and assistive-technology testing. The concept is closely related to WCAG and Web Accessibility.

Read more

WCAG

Web Accessibility

Design Token

Focus Indicator

FAQ

Color Contrast

What typical mistakes occur with color contrast?
Common ones are light gray text on white, placeholders in form fields that are too faint, text on photos without an overlay, and unchecked brand colors. Focus indicators also often stay too weak. These mistakes usually originate in design and are cheapest to avoid there, before they multiply in code.
How do design tokens support color contrast?
Color pairs can be defined as semantic tokens, such as primary text on a surface, and verified once for sufficient contrast. If the palette changes later, the check stays bundled in one place. For a dark theme the pairs must be checked again, because ratios do not simply mirror.
Is color alone enough to convey information?
No, color must not be the only means, for example for error messages or links within body text. Additional cues such as text, an icon, or an underline are needed. People with color vision deficiency often cannot tell red and green apart. Outlining a form field in red alone therefore does not convey the information reliably.
How is color contrast checked?
With contrast calculators and browser developer tools that read the colors actually rendered. All states such as hover, focus, and error should be checked, as should text on images. Automated tools often miss text over photos or gradients, and that is where a manual look helps.
Does the contrast requirement also apply to buttons and icons?
Yes, for interface components and graphical objects, WCAG 2.1 at level AA requires a ratio of at least 3:1. This covers input field borders, meaningful icons, and focus indicators. Pure decoration is exempt. A pale border around a form field can therefore already be a failure.
What contrast ratio does WCAG require for text?
Normal text needs a contrast ratio of at least 4.5:1, and large text at least 3:1. Text counts as large from 18 pt, or from 14 pt when bold. These values belong to level AA. Contrast is calculated between foreground and background colors rather than judged by eye.