Color, Contrast, and Images of Text
Meet WCAG color and contrast requirements for text, controls, graphics, states, and images of text across themes and interaction states
WCAG treats several visual requirements separately. Information cannot depend on color alone (1.4.1). Normal text needs at least 4.5:1 contrast and large text at least 3:1 (1.4.3). Use real text instead of images of text when the presentation can be achieved with available technology (1.4.5). Meaningful control boundaries, states, and graphics need at least 3:1 against adjacent colors (1.4.11), subject to each criterion’s exceptions.
Logos and incidental text are exempt from text-contrast requirements. Disabled controls have an exception under 1.4.3 and 1.4.11, but low contrast can still make them difficult to understand. Gradients, transparency, anti-aliasing, themes, and interaction states require measurement against the actual adjacent colors.
Color-Only Low Contrast vs. Redundant High-Contrast Cues
View inaccessible code
<!-- Border color is the only field cue; text and button contrast are weak. -->
<input style="border-color: red" /> <span style="color: #ef4444">Invalid</span>View accessible code
<input aria-invalid="true" aria-describedby="email-error" />
<p id="email-error"><strong>Error:</strong> Enter an address such as name@example.com.</p>Measure every relevant state
Check default, hover, focus, active, selected, invalid, and forced-colors states in light and dark themes. Measure text against its rendered background and meaningful control or graphic pixels against adjacent colors. Do not infer a numeric ratio from a screenshot; use a contrast analyzer that samples computed colors, then inspect gradients and images manually.