hidekazu-konishi.com

Color Converter and WCAG Contrast Checker Tool - HEX RGB HSL Converter with Accessibility Testing

First Published: 2026-03-31
Last Updated: 2026-03-31

This tool provides comprehensive color conversion between HEX, RGB, HSL, CMYK, and 147 CSS named colors, combined with a WCAG 2.1 contrast ratio checker for web accessibility compliance testing. Unique features include color vision deficiency (CVD) simulation showing how your colors appear to users with color blindness, auto-fix suggestions that recommend the nearest accessible color when contrast requirements fail, and CSS code generation with ready-to-use custom properties and snippets.

Features

• Multi-Format Color Conversion: Convert between HEX, RGB, HSL, CMYK, and 147 CSS named colors with real-time synchronization across all fields.
• Smart Color Input: Paste any color format (e.g., #ff6600, rgb(255,102,0), hsl(24,100%,50%), coral) and it is automatically detected and converted.
• WCAG 2.1 Contrast Checker: Calculate contrast ratios and check compliance with WCAG 2.1 Level AA and AAA for both normal and large text.
• Auto-Fix Suggestions: When contrast requirements fail, the tool suggests the nearest accessible foreground color that meets AA or AAA standards - click to apply instantly.
• Color Vision Deficiency Simulation: Preview how your colors appear to users with Protanopia, Deuteranopia, Tritanopia, and Achromatopsia using scientifically-based simulation matrices.
• CSS Code Generation: Generate ready-to-use CSS custom properties and usage examples including rgba(), box-shadow, and border snippets.
• Color Palette Generator: Automatically generate Complementary, Analogous, Triadic, Split-Complementary, Tetradic, and Shades palettes from any color.
• Visual Color Picker: Native browser color picker for intuitive color selection.
• Client-Side Only: All processing happens in your browser. No data is ever sent to any server.

How to Use

1. Enter a color using any method: type in the Smart Input field, edit HEX/RGB/HSL/CMYK values directly, select a CSS color name, or use the color picker. All other fields update in real time.
2. Check contrast: Click "Use as Foreground" or "Use as Background" to load a color into the WCAG Contrast Checker. The contrast ratio and AA/AAA pass/fail results update instantly.
3. Apply auto-fix: If a contrast check fails, click any suggested accessible color to apply it as the new foreground.
4. Review CVD simulation: Scroll to the Color Vision Deficiency Simulation section to see how your color appears under different types of color vision deficiency.
5. Copy CSS code: Use the "Copy CSS Code" button to copy generated CSS custom properties and usage examples to your clipboard.
6. Explore palettes: Click any swatch in the Color Palette Generator to copy its HEX value.

Important Notes

• CMYK conversion uses a simplified mathematical model. Professional print workflows may produce different results due to ICC color profiles and ink characteristics.
• Color vision deficiency simulations use the Machado et al. (2009) matrices for Protanopia, Deuteranopia, and Tritanopia. Actual perception varies between individuals.
• WCAG 2.1 defines "large text" as 18pt (24px) or 14pt (18.66px) bold. The contrast checker evaluates both normal and large text thresholds.
• Auto-fix suggestions adjust the foreground color lightness while preserving hue and saturation, finding the minimum change needed to meet the target contrast ratio.