ColorCheckerColorContrast

HEX Color Contrast Checker

Paste or pick hex color codes to instantly check WCAG contrast compliance. Supports #RGB shorthand and #RRGGBB full hex format. Free, private, and runs entirely in your browser.

How to Check HEX Colors

1. Copy a hex code from your CSS, design file, or browser DevTools — common examples: #333333, #F5A623, or shorthand #FFF.

2. Paste it into the foreground field. Paste the background hex code (often #FFFFFF or #1A1A2E) into the background field.

3. The ratio appears instantly. All four WCAG badges update in real time — green for pass, red for fail. If your combination fails, scroll down to see accessible alternatives with the same hue.

Why HEX Color Format Matters for Accessibility

HEX (hexadecimal) is the dominant color format in web development — used in CSS, HTML, JavaScript, and design tokens. Nearly every website's stylesheet defines colors as 6-digit hex codes like #4A90D9.

HEX encodes RGB values in base-16: the first two characters are red, middle two are green, last two are blue. This makes it compact and machine-friendly, but hard to read at a glance — you can't easily tell if #4A90D9 is light or dark without converting it to RGB or HSL in your head.

When auditing accessibility, hex codes are usually what you'll encounter in code reviews. This checker accepts 3-digit shorthand (#F00 = #FF0000), 6-digit full codes, and with or without the # prefix — paste directly from your source code.

Contrast Ratio

12.6:1
AA Normal
AA Large
AAA Normal
AAA Large

URL Scanner

Scan any site for WCAG issues

Palette Explorer

Pick a seed color and get WCAG-compliant harmonies.

AI Color Recommendations

This feature is not yet available. We're actively building it — if you'd like early access or have ideas to share, reach out and we'll prioritize your needs.

Contact Us

Frequently Asked Questions

How do I enter HEX colors in this tool?
Type or paste any hex color code into the foreground or background input — with or without the # symbol. Both 3-digit shorthand (#FFF) and 6-digit (#FFFFFF) formats are supported. You can also use the native color picker by clicking the color swatch.
What hex color combinations usually fail WCAG?
The most common failures: light gray text (#999999 or lighter) on white, medium-tone brand colors (#4A90D9, #F5A623) on white, and dark text (#333333) on dark backgrounds. If your hex code has high lightness values (above 170 per RGB channel), it likely needs a very dark background to pass.
Can I copy the hex value after checking?
Yes — click the copy icon next to the contrast ratio display to copy the current hex pair to your clipboard. You can also click any AI-suggested alternative color to apply it instantly, then copy the new hex from the input field.
What's the difference between 3-digit and 6-digit hex?
3-digit hex is shorthand: each character is doubled to form a full 6-digit code. #F00 expands to #FF0000 (pure red), #ABC becomes #AABBCC. Both formats produce identical colors — the shorthand saves bytes in CSS files. Our checker accepts both and normalizes them internally for the contrast calculation.
How do I find the hex code of a color on my screen?
Use the built-in color picker (click the swatch) to sample any color from your screen. In Chrome DevTools, click any element, find the 'color' property in the Styles panel, and click the color swatch to see and copy its hex value. Most design tools (Figma, Sketch, Adobe XD) also display hex codes in their color panels.

Related Tools

RGB Contrast CheckerHSL Contrast CheckerImage Contrast CheckerWCAG AA Checker