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
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (≥18pt or ≥14pt bold). AAA requires 7:1 for normal text and 4.5:1 for large. Most products target AA as the legal floor.
What counts as “large text”?
Large text is at least 18pt (24px) regular, or 14pt (~19px) bold. The threshold is lower because larger glyphs are easier to read at lower contrast.
Does this work with semi-transparent colors?
WCAG contrast assumes solid colors against a known background. If your foreground or background uses opacity, flatten it against its actual underlying color first, then check that.
Why does my brand color fail AAA?
AAA is intentionally strict and most brand palettes only meet AA. If a particular pairing fails, use it for large headings, raise lightness on the lighter color, or darken the darker one until it passes.
Reviewing work with your team?
Pin comments directly on a live website or design — no extension, no setup.