ACCESSIBILITY TOOL

Contrast Lab

Set the foreground and background, review the result, then apply the smallest correction that reaches your target.

STEP 1

Set the color pair

STEP 2 · LIVE PREVIEW

Interface example

Check the pair at reading size.

This paragraph shows how normal body text appears on the selected background.

View result
Small supporting text needs enough contrast too.

RESULT · WCAG 2.2

Review the result

Checking this pair…

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

STEP 3

Fix the color only when needed

Suggestions preserve hue and saturation while changing lightness by the smallest amount needed.

Adjust foreground#FFFFFF

Adjust background#1B8E2D

DEVELOPER EXPORT · PRO

Copy the current pair as CSS

Use the foreground and background as semantic variables.


    
WORKSPACE · PRO
Saved comparisons
Return to important pairs and recent checks across devices.
Saved
Upgrade to Pro to save comparisons.
Recent
Upgrade to Pro to keep contrast history.