A color converter that rounds the display but not the verdict
A contrast ratio of 4.496 shows as 4.50 : 1 and still fails AA. The pass or fail test uses the exact value, and only the label is rounded. On the converter side, HSL and CMYK are rounded to whole numbers. CMYK is the plain mathematical conversion from RGB, with no ICC profile, so a print shop may get a different result. The color converter starts with #3b82f6, a medium blue. It comes out as rgb(59, 130, 246), hsl(217, 91%, 60%) and cmyk(76%, 47%, 0%, 4%).
Trying it with #003366 and #999999
A brand blue arrives as #003366. In CSS you want lighter and darker variants, and HSL makes that easy: the tool gives hsl(210, 100%, 20%), so you only raise the last number. For a flyer, the same blue reads cmyk(100%, 50%, 0%, 60%) as a first value to hand to the printer.
A light gray placeholder such as #999999 on white gives 2.85 : 1. That fails AA even for large text. White on the default #2563eb gives 4.68 : 1, which passes AA for body text but not AAA.
Steps for one color and one contrast pair
- Click the color swatch to open your browser's color picker, or paste a code into the HEX field. Six digits and the three-digit shorthand (#0af) both work, with or without the leading #.
- Read the RGB, HSL and CMYK (print) fields. Press the copy button above a field to put its value on the clipboard.
- Open the right panel and set Text color and Background.
- Read the ratio and the four badges: AA Normal, AAA Normal, AA Large and AAA Large. They update whenever you pick a color.
What the fields accept, and what stays local
Only the HEX field and the picker drive the conversion. The RGB and HSL fields look editable, but typing into them changes nothing. CMYK is read-only.
The HEX field rewrites itself as soon as its content is a valid code. Type #ff0 on the way to #ff0000 and the field jumps to #ffff00, so paste the full code instead. Codes with eight digits (alpha), named colors such as "tomato" and notations like OKLCH or HSV are not supported. Invalid input is ignored without an error message.
The two contrast pickers work separately from the converter and accept only colors from the picker. The tool does not know your font size. WCAG calls text large from 18 pt, or 14 pt bold.
Conversion and contrast run in JavaScript in your browser. Picking or typing a color sends no request, and the network panel of your developer tools shows this. The copy buttons write to your clipboard. The tool code does not store your colors.