Color Converter & Contrast Checker
WCAG 2.1Convert between HEX, RGB, and HSL color formats with real-time WCAG 2.1 AA/AAA contrast ratio compliance checking.
Color Formats
#4f46e5
rgb(79, 70, 229)
WCAG 2.1 Contrast Ratios
On White (#ffffff) 4.82 : 1
Sample Headline Text
AA Pass
On Black (#000000) 4.36 : 1
Sample Headline Text
AA Fail
About This Tool
This tool converts a single color between HEX, RGB, and HSL notation and checks its WCAG 2.1 contrast ratio against pure white and pure black. Type a color code or drag the native picker, and all three formats plus both contrast cards update together: useful for picking a text color that will pass an accessibility audit against a given background.
It converts and checks one color at a time with exact mathematical luminance calculations.
Key Features
- Bidirectional color sync: The native color picker and text input stay continuously synchronized in both directions.
- Flexible format parser: Accepts HEX (3, 6, or 8-digit with alpha), rgb()/rgba(), and hsl()/hsla() strings.
- Simultaneous format output: HEX, RGB, and HSL are all displayed at once without requiring manual mode switching.
- Dual contrast cards: WCAG contrast ratios computed against both pure white and pure black backgrounds.
- AA/AAA compliance badges: Evaluates standard 4.5:1 (AA) and 7:1 (AAA) thresholds using relative luminance.
- Fully client-side: Color parsing, conversion, and contrast math never leave your browser.
Frequently Asked Questions
Which color formats can I type in?
HEX (#fff, #ffffff, or #ffffff80 with alpha), rgb()/rgba(), and hsl()/hsla() strings are all parsed as input.
What do the AA / AAA badges mean?
They reflect WCAG 2.1 contrast thresholds: AA passes at a ratio of 4.5:1 or higher, AAA at 7:1 or higher. Ratios are computed using the standard relative-luminance formula against pure white and pure black backgrounds.
Does this account for large text thresholds?
No, the current pass/fail badges use the normal-text thresholds (4.5:1 / 7:1) only; there is no separate large-text (3:1 / 4.5:1) mode.
How does the color picker relate to the text field?
They stay in sync: dragging the native color picker updates the text field with a HEX value, and typing a valid 6-digit HEX code into the text field updates the picker swatch.
Is any color data sent to a server?
No. All parsing, conversion, and contrast math run locally in your browser.
