Back to Colors

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

indigo gradient and

contrast ratio: 10.23:1, 5.96:1
indigo gradient as background at 18px
indigo gradient as background at 24px

indigo gradient and white#fff

contrast ratio: 2.05:1, 3.52:1
indigo gradient as background at 18px
indigo gradient as background at 24px

indigo gradient and black#000

contrast ratio: 10.23:1, 5.96:1
indigo gradient as background at 18px
indigo gradient as background at 24px

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.