Color Converter & WCAG Contrast Checker
A color converter that translates between HEX, RGB, and HSL formats while also checking WCAG contrast ratios for accessible design. Web developers use this to convert design colors into CSS-ready code and ensure text is readable against backgrounds. The tool accepts HEX colors (e.g., #3b82f6), converts them to RGB (e.g., rgb(59, 130, 246)) and HSL (e.g., hsl(217, 91%, 60%)), and generates copy-ready CSS snippets. The built-in contrast checker calculates the luminance ratio between your chosen text color and background color, then reports whether it meets WCAG AA and AAA standards for normal text (14pt), large text (18pt+), and enhanced contrast requirements. Designers use this to pick accessible color palettes for UI components, developers use it to validate color combinations before shipping code, and accessibility specialists use it to audit existing websites. The tool supports visual color picking, manual HEX input, and real-time contrast previews with sample text. All calculations happen in your browser using standard W3C formulas, with no server dependencies. Free, no signup, works offline once loaded.
color: #3b82f6;color: rgb(59, 130, 246);color: hsl(217, 91%, 60%);WCAG Contrast Checker
Test your color against backgrounds to ensure it meets accessibility standards.
Large Text Sample (18pt+)
Normal text sample for testing readability (14pt)
How to Convert Colors and Check Contrast
- Pick a color using the color picker or enter a HEX code manually (e.g., #FF5733)
- See instant conversions to RGB and HSL formats with ready-to-copy CSS code
- Choose a background color in the Contrast Checker section using the second color picker
- Review the contrast ratio and WCAG pass/fail indicators for AA and AAA compliance
- Copy CSS code by clicking the copy button next to each format (HEX, RGB, or HSL)
Why Color Conversion and Contrast Matter
HEX, RGB, and HSL are three ways to represent the same color. HEX (hexadecimal) uses six characters (e.g., #FF5733) where the first two digits are red, the next two are green, and the last two are blue (each ranging from 00 to FF). RGB (Red, Green, Blue) uses decimal values from 0 to 255 for each channel (e.g., rgb(255, 87, 51)). HSL (Hue, Saturation, Lightness) represents color as a 360-degree hue wheel, a percentage saturation, and a percentage lightness (e.g., hsl(9, 100%, 60%)). Designers often think in HSL because adjusting lightness is easier than tweaking RGB values, while developers prefer HEX for its brevity. This tool converts between all three formats so you can work in whichever system makes sense for your task.
WCAG contrast ratios measure how distinguishable text is from its background on a scale from 1:1 (no contrast) to 21:1 (maximum contrast). The formula calculates relative luminance using the sRGB color space, then divides the lighter color's luminance by the darker color's luminance. WCAG 2.1 sets minimum ratios: AA requires 4.5:1 for normal text (14pt), 3:1 for large text (18pt+). AAA requires 7:1 for normal text and 4.5:1 for large text. These standards ensure people with low vision or color blindness can read your content. Failing contrast checks is one of the most common accessibility violations on the web.
This tool uses the W3C relative luminance formula: L = 0.2126 * R + 0.7152 * G + 0.0722 * B, where R, G, and B are linearized sRGB values (gamma-corrected). The contrast ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. The tool displays pass/fail results for all four WCAG levels (AA normal/large, AAA normal/large) and shows a live preview so you can see whether your text is readable. Use this during design to choose accessible color palettes, or during audits to fix existing contrast violations.