Design

Check whether text is readable on a background, then copy a CSS gradient or shadow. Contrast uses the WCAG relative-luminance formula. Passing a ratio does not replace a full accessibility review.

Contrast checker

Check the WCAG contrast ratio of two colours.

CSS gradient generator

Build a two-colour linear gradient and copy the CSS.

Box shadow generator

Adjust a CSS box-shadow and copy the declaration.