Clearbit Design

Back to Colors

custom propertyvar(--gradient-undefined)
suggested foreground colorwhite

and

contrast ratio:

as background at 18px

as background at 24px

and white#fff

contrast ratio:

as background at 18px

as background at 24px

and black#000

contrast ratio:

as background at 18px

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.