HTML & CSS Interview Question #135

What CSS considerations are important for accessible color contrast?

Advanced CSS, Accessibility, Performance, Debugging & Senior Scenarios Senior Advanced

Quick Interview Answer

Text, icons, controls, focus indicators, and meaningful graphical elements need sufficient contrast against their backgrounds. Exact requirements depend on the content and applicable accessibility standard, so teams should validate combinations with appropriate tools.

Detailed Explanation

Text, icons, controls, focus indicators, and meaningful graphical elements need sufficient contrast against their backgrounds. Exact requirements depend on the content and applicable accessibility standard, so teams should validate combinations with appropriate tools.

Do not communicate status using color alone. Combine color with text, icons, patterns, or another perceivable cue so users who cannot distinguish a particular color can still understand the information.

Code Example

.status-error {
    color: #991b1b;
    font-weight: 600;
}

.status-error::before {
    content: "Error: ";
}

/* Validate foreground/background combinations
   with an accessibility contrast checker. */