100% Private
Runs fully in your browser. Nothing sent to any server. Ever.
No Signup
No account, no API keys. Open and use it instantly.
Free Forever
Permanently free. No trials, no limits, no credit card.
One of 64 free AI tools built by Zalt, an AI architect and software engineer.
Free Color Converter + WCAG Contrast Checker
A free color converter and WCAG contrast checker that runs entirely in your browser with zero dependencies. Convert any color between HEX, RGB, and HSL using the exact standard color math, pick colors visually with native color pickers, and instantly see whether a foreground and background pair passes WCAG 2.x accessibility contrast requirements. The contrast ratio is computed the way the Web Content Accessibility Guidelines define it: each sRGB channel is linearized (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ^ 2.4), relative luminance is derived as L = 0.2126R + 0.7152G + 0.0722B, and the ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color. You get a live swatch preview, the precise ratio, and clear pass or fail badges for AA (4.5:1 normal text, 3:1 large text) and AAA (7:1 normal text, 4.5:1 large text). Everything happens locally on your device: nothing is uploaded, nothing is logged, no account is needed, and it works fully offline once the page has loaded.
More Free Tools
More than 20 free AI tools.
Convert HEX, RGB, and HSL instantly in your browser
This tool converts colors between the three formats you actually use in CSS and design work: HEX, RGB, and HSL. Type a value in any one of them, or pick a color visually with the native browser color picker, and the other formats update live using the standard conversion math. HEX input is forgiving and accepts both 3-digit shorthand like #abc and full 6-digit values like #aabbcc.
Because it is hand-coded to run natively in the browser with zero dependencies, conversion is instant and completely private. There is nothing to install, no account to create, and no network round trip: open the page, enter a color, and copy whichever format your code, design token system, or canvas work needs.
Check WCAG AA and AAA contrast the way the spec defines it
Accessible color pairs are not guesswork. This checker computes the WCAG 2.x contrast ratio exactly as the guidelines specify: each sRGB channel is linearized with the c / 12.92 versus ((c + 0.055) / 1.055) raised to 2.4 piecewise formula, relative luminance is calculated as L = 0.2126R + 0.7152G + 0.0722B, and the ratio is (L1 + 0.05) / (L2 + 0.05) using the lighter color as L1. The result ranges from 1:1 for identical colors up to 21:1 for pure black on pure white.
You get pass or fail badges for all four WCAG thresholds at once: AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1), and AAA large text (4.5:1). A live swatch shows your foreground color on your background color with sample text, so you can judge real readability alongside the number and nudge a borderline pair until it passes.
Private, offline, and zero dependency by design
Unlike tools that send your colors to a server, every calculation here runs locally in plain in-browser JavaScript. Your colors, settings, and contrast checks never leave your device, nothing is logged, and no signup is required. You can verify this at any time by opening the Network tab in your browser DevTools and watching that no requests carry your values.
Running natively with zero dependencies also means it works fully offline once the page has loaded, and it stays fast no matter how many colors you check. That makes it ideal for auditing confidential brand palettes, unreleased product mockups, or any design you would rather not upload to a third-party service.
How It Works
Enter a color as HEX, RGB, or HSL, or pick it visually with the native color picker. Every format updates live as you type.
Set a foreground and a background color to compare. The live swatch shows the exact text-on-background pairing.
Read the WCAG contrast ratio and the AA and AAA pass or fail badges for normal and large text, then copy any value you need.
Need expert help with AI?
Looking for a specialist to help integrate, optimize, or consult on AI systems? Book a one-on-one technical consultation with an experienced AI consultant to get tailored advice.
Key Features
Privacy & Trust
Use Cases
Limitations
- WCAG 2.x contrast is a luminance-based formula and does not perfectly model human perception in every case; the newer APCA algorithm used in WCAG 3 drafts can disagree on some pairs
- The checker covers text and background contrast; it does not evaluate non-text UI contrast, focus indicators, or color-blindness simulation
- Alpha and transparency are not factored into the ratio; contrast is computed for fully opaque colors, so composite the real background color first
- Large text in WCAG means at least 18pt (about 24px) or 14pt bold (about 18.66px); the tool reports the large-text result but cannot know the actual font size in your design
Q&A SESSION
Got a quick technical question?
Skip the back-and-forth. Get a direct answer from an experienced engineer.
Frequently Asked Questions
Is this color converter and contrast checker free?
Yes, it is completely free with no limits, no signup, and no installation. You can convert as many colors and check as many contrast pairs as you like. The tool is hand-coded to run entirely in your browser with zero dependencies, so there are no server costs and nothing to pay for. Every feature, including the WCAG AA and AAA checks and copy to clipboard, is available to everyone.
Are my colors sent to a server?
No. Every conversion and every contrast calculation happens on your device inside the browser using plain JavaScript. No colors, values, or settings are uploaded, stored remotely, or logged. You can confirm this by opening the Network tab in your browser DevTools while typing colors: you will see no requests carrying your data. That makes it safe to use with confidential brand colors or unreleased designs.
How is the WCAG contrast ratio calculated?
It follows the official Web Content Accessibility Guidelines formula exactly. Each sRGB channel value (0 to 1) is linearized with c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) raised to 2.4. Relative luminance is then L = 0.2126 times red plus 0.7152 times green plus 0.0722 times blue. The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker one, giving a value from 1:1 up to 21:1.
What do AA and AAA mean, and what are the thresholds?
AA and AAA are conformance levels in WCAG. For normal text, AA requires a contrast ratio of at least 4.5:1 and AAA requires at least 7:1. For large text (at least 18pt or 14pt bold), AA requires at least 3:1 and AAA requires at least 4.5:1. The tool shows a pass or fail badge for all four thresholds so you can tell at a glance which level your color pair meets.
Do I need to install anything, and does it work offline?
No installation is needed: it is a single web page that runs in any modern browser. Because all the math is plain in-browser JavaScript with zero dependencies, it works fully offline once the page has loaded. You can keep converting colors and checking contrast on a plane or with no connection, and nothing reloads from the network.
Which color formats can I convert between?
You can convert between HEX, RGB, and HSL in any direction. HEX input accepts both 3-digit shorthand like #abc and full 6-digit values like #aabbcc. RGB is read as red, green, and blue from 0 to 255, and HSL is hue from 0 to 360 with saturation and lightness as percentages. Change any one format and the others update instantly using the standard conversion math.
Is the WCAG result the same as what a designer needs to ship?
The ratio and AA and AAA badges follow WCAG 2.x precisely, which is what most accessibility audits and legal standards reference. Keep in mind a few caveats: the formula does not model transparency, so composite over the real background first, and it does not simulate color blindness. The large-text result assumes your text actually qualifies as large (at least 18pt or 14pt bold). For final sign-off, confirm the real font size and rendered background in your design.