SmartToolkit
design 🔒 100% In-Browser Privacy

Color Converter & WCAG Contrast Checker

Convert colors between HEX, RGB, and HSL with an interactive color picker and real-time WCAG accessibility contrast scores.

-
RGB Value
-
HSL Value
-
Contrast on Dark (#0B0F1A)
Advertisement

How to Use the Color Converter & WCAG Contrast Checker

1
Select a color visually using the native color picker or type a HEX code.
2
Review converted RGB and HSL values.
3
Check the automated WCAG contrast ratio against dark backgrounds (4.5:1 minimum for accessible body text).

Formula & Underlying Logic

WCAG 2.1 Contrast Ratio Formula

Relative luminance is calculated per ITU-R BT.709 color space:

Contrast Ratio = (L1 + 0.05) ÷ (L2 + 0.05)

Worked Step-by-Step Example

Evaluating Cyan #22D3EE on Dark Navy #0B0F1A

Contrast Ratio: 11.4:1 (Exceeds WCAG AAA requirement of 7.0:1).

Frequently Asked Questions

Standard body text requires a minimum ratio of 4.5:1. Large headings (18pt+ or 14pt bold) require at least 3.0:1.

Related Productivity & Financial Tools

utility

Unit Converter (Length, Weight, Temp)

Convert between metric and imperial units for length (meters, feet, inches), mass (kg, lbs), and temperature (Celsius, Fahrenheit) instantly.

Open Tool →

In-Depth Guides & Tutorials

design
WCAG Color Contrast Guidelines for Accessible Web Design

WCAG Color Contrast Guidelines for Accessible Web Design

Complete guide to WCAG 2.1 AA and AAA color contrast requirements. Learn 4.5:1 text ratios, relative luminance math, and accessible dark mode palettes.

Sep 20, 2026