Color Contrast Checker for Text & UI

Check foreground and background contrast on an editable interface sample. Inspect text, focus and target-size checks together. These checks cover the current sample, not certification of an entire website.

How to use Contrast Lab

1. Choose foreground, background and focus colors.
2. Adjust the sample text and interface controls to inspect the checks.
3. Copy the CSS or download the current sample results.