Color Converter & Contrast Checker

Convert between HEX, RGB, and HSL, and check WCAG accessibility contrast between any two colors. Everything runs in your browser.

Color converter

WCAG contrast checker

Normal text (16 px)

Large text (24 px / bold 18.66)

Contrast ratio —
WCAG AA Normal text— Large text—
WCAG AAA Normal text— Large text—

How to use

  1. Pick a color with the swatch or type a HEX, RGB, or HSL value — the others update automatically.
  2. Scroll down to the Contrast checker and set a foreground and background color.
  3. Read the computed ratio and the AA / AAA pass-fail badges for normal and large text.
  4. Adjust either color until the ratio clears the threshold your design needs.

What does it do?

The converter translates a single color between HEX (#rrggbb), RGB (rgb(r, g, b)), and HSL (hsl(h, s%, l%)) in real time, so you can paste whatever format your design system uses and get the other two. The contrast checker takes a foreground and background, linearises both through the sRGB gamma curve, and reports the WCAG 2.x contrast ratio along with AA / AAA verdicts for normal and large text sizes.

Example

Input — a typical brand blue:

HEX  #2563eb
RGB  rgb(37, 99, 235)
HSL  hsl(221, 83%, 53%)

Paired against white (#ffffff) as background:

Contrast ratio   5.17:1
WCAG AA normal   Pass
WCAG AA large    Pass
WCAG AAA normal  Fail (needs 7:1)
WCAG AAA large   Pass

Why does WCAG AAA fail for this color pair?

These are the most common contrast and conversion pitfalls worth watching for:

  • Confusing AA large with AA normal. Large text needs only 3:1, so a link that reads fine in an H1 can still fail at body size. If a pair hits 3.5:1, it passes headlines but fails paragraphs.
  • Using HSL lightness as a proxy for contrast. hsl(0, 100%, 50%) (red) and hsl(240, 100%, 50%) (blue) both have L=50% but very different luminance. Always compute contrast from the RGB values, not from HSL lightness.
  • Forgetting alpha compositing. Text at rgba(0, 0, 0, 0.6) on white is effectively #666666. Check the flattened HEX, not the semi-transparent value.
  • Wrong hex length. #fff expands to #ffffff, but #ffff is a 4-digit short form with an alpha byte. Double-check the digit count when a HEX field silently rejects input.
  • Mixing display-P3 and sRGB. Colors taken from design tools like Figma in wide-gamut mode can be out of sRGB range, and browsers will clip them. Convert to sRGB in the source tool before copying the HEX.
  • Testing contrast only against pure white. If the real layout puts text on #f3f4f6 or on a photo, the visible contrast is lower. Test with the actual background.

Is my data private?

Yes. We don't save any of the colors you type, pick, or test for contrast. There's no record on our side of what you converted, and everything you enter is gone the moment you close or refresh the page. No logging, no analytics on your color values. Feel free to verify in your browser's developer tools.

Frequently asked questions

What contrast ratio do I need to pass WCAG AA?

WCAG 2.1 AA requires 4.5:1 for normal body text and 3:1 for large text, where large means at least 18 pt (24 px) regular or 14 pt (18.66 px) bold. UI components and graphical objects need 3:1 against their background. AAA raises the bar to 7:1 for normal text and 4.5:1 for large text.

Why does the HSL I type back in give slightly different RGB values?

HSL is stored as integer percentages in most tools, so the round-trip RGB to HSL to RGB can shift by one unit on each channel. That drift is within a JND and invisible on screen, but if you need exact round-trip fidelity, keep the HEX or RGB value as the source of truth and treat HSL as a view.

Does this tool use sRGB gamma correction for contrast?

Yes. The contrast calculation follows the WCAG 2.x formula, which linearises each sRGB channel with the gamma curve, computes relative luminance, and takes (L1 + 0.05) / (L2 + 0.05). Simple average-of-channels or naive HSL lightness gives misleading numbers and will not match the WCAG result.

How do I handle alpha or semi-transparent colors?

WCAG contrast is defined against a solid background, so flatten any alpha by compositing the foreground over the real backdrop first. For example, a 50% black text block on a white page is effectively #808080 on #ffffff. Pass that flattened HEX into the checker instead of the semi-transparent value.

Is HEX #rgb the same as #rrggbb?

Yes. The 3-digit short form expands each nibble by repeating it, so #f0c becomes #ff00cc. The 4-digit and 8-digit forms add an alpha channel. This tool accepts 3-digit, 6-digit, and 8-digit HEX, and treats the alpha byte as informational only for contrast since WCAG requires a solid composited color.

Do you save the colors I type or pick?

No. We don't keep any record of the colors you test, convert, or check for contrast. Everything you type or drag into the picker is discarded when you close the tab — no logging, no analytics on your color values. Peek at your browser's developer tools if you want to see for yourself.

Related tools

  • QR Code Generator — pick foreground and background HEX values that still scan under the 3:1 rule.
  • Image Compress — shrink the hero image whose backdrop you just tested for contrast.
  • Markdown to HTML — preview styled content before copying the accessible palette into your stylesheet.
  • Regex Tester — helpful when scraping HEX tokens out of a CSS or SCSS file.
  • Diff Checker — compare two theme files before and after adjusting colors for AA compliance.
  • All text & developer tools