What contrast ratio do I need?

For WCAG AA, 4.5 to 1 for normal text and 3 to 1 for large text. AAA requires 7 to 1 and 4.5 to 1. Interface components and meaningful icons need at least 3 to 1 against their surroundings.

When should I use HSL instead of HEX?

Whenever you are adjusting rather than recording. Lightening a colour in HSL is one number; in HEX it is three, and the hue tends to drift while you do it.

Does HEX support transparency?

Yes, as an eight-digit form where the last pair is the alpha channel. Support is universal in current browsers, but older tooling may only understand the six-digit version.

Why do two colours that look equally bright have different contrast?

Because contrast is computed from relative luminance, and the eye is far more sensitive to green than to blue. A saturated blue and a saturated yellow can look similarly vivid and sit at opposite ends of the luminance scale.

A colour converter that tells you if anyone can read it

ColorHexa will tell you more about a single colour than you knew there was to know - schemes, shades, blindness simulations, the lot. What it is not organised around is the question that actually blocks a design review, which concerns two colours rather than one.

Open the Color Converter →

ColorHexa and Softland, side by side

	ColorHexa	Softland
HEX, RGB and HSL conversion	Yes, plus many more colour spaces	HEX, RGB, HSL
Contrast ratio between two colours	Not the focus	Central - foreground and background together
WCAG pass and fail	Not stated as a verdict	Stated, for normal and large text
Colour schemes and harmonies	Extensive	Not offered
Colour blindness simulation	Included	Not offered

A colour on its own cannot be judged

Nobody ships one colour. They ship text on a background, an icon on a button, a placeholder in an input, a caption over an image. Whether any of it can be read is a property of the pair, and no amount of information about either colour individually answers it.

That is why conversion and contrast belong on the same page. The workflow is not convert this colour, it is I have these two colours, will this pass - and if it does not, adjust the lightness until it does. Splitting that across two tools means copying values back and forth for every iteration.

What the ratios actually require

The AA level asks for 4.5 to 1 for normal text and 3 to 1 for large text, where large means roughly 18 point, or 14 point bold. AAA raises those to 7 to 1 and 4.5 to 1. Interface components and meaningful graphics need 3 to 1 against what is next to them, which is the rule that catches thin icons and subtle input borders.

The failures that survive review are predictable: grey placeholder text, a disabled state nobody checked, white text on a mid-tone brand colour that was chosen on a good monitor in a dark room, and a caption over a photograph where the contrast changes depending on which photograph. Each is legible to the person who made it and not to someone reading on a phone in daylight.

Why HSL is the format you want when adjusting

HEX and RGB describe a colour in terms of how much red, green and blue to emit, which is how a screen works and not how anyone thinks. Making a colour slightly lighter in HEX means changing three values at once and hoping the hue survives the trip.

HSL separates hue, saturation and lightness, so making something lighter means changing one number. When a contrast check fails, the fix is almost always a lightness adjustment on one side of the pair, and HSL is the representation in which that is a single edit rather than an experiment.

When ColorHexa is the better choice

You want to explore a colour in depth - harmonies, tints, shades, and the named colours nearest to it.
You need colour spaces beyond the three here, such as CMYK for print or LAB for colour science.
You want colour blindness simulation, which is a genuinely different accessibility check from contrast and one this does not perform.

Frequently asked questions

What contrast ratio do I need?: For WCAG AA, 4.5 to 1 for normal text and 3 to 1 for large text. AAA requires 7 to 1 and 4.5 to 1. Interface components and meaningful icons need at least 3 to 1 against their surroundings.
When should I use HSL instead of HEX?: Whenever you are adjusting rather than recording. Lightening a colour in HSL is one number; in HEX it is three, and the hue tends to drift while you do it.
Does HEX support transparency?: Yes, as an eight-digit form where the last pair is the alpha channel. Support is universal in current browsers, but older tooling may only understand the six-digit version.
Why do two colours that look equally bright have different contrast?: Because contrast is computed from relative luminance, and the eye is far more sensitive to green than to blue. A saturated blue and a saturated yellow can look similarly vivid and sit at opposite ends of the luminance scale.

Try it yourself

HEX, RGB, HSL and contrast checking.

Open the Color Converter

ColorHexa is a trademark of its respective owner. Softland is not affiliated with, endorsed by or sponsored by ColorHexa. This comparison reflects how each product works rather than what either costs, because pricing and plan limits change; check ColorHexa’s own site for its current terms.