Color contrast checker
Check whether two colors meet WCAG accessibility contrast requirements. Paste any HEX, RGB, or HSL value for foreground and background, see the ratio, and verify which AA and AAA criteria pass.
Typically your text or icon color.
The surface the foreground sits on.
Large heading sample
Body text sample — designs ship faster when contrast is checked early.
1:1 is invisible, 21:1 is black on white. AA needs at least 4.5:1 for body text.
- AA Normal text
Needs 4.5:1 — Body copy ≤ 18pt regular / 14pt bold.
Pass - AA Large text
Needs 3:1 — Headings ≥ 18pt regular / 14pt bold.
Pass - AAA Normal text
Needs 7:1 — Strict standard for body copy.
Pass - AAA Large text
Needs 4.5:1 — Strict standard for headings.
Pass - AA UI / graphics
Needs 3:1 — Icons, focus rings, form borders.
Pass
How to use this tool
- 1Enter the foreground color (typically your text color).
- 2Enter the background color it sits on.
- 3Read the contrast ratio and the AA/AAA pass-fail badges to know which criteria you meet.
About this tool
WCAG measures contrast as a ratio between the relative luminance of two colors. The standard requires at least 4.5:1 for normal body text (AA), or 3:1 for large text and UI graphics. AAA tightens that to 7:1 for body and 4.5:1 for large text. Failing means users with low vision or color deficiencies will struggle to read your interface.
Related tools
HEX to RGB converter
Convert HEX colors to RGB instantly. Paste a value, copy the result. Works for design, web, and print workflows.
RGB to HEX converter
Convert RGB colors to HEX instantly. Paste a value, copy the result. Works for design, web, and print workflows.
HEX to HSL converter
Convert HEX colors to HSL instantly. Paste a value, copy the result. Works for design, web, and print workflows.
HSL to HEX converter
Convert HSL colors to HEX instantly. Paste a value, copy the result. Works for design, web, and print workflows.
HEX to CMYK converter
Convert HEX colors to CMYK instantly. Paste a value, copy the result. Works for design, web, and print workflows.
CMYK to HEX converter
Convert CMYK colors to HEX instantly. Paste a value, copy the result. Works for design, web, and print workflows.
Frequently asked questions
Short answers to what people ask most.
What contrast ratio do I need?
What counts as “large text”?
Does this work with semi-transparent colors?
Why does my brand color fail AAA?
Reviewing work with your team?
Pin comments directly on a live website or design — no extension, no setup.