93 · Productivity

Color Converter & Contrast Checker

Enter a colour in any common format to get the others, then check whether it’s readable on your background colour.

HEX, rgb() or hsl().

AaThe quick brown fox jumps over the lazy dog.

HEX

—

How to use the color converter & contrast checker

  1. Type a colour as HEX (#4f46e5), rgb() or hsl(), or use the picker.
  2. Enter a background colour to check contrast.
  3. See the contrast ratio and whether it passes WCAG AA and AAA for normal and large text.

Understanding contrast ratios

The Web Content Accessibility Guidelines (WCAG) compare the relative brightness of two colours on a scale from 1:1 (identical) to 21:1 (black on white).

  • AA needs at least 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold).
  • AAA needs 7:1 for normal text and 4.5:1 for large text.

Good contrast helps everyone read in bright light or on poor screens, not only people with low vision.

Examples

#4F46E5 text on white

Contrast 6.29:1 · passes AA, fails AAA for normal text

hsl(243, 75%, 59%)

#5048E5 · rgb(80, 72, 229)

Questions

Why does HSL to HEX not round-trip exactly?

HSL values are rounded to whole numbers, so converting back can shift a channel by one step. The difference isn’t visible.

Does it support transparency?

Alpha values in rgba() and hsla() are accepted but ignored, because contrast depends on what’s behind a transparent colour.

Is 3-digit HEX supported?

Yes. #f80 is read as #ff8800.