Check WCAG contrast for two hex colors. See AA normal, AA large and AAA normal results with a live preview; no palette is uploaded.
Part of our Images & Design collection — Explore more Images & Design tools · See also: QR Code Generator, Image Editor: Compress, Resize, Crop & Border.
Quick answer: Color Contrast Checker — WCAG contrast for any two colors Free, no signup, runs in your browser. See below for the interactive tool, 4-step guide and FAQs.
The quick brown fox jumps over the lazy dog.
Deep dives from the Tool4SaaS blog — tested workflows, print sizes and fixes.
Reviewed by the Tool4SaaS Editorial Team — In-house reviewers who build and test every tool locally for accuracy across current Chrome, Edge, Firefox, and Safari. Last updated: . See our authors, methodology or contact us.
WCAG 2.1 relative luminance ratio from 1:1 to 21:1. Dark #1a1a1a on white #ffffff is 17.40:1 and passes AAA normal. Medium #767676 on white is 4.54:1 and passes AA normal. Light #999999 is 2.85:1 and fails body text. The arithmetic runs locally.
Three badges: AA normal at 4.5:1, AA large at 3:1, and AAA normal at 7:1. There is no separate AAA large badge, so compare the ratio manually against 4.5:1 when you need AAA for large text. Large text means 18pt regular or 14pt bold.
It reports AA large at 3:1 and shows the same ratio for every input. It does not know your font size or weight. Large text is 18pt regular or 14pt bold; AAA large needs 4.5:1. Test each size and weight in the page instead of assuming a headline passes.
Coral #ff5733 on white is 3.15:1: enough for AA large text but below 4.5:1 for body copy. Keep it for headlines or icons, or darken toward #c2410c, which measures 5.18:1 on white. Confirm hover and active states separately.
It does not test alpha transparency, gradients, images behind text, font weight, focus rings or non-text UI contrast. It also does not save or export pairs. Record approved hex pairs in your design tokens and check the rendered interface with a keyboard and a screen reader.
Check WCAG 2.1 contrast ratio between foreground and background colors instantly offline with AA normal, AA large and AAA normal badges. Enter charcoal #1a1a1a on white #ffffff to see 17.40 to 1 passing AAA, or medium #767676 on white for 4.54 to 1 passing AA. Designers audit body copy, buttons, placeholders and chart labels for accessibility before shipping. Example 1: white #ffffff on navy #1e3a5f scores about 11 to 1 and suits hero banners. Example 2: coral #ff5733 on white scores 3.15 to 1, failing paragraphs but surviving oversized headlines. Luminance math executes locally with live ratio and badge updates, never uploading palettes. Support teams auditing dashboards test slate #334155 on mist #f8fafc and white on navy #1e3a5f across desktop and mobile widths, logging ratios in accessibility statements that satisfy procurement reviewers and enterprise clients requiring AA compliance.
Contrast divides lighter and darker luminance offsets, yielding scores from 1 to 1 up to 21 to 1 for black on white. Table — Pair | Ratio | Verdict: #1a1a1a on #ffffff | 17.40 to 1 | AAA pass; #767676 on #ffffff | 4.54 to 1 | AA pass; #595959 on #ffffff | 7.0 to 1 | AAA pass; #999999 on #ffffff | 2.85 to 1 | fail; #ff5733 on #ffffff | 3.15 to 1 | large-only. Normal copy needs 4.5 to 1 for AA and 7 to 1 for AAA, while large 18pt text needs 3 to 1 and 4.5 to 1 respectively. Darken failing grays from #999999 to #595959 to cross AA without hue shifts, testing both sizes locally. Table captions, placeholder hints and disabled buttons often fail first because thin strokes and low opacity dilute effective luminance dramatically under office glare, so designers darken these elements two steps beyond body copy minimums for safety.
Adjust lightness before hue when repairing failures, preserving brand recognition while climbing ratios efficiently. Edge case: thin 12px light gray #9ca3af placeholders inside pale #f8fafc inputs can score below 2 to 1 despite looking stylish, blocking low-vision users entirely. Limitation: color math only, without font weight, layout, focus indicator or transparency blending checks, so manual keyboard review remains mandatory. For HEX to RGB translation of approved pairs, copy values using our tool at /color-converter. For harmonious alternatives that retain contrast, explore palettes at /color-converter, free offline with nothing uploaded. Marketing pages pairing coral #ff5733 headlines with charcoal #1a1a1a buttons preserve brand energy while passing audits, documenting approved combinations in Figma libraries that prevent regressions when new contributors join campaign sprints.