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.

    
  
WCAG CONTRAST GUIDE
Check whether two colors have enough contrast for readable interfaces.
The Contrast Checker compares a foreground and background using the WCAG contrast-ratio calculation. Instead of stopping at pass or fail, HexCheck also previews the pair in realistic interface content and can suggest a smaller color adjustment when the current pair misses the target.
WCAG contrast thresholds at a glance
For WCAG 2.x text contrast, AA requires at least 4.5:1 for normal text and 3:1 for qualifying large text. AAA raises those targets to 7:1 for normal text and 4.5:1 for large text. Non-text user-interface components and meaningful graphical objects generally use a 3:1 contrast requirement against adjacent colors.
Contrast ratio depends on the two colors being compared. A color is not inherently accessible on its own: the same gray may pass on white and fail on a slightly darker surface.
Use the ratio together with a real preview
A numerical threshold answers whether the pair meets a specific WCAG criterion, but a preview helps expose practical problems such as small supporting text, button labels, links, or hierarchy that feels weak even when a threshold is technically met.
When a pair fails, changing the design as little as possible is often preferable to replacing a brand color entirely. HexCheck can explore a correction that preserves the original direction while moving luminance enough to reach the selected target.
Common questions
What contrast ratio passes WCAG AA?
For WCAG 2.x, normal text needs at least 4.5:1 and qualifying large text needs at least 3:1. UI components and meaningful graphical objects commonly use a 3:1 requirement.
What contrast ratio passes WCAG AAA?
AAA requires at least 7:1 for normal text and 4.5:1 for qualifying large text.
Does a passing ratio guarantee the whole design is accessible?
No. Contrast is one accessibility requirement. Typography, states, focus indicators, semantics, motion, interaction, and many other factors also affect accessibility.