Color

Choose a color for your backgrounds with the hue slider below. Use high contrast as the background for standard or small text - or as a text color on white. Use low contrast: optionally for short prominent texts, like thumbnails for videos and social posts. Use tint for highlighting text like alerts or notices.

Choose a hue

This model defines colors by combining lch for perceptual saturation (chroma) and contrast luminance as defined by WCAG. This gives us accessible colors with relatively consistent saturation. Slide the hue above to see these relationships in action.

Other common site colors

Contrast between text and its background should be greater than the WCAG 2.0 contrast ratio of 4.5:1.

This means that when white is combined with a color (where there is a white background and colorful text, or a colorful background and white text), the color must chosen from the range of hues below:

…

…

…

…

…