What contrast ratio do I need to pass WCAG?

4.5:1 for body text and 3:1 for large text at level AA, where large means 18.66px bold or 24px regular and above. Level AAA raises those to 7:1 and 4.5:1.

What is OKLCH and why use it over HSL?

It is perceptually uniform, meaning equal numeric steps look like equal visual steps. HSL does not have that property, which is why palettes made by stepping HSL lightness look uneven through the middle.

Why does the contrast ratio ignore transparency?

Because a translucent color does not have one. What it contrasts against depends on whatever sits behind it, and a confident wrong answer is worse than none.

Color Converter and Contrast Checker

Image toolsRuns in your browser — nothing uploadedUpdated 9 August 2026

Type a color in any notation — hex, a CSS name, rgb, hsl or oklch — and get every other format back, plus its WCAG contrast ratio against a background you choose and a perceptually even tint scale.

Color

Against (for contrast)

HEX: #2563eb
HEX + alpha: #2563ebff
RGB: rgb(37 99 235)
HSL: hsl(221.2 83.2% 53.3%)
OKLCH: oklch(54.61% 0.2152 262.9)

Sample text

5.16:1

Passes AA at any size, and AAA for large text.

Passes · AA body text
Passes · AA large text
Fails · AAA body text
Passes · UI components

Perceptual scale

100
#c6efff
200
#98c8ff
300
#6ba2ff
400
#3f7bf9
500
#1d56d4
600
#09389f
700
#001a6d
800
#00003f
900
#020015

Stepped in OKLCH, not HSL. Equal lightness steps in HSL are not equal perceptual steps, which is why so many generated palettes have a muddy middle.

How to use it

Type or paste a color into the first box. Hex works with or without the leading hash.
Copy whichever format you need from the list — hex, rgb, hsl or oklch.
Set the second box to the background the color will sit on to get the contrast ratio.
Check the badges: AA needs 4.5:1 for body text and 3:1 for large text or UI elements.
Use the tint scale at the bottom as a starting palette — it steps through OKLCH, so the shades read evenly.

Frequently asked questions

What contrast ratio do I need to pass WCAG?: 4.5:1 for body text and 3:1 for large text at level AA, where large means 18.66px bold or 24px regular and above. Level AAA raises those to 7:1 and 4.5:1.
What is OKLCH and why use it over HSL?: It is perceptually uniform, meaning equal numeric steps look like equal visual steps. HSL does not have that property, which is why palettes made by stepping HSL lightness look uneven through the middle.
Why does the contrast ratio ignore transparency?: Because a translucent color does not have one. What it contrasts against depends on whatever sits behind it, and a confident wrong answer is worse than none.

Related tools

Built and maintained by Kavitha Kanchana

Software engineer at Cortana AI and co-founder of Ryzera Technologies, based in Sri Lanka. Found a bug or a wrong number? Email me.