Color Converter & Contrast Checker
Convert hex, RGB and HSL colors and check WCAG contrast between two colors.
WCAG contrast checker
Large sample text (18pt+)
Normal sample text checks the stricter 4.5:1 requirement.
About this tool
Paste a color in any common CSS syntax, or pick one with the native picker, and read it back as hex, RGB and HSL with copy buttons and a live swatch. Transparency carries through each format (8-digit hex, rgba, hsla) and the swatch shows it over a checkerboard.
The contrast checker takes a text and background color and computes the WCAG ratio with the official luminance formula, then shows pass/fail badges for AA (4.5:1), large-text AA (3:1) and AAA (7:1) along with a live text sample in your actual pair. When the text color has alpha it is composited over the background first, which is what a browser renders. Everything runs locally as you type.
Frequently asked questions
- Which color formats can I paste?
- Hex in 3, 4, 6 or 8 digits (with or without #), rgb()/rgba() and hsl()/hsla() in both comma and modern space syntax, and all 148 CSS named colors like rebeccapurple.
- What contrast ratio do I need for accessibility?
- WCAG requires 4.5:1 for normal text (AA), 3:1 for large text, and 7:1 for the stricter AAA level. The checker shows pass or fail for each against your two colors.
- How is contrast computed when the text color has transparency?
- WCAG contrast is defined for opaque colors, so a foreground with alpha is first composited over the background, then the ratio is computed from the result. That matches what your eye actually sees.