Skip to content
/color local tool
Suggest an improvement

Color Contrast Checker

Measure a color pair under WCAG, APCA and color-vision simulations, then solve the smallest accessible repair.

Local execution receiptinput path disclosedTool content stays out of MonoTools URLs and API requests.
Working input
Browser memory
Cross-tool handoff
Session only · 10 min
URL payload
Never
Export
Explicit action

Verify it: open DevTools Network, clear the log, use the tool, then inspect fetch/XHR requests. Page assets and optional aggregate analytics may use the network; tool input is not included.

Full privacy model
Loading tool...
01

How to use

  1. 01Enter the foreground and background used by the real component.
  2. 02Set the real font size and weight, then compare normative WCAG results with the experimental APCA preview.
  3. 03Audit default, hover, focus and disabled surfaces, then stress-test color vision modes or a full palette.
02

FAQ

What contrast ratio does normal text need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA raises those thresholds to 7:1 and 4.5:1.
Does a passing pair make the whole component accessible?
No. Contrast is one requirement. The final component still needs readable type, visible focus, semantic structure, useful labels and testing in its rendered context.
Is APCA a WCAG 2.x conformance result?
No. WCAG 2.x ratios remain the conformance result. APCA is shown separately as an experimental polarity-aware preview for design evaluation.
guides

Guides

Color handoff6 min read

How to Pick Exact Colors from an Image Without Uploading It

Sample exact pixels from screenshots and logos, separate them from dominant palettes, and export useful CSS color tokens locally.

Read guide →
Accessible UI color7 min read

How to Fix Color Contrast Across an Entire UI Palette

Measure WCAG contrast, find restrained color repairs, and audit every foreground and surface combination before design handoff.

Read guide →
03

Related tools