WCAG Contrast Ratio Cheat Sheet for Text and UI Colors
Quick WCAG contrast targets for normal text, large text, UI components and accessible color decisions.
| Use | Value | Note |
|---|---|---|
| AA normal | 4.5:1 | Minimum for regular body text. |
| AA large | 3:1 | Large or bold large text. |
| AAA normal | 7:1 | Enhanced contrast target. |
| UI parts | 3:1 | Useful for controls and meaningful graphics. |
| Disabled | Contextual | Disabled controls still need clear visual meaning. |
Copy snippet
.primary-button {
background: #1d4ed8;
color: #ffffff; /* strong contrast */
}