ACCESSIBILITY TOOL

Contrast Lab

Test any foreground and background pair, preview it in a real interface, and generate the nearest hue-preserving colors that pass WCAG.

Foreground

Background

LIVE PREVIEW

Interface example

Readable design starts with contrast.

This sample paragraph shows how body text will look at a typical reading size on the selected background.

Small supporting text should remain legible, too.

WCAG 2.2

4.61:1Passes AA

AA normal textMinimum 4.5:1

AA large textMinimum 3:1

AAA normal textMinimum 7:1

AAA large textMinimum 4.5:1

UI componentsMinimum 3:1

ACCESSIBLE CORRECTION

These suggestions preserve the original hue and saturation while changing lightness by the smallest amount needed to reach the selected target.

Adjust foreground#FFFFFF

Adjust background#1B8E2D

DEVELOPER EXPORT