Contrast and Color
Text and important UI components should have sufficient contrast against their backgrounds. Color should not be the only mechanism for communicating meaning because users may have color-vision deficiencies or different display conditions.
Use icons, labels, patterns, position, or other visual cues alongside color when necessary.
Color Contrast and Readability
Error State
.field--error input {
border-color: #b91c1c;
}
.field--error .message {
color: #991b1b;
font-weight: 600;
}💡 The error state uses multiple visual cues rather than relying only on a red border.
Key Takeaways
- Do not rely on color alone.
- Test contrast for text and important controls.
Knowledge Check
Why should color not be the only way to communicate an error?