Are the colours sent anywhere?

No. Conversion and the ratio are computed in the browser.

It passes but still reads badly.

That happens. The ratio only looks at luminance — not hue difference or stroke weight. That is why the sample is there; trust your eye for the last step.

Can it handle colours with alpha?

No. A translucent colour depends on whatever is behind it, so no single ratio exists. Enter the resulting composited colour instead.

To reach the threshold, which colour should I move?

Usually the background. Text colour is often fixed by a brand, while a background tolerates a shift in lightness without changing the character of the design. Switch to HSL, move L in steps of 5, and stop once the ratio clears. Hue and saturation stay where they were, so the palette still looks like itself.

Do the same thresholds apply in dark mode?

They do — but a pairing that worked on a light background does not automatically work on a dark one, so check both. Saturated colours chosen against white are the ones that most often fall short once the background goes dark.

Does it account for colour vision differences?

No. This measures luminance difference only, not how distinguishable two hues are. A pairing can clear the ratio and still be unreadable for someone who cannot separate red from green. Not carrying meaning by colour alone — using shape, text or position as well — is a separate requirement from the ratio.

The difference in luminance between two colours, from 1:1 to 21:1. Black on white is 21:1. It is weighted for human sensitivity rather than being a plain brightness difference.

Conformance levels in WCAG. For small text, AA is 4.5:1 and AAA is 7:1. Most sites aim for AA.

Applies to things that carry meaning without being text — button outlines, input borders, icons. The floor is 3:1.

Three notations for the same colour, covering the same range. HEX is short and easy to paste, RGB suits arithmetic, HSL suits adjustment. HSL lets you darken a colour without shifting its hue by changing one number, which is what makes it convenient for deriving a palette.

What counts as large text

18pt (about 24px) and above, or bold at 14pt (about 18.5px) and above. At that size the requirement drops to 3:1 for AA and 4.5:1 for AAA. It is why a heading can pass while the body text beneath it fails.

The brightness figure the contrast ratio is built from. Each RGB component is un-gamma-corrected, then weighted: green heavily (0.7152), red moderately (0.2126), blue lightly (0.0722). Blue reads as dark to the eye, so blue-dominant colours gain contrast slowly on paper.

Back to all tools／ Images

Colour converter and contrast ratio

Runs in your browserNothing is uploaded

Convert between HEX, RGB and HSL. Enter a text colour and a background and you also get the contrast ratio and whether it meets the WCAG thresholds.

Input

Text colour

HEX#0E7566
RGBrgb(14, 117, 102)
HSLhsl(171, 79%, 26%)

HSL is shown rounded to whole numbers. Pasting that value back can land up to 3/255 away from the original colour (HEX and RGB are exact). For colours near a threshold, the pass/fail above can change.

Background colour

HEX#FFFFFF
RGBrgb(255, 255, 255)
HSLhsl(0, 0%, 100%)

Output

This is how small text looks. Long passages are read at this weight.

Large text at a glance

Contrast ratio5.59:1

Small text AA 4.5:1Passes
Large text AA 3:1Passes
UI parts and borders 3:1Passes
Small text AAA 7:1Fails

“Large” means roughly 24px and above, or 19px when bold. Below that, judge against the small-text threshold of 4.5:1.

Contrast ratio is the ratio of relative luminance between text and background; WCAG asks for 4.5 or more for body text. The number is there while you pick the colour, not after.

All tools

Why this one

Conversion and judgement together: The hard part is not the arithmetic but “may I use this colour for text”. With both colours entered, the ratio and the verdicts appear as you choose.
The large-text threshold too: 4.5:1 applies to small text; roughly 24px and above (19px bold) only needs 3:1. Judging by one number alone sends you fixing things that were already fine.
A sample beside the number: A ratio does not convey legibility, so a specimen set in the two colours sits next to it. Combinations can pass and still read poorly.

How to use it

Enter two colours
HEX (#0E7566), rgb() and hsl() are all accepted, including three-digit shorthand.
Take the conversions
Each form has a copy button giving a value you can paste straight in.
Read the verdicts
You get the ratio plus pass/fail for small text, large text and UI parts.

Terms and how to read them

Contrast ratio: The difference in luminance between two colours, from 1:1 to 21:1. Black on white is 21:1. It is weighted for human sensitivity rather than being a plain brightness difference.
AA and AAA: Conformance levels in WCAG. For small text, AA is 4.5:1 and AAA is 7:1. Most sites aim for AA.
The 3:1 for UI parts: Applies to things that carry meaning without being text — button outlines, input borders, icons. The floor is 3:1.
HEX, RGB and HSL: Three notations for the same colour, covering the same range. HEX is short and easy to paste, RGB suits arithmetic, HSL suits adjustment. HSL lets you darken a colour without shifting its hue by changing one number, which is what makes it convenient for deriving a palette.
What counts as large text: 18pt (about 24px) and above, or bold at 14pt (about 18.5px) and above. At that size the requirement drops to 3:1 for AA and 4.5:1 for AAA. It is why a heading can pass while the body text beneath it fails.
Relative luminance: The brightness figure the contrast ratio is built from. Each RGB component is un-gamma-corrected, then weighted: green heavily (0.7152), red moderately (0.2126), blue lightly (0.0722). Blue reads as dark to the eye, so blue-dominant colours gain contrast slowly on paper.

Questions

Are the colours sent anywhere?: No. Conversion and the ratio are computed in the browser.
It passes but still reads badly.: That happens. The ratio only looks at luminance — not hue difference or stroke weight. That is why the sample is there; trust your eye for the last step.
Can it handle colours with alpha?: No. A translucent colour depends on whatever is behind it, so no single ratio exists. Enter the resulting composited colour instead.
To reach the threshold, which colour should I move?: Usually the background. Text colour is often fixed by a brand, while a background tolerates a shift in lightness without changing the character of the design. Switch to HSL, move L in steps of 5, and stop once the ratio clears. Hue and saturation stay where they were, so the palette still looks like itself.
Do the same thresholds apply in dark mode?: They do — but a pairing that worked on a light background does not automatically work on a dark one, so check both. Saturated colours chosen against white are the ones that most often fall short once the background goes dark.
Does it account for colour vision differences?: No. This measures luminance difference only, not how distinguishable two hues are. A pairing can clear the ratio and still be unreadable for someone who cannot separate red from green. Not carrying meaning by colour alone — using shape, text or position as well — is a separate requirement from the ratio.

Input

Output

Related tools

Why this one

How to use it

Enter two colours

Take the conversions

Read the verdicts

Terms and how to read them

Questions