Color converter and contrast checker

WCAG 2.2 contrast

Type a color as HEX, RGB or HSL to get the other formats and a live swatch, and add a background color to check the WCAG contrast ratio for text and interface elements.

Fill in the fields to see the result.

How to use it

Enter a color like #3366cc, rgb(51, 102, 204) or hsl(220, 60%, 50%).
Optionally add a background color to check contrast.
Copy HEX, RGB or HSL; your last colors are remembered.

Details

Formats: #RGB, #RRGGBB, #RRGGBBAA, rgb()/rgba(), hsl()/hsla()
Contrast: WCAG relative luminance ratio, 1:1 to 21:1
Thresholds: AA 4.5:1 text, 3:1 large text and UI; AAA 7:1

Questions

What contrast ratio do I need?

WCAG AA needs 4.5:1 for normal text and 3:1 for large text (24 px, or 18.66 px bold) and for icons and input borders. AAA needs 7:1 for normal text.

How do I convert HEX to RGB by hand?

Split the six digits into pairs and read each as base-16: #3366cc is 33 = 51, 66 = 102, cc = 204, so rgb(51, 102, 204).

Why does HSL look easier to adjust?

Hue, saturation and lightness are separate, so you can make a lighter or darker shade by changing only L. RGB mixes all three channels.

Does it handle transparency?

Yes, 8-digit HEX and rgba()/hsla() alpha are read. Contrast assumes opaque colors, so check semi-transparent text against its real background.

Is what I type sent anywhere?

No. The calculation runs in this browser tab with the same code our MCP server uses. Nothing you type is sent to a server or saved, apart from settings like filing status, which stay in this browser.

Can an AI agent use this?

Yes. The same function is a tool on our free MCP server at tools.cuelark.com/mcp, so ChatGPT, Claude or Cursor get exactly the answer this page shows. 'Copy MCP call' gives you the arguments.