TOOLGENIEFree Color Converter & WCAG Contrast Checker
Convert HEX, RGB, HSL, HSV, and CMYK instantly — then check WCAG 2.1 AA/AAA contrast for accessible text and UI colors. Private and free in your browser.
Normal text sample — The quick brown fox
Large text — Readable at 18pt+
Foreground
#1a73e8
Background
#ffffff
RGB / RGBA
HSL / HSLA
HSV
CMYK
Tints & shades
WCAG Contrast Checker
Foreground vs background luminance ratio (opaque colors).
4.51:1
Reference: black (#000000) on white (#ffffff) is 21:1. Large text is roughly 18pt regular or 14pt bold. UI components and graphics need at least 3:1.
How to Use the Color Converter and Contrast Checker
- Pick or paste a color — use the native color picker, type a HEX value (#RGB, #RRGGBB, or #RRGGBBAA), or edit RGB, HSL, HSV, or CMYK fields. All formats stay in sync.
- Switch Foreground / Background when you are checking accessibility. The live preview shows normal and large text on your pair.
- Read the WCAG contrast ratio and Pass/Fail badges for AA/AAA normal text, large text, and the 3:1 UI / non-text threshold.
- Copy CSS-ready values with one click — HEX,
rgb(),hsl(), HSV, or CMYK. - Explore tints and shades from the strip under the converter, or generate a random color first and convert it here.
About This Free Color Converter
Designers and developers constantly translate colors between HEX, RGB, HSL, HSV, and CMYK — then still have to ask whether the pair is readable. Separate converters and contrast tools slow that loop down.
This color converter and WCAG contrast checker keeps both jobs on one page. Edit any format and the rest update live. Check AA/AAA thresholds for normal and large text, plus the WCAG 2.1 non-text UI requirement (3:1). Everything runs client-side, so palette experiments never leave your browser.
Pair it with the random color picker for inspiration, the image resizer & cropper when you are extracting colors from assets, or the unit converter for related design-system math.
HEX, RGB, HSL, HSV & CMYK Quick Reference
| Format | Typical use | Example |
|---|---|---|
| HEX | CSS, design tools, brand tokens | #1a73e8 |
| RGB / RGBA | Web rendering, alpha overlays, canvas | rgb(26, 115, 232) |
| HSL / HSLA | Theming, lighten/darken, design systems | hsl(214.5, 82%, 51%) |
| HSV | Color pickers, creative tools, value-based edits | hsv(214.5, 88.8%, 91%) |
| CMYK | Approximate print handoff (device-dependent) | cmyk(88.8%, 50.4%, 0%, 9%) |
CMYK values here are a standard RGB↔CMYK approximation for reference — calibrated print workflows still need ICC profiles and press proofs.
Frequently Asked Questions (FAQ)
How do I convert HEX to RGB?
Paste a hex code like #1a73e8 (3-, 6-, or 8-digit with alpha). The tool shows rgb(R, G, B) instantly and keeps HSL, HSV, and CMYK in sync so you can copy any format for CSS.
How do I convert RGB to HEX?
Enter red, green, and blue values from 0–255 (and optional alpha). You’ll get a six-digit hex code — or eight digits when alpha is set — plus matching HSL, HSV, and CMYK values.
What contrast ratio do I need for WCAG AA and AAA?
WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold) and UI components. AAA requires 7:1 for normal text and 4.5:1 for large text. This checker shows Pass/Fail for each threshold.
What is a WCAG contrast ratio?
A WCAG contrast ratio measures the luminance difference between foreground and background colors, from 1:1 (identical) to 21:1 (black on white). Higher ratios are easier to read for people with low vision.
Can I convert HEX to HSL or CMYK?
Yes. Edit any field and HEX, RGB, HSL, HSV, and CMYK update together. HSL is ideal for CSS design tokens; CMYK is a useful approximate handoff for print workflows.
Does this work as an accessible color checker for UI and icons?
Yes. Besides text AA/AAA checks, it evaluates the WCAG 2.1 3:1 requirement for non-text UI contrast (borders, icons, and graphics) so interactive colors are not an afterthought.
Is my color data uploaded to a server?
No. Color conversions and contrast calculations run entirely in your browser with JavaScript. Nothing is sent to ToolGenie servers.
Why use a combined color converter and contrast checker?
Design handoff often needs both “what’s the CSS value?” and “does this pair pass AA?” One free client-side page avoids bouncing between separate converters and contrast tools.
Tips for Accessible Color Choices
- Do not rely on color alone. Pair contrast with icons, labels, or patterns so meaning survives color blindness and high-contrast modes.
- Prefer AA for body text (4.5:1) and aim for AAA (7:1) on long-form reading surfaces when you can.
- Check UI chrome separately — icons, borders, and focus rings need at least 3:1 against adjacent colors.
- Use HSL for systematic tweaks. Nudge lightness while keeping hue/saturation stable to climb toward a passing ratio without abandoning the brand hue.
- Verify on both themes. A pair that passes on white may fail on dark backgrounds — swap FG/BG and re-check.
- Need placeholder copy while you test type sizes? Try the lorem ipsum generator or normalize token names with the case converter.