The color property paints text; background-color paints its surface. Readability depends on their pair and on the rendered state, not on either value alone.
Make this comfortable
CSS color and contrast: pair text with its real surface
How the rule works
A case status banner has a readable dark foreground on a pale background, plus a border for structure. The words say what happened; color reinforces them. Hover, focus, disabled, and dark theme states need separate review because an override can change one half of the pair. Do not claim an exact contrast ratio from a snippet without computing it against the final rendered colors. Images, transparency, and overlays can alter the effective background. Test with actual browser settings and content, including a high-contrast environment that may replace author colors.
.case-status--held {
color: #4d1e1e;
background-color: #fff1ed;
border: 1px solid #a84235;
padding: .75rem 1rem;
}Cost and verification
Color declarations add negligible transfer cost. The real maintenance cost is keeping pairs consistent across themes and states. Use shared tokens only when ownership is clear, and run automated contrast checks on final color pairs as a first screen, followed by visual review. The status text must still identify the case state when the banner is printed without its background or viewed without color.
Common Mistakes
- Do not use red alone to mean held.
- Do not change only the foreground in a dark theme.
- Do not quote a contrast result without testing the final layered surface.
Connected lessons
- CSS Interaction and Accessibility
- CSS custom properties: share tokens without losing fallbacks
- CSS dark mode and forced colors: honor distinct user settings
- HTML status region: announce a changed result without stealing focus
Further rendering decisions
- CSS color-mix: derive a surface without assuming contrast
- CSS light-dark: bind component colors to the active scheme
Further type and color decisions
css
interaction
web