indigo gradient
#9cb2ff,#637eff- color stops#9cb2ff, #637eff
- color stops (rgb)rgb(156, 178, 255), rgb(99, 126, 255)
- custom propertyvar(--gradient-indigo)
- suggested foreground colorblack
Contrast Ratios
Passing contrast ratios vary by font size to meet WCAG AA guidelines. These guidelines are for normal weight (400) text. Light weight (300) text should have a higher contrast and bold text (700) can have a slightly lower ratios. Refer to WCAG guidelines for more information when in doubt. We do not need to support AAA contrast ratios at this time.
Normal Text: 14pt (~ 1.2rem / 18px) normal weight (400) text must be
4.5:1
or higher. Smaller text sizes may not meet contrast recommendations,
but there aren't standard thresholds for text smaller than 14pt.
Large Text: 18pt (~ 1.5rem / 24px) normal weight (400) text must be 3:1
or higher.
Gradients
For gradients, the contrast ratio for all color stops will be shown in order (e.g., 2.33:1, 3.39:1
for Blue Gradient compared to white). A gradient is marked as pass for AA contrast only if all color stops have passing contrast. Gradients are only presented as backgrounds because we don't currently support gradients for text.