Which format to use
HEX and RGB describe the red, green and blue light in a colour and work everywhere. HSL and HSV describe hue, saturation and lightness or brightness, which makes it easier to nudge a colour by hand. OKLCH is the newest CSS format: its lightness matches how bright colours look to people, so two colours with the same L really do look equally light, which makes it great for palettes and themes. All modern browsers support oklch() in CSS.
How the contrast ratio works
The ratio compares the relative luminance of the two colours, from 1:1 for identical colours to 21:1 for black on white. Results are never rounded up, so 4.49:1 fails AA. If the text colour is see-through, it is blended with the background first. When a pair fails, a nearby colour that passes is suggested for either side.
Input this tool understands
Three, four, six and eight digit HEX with or without #, rgb() and rgba() with commas or spaces, hsl() with deg, turn or rad, hsv(), oklch() and oklab(), the 148 CSS colour names and plain numbers like 59, 130, 246. Alpha after a slash or as a fourth value is kept.