The difference in luminance between two colors, usually text against its background. Measured as a ratio from 1:1 (identical) to 21:1 (black on white).
That label gray fails contrast on the tinted card: 2.8:1, where body text needs 4.5:1.
Contrast is the only word in this category with a pass/fail grade. No amount of taste overrules it.
| Text | Minimum ratio |
|---|---|
| Body | 4.5:1 |
| Large (24px, or 18.66px bold) | 3:1 |
| Icons and controls | 3:1 |
The fashionable failure is the whisper-gray caption on a white card. Elegant in a Dribbble shot, gone on a sunlit train. Luminance isn’t the only lever, either: size and weight contrast can rescue a pair of colors the ratio alone would condemn.