What is WCAG contrast ratio?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors to ensure readability. Level AA requires 4.5:1 for normal text and 3:1 for large text.

What is the difference between HEX, RGB, and HSL?

HEX uses a 6-digit hexadecimal code (#FF0000). RGB specifies red, green, and blue channels (0-255). HSL uses hue (0-360), saturation (0-100%), and lightness (0-100%).

When should I use HSL?

HSL is intuitive for creating color variations. Adjusting lightness creates tints and shades, while adjusting saturation creates vivid or muted versions of the same hue.

// color-picker

Color Picker

Pick colors and convert between HEX, RGB, and HSL formats. Check WCAG contrast ratios.

HEX

RGB

HSL

HSV

199, 94%, 91%

CMYK

94%, 29%, 0%, 9%

Contrast Checker

Foreground

Background

Preview

Sample Text

17.72:1

Contrast Ratio

WCAG AA - Normal Text

Pass

WCAG AA - Large Text

Pass

WCAG AAA - Normal Text

Pass

WCAG AAA - Large Text

Pass

Color Palette

Complementary

Current

Complementary

Analogous

-30

Current

+30

Triadic

Current

+120

+240

How to Use Color Picker

Pick a color-Use the color picker or enter a value in HEX, RGB, or HSL format.
View conversions-The color is automatically converted and displayed in all three formats.
Check contrast-Set foreground and background colors to check WCAG contrast ratio compliance.
Copy values-Click Copy on any format to copy the color value.

About Color Picker

Color Picker lets you select colors and instantly convert between HEX, RGB, and HSL formats. It also includes a WCAG contrast ratio checker for accessibility testing.

The contrast checker evaluates foreground/background color combinations against WCAG 2.1 guidelines for both normal text (4.5:1 for AA) and large text (3:1 for AA).

All processing happens locally in your browser. No color data is transmitted anywhere.

FAQ

Related Tools

CSS Gradient Generator

Create beautiful CSS gradients with a visual editor. Linear, radial, and conic gradient support.