Image → Tools

Color Toolbox

Convert colors between HEX, RGB, and HSL formats, and check WCAG accessibility contrast ratios for any foreground/background pair.

HEX / RGB / HSL Converter

HEX
RGB
R
G
B
HSL
H
S
L

WCAG Contrast Checker

Foreground
Background
Sample Text — Preview
Smaller body text example for normal-size checks.
Contrast Ratio4.50:1
✗AA — Normal text (≥4.5:1)
✓AA — Large text (≥3:1)
✗AAA — Normal text (≥7:1)
✗AAA — Large text (≥4.5:1)

How to color Toolbox

  1. Enter a HEX color, pick from the color swatch, or type RGB/HSL values.
  2. All three formats update instantly — copy any with one click.
  3. Scroll to the contrast checker, pick a foreground and background color.
  4. See the contrast ratio and WCAG AA/AAA pass/fail results with a live preview.

Why color conversion and contrast checking matters

Private by design — all color calculations run in your browser. No data is ever uploaded.

Related tools

Remove backgroundImage to SVGPattern Generator

Frequently asked questions

What is WCAG contrast ratio?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background to ensure readability for users with visual impairments. AA requires 4.5:1 for normal text, AAA requires 7:1.

What counts as large text for WCAG?

Large text is 18pt (24px) or larger, or 14pt (approximately 18.67px) bold or larger.

How is relative luminance calculated?

Each RGB channel is linearized then combined as L = 0.2126R + 0.7152G + 0.0722B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color.