Color contrast checker (WCAG 2.2)

Check text and background colors against the WCAG 2.2 contrast levels. Test one pair, or paste a whole list. If a pair fails, you get the closest color that passes.

Runs in your browser. Nothing is sent to our servers.

Check one color pair

Text color

Background color

6.34 : 1

Contrast ratio of #0b6b66 on #ffffff. Shown cut to two decimals, never rounded up.

Contrast results by WCAG level
What it covers	Needs	WCAG	Result
Normal text, AA	4.5 : 1	1.4.3	Pass
Large text, AA	3 : 1	1.4.3	Pass
Normal text, AAA	7 : 1	1.4.6	Fail
Large text, AAA	4.5 : 1	1.4.6	Pass
Interface parts and graphics	3 : 1	1.4.11	Pass

Large text means 24 px (18 pt) or bigger, or 18.66 px (14 pt) or bigger in bold. Text on images, gradients and hover or focus states needs separate checks.

Closest colors that pass

Hue and saturation are kept and only the lightness moves, so the suggestion stays close to your color.

Suggested replacement colors
To reach	Change the text color to	Or change the background to
7 : 1normal text (AAA)	#0a635e7.09 : 1	No color works

Check many pairs at once

Paste one pair per line, or a block of CSS variablesText color first, background second, for example #333 #fff or Link: #0b6b66 on #f7f8f6. A name before a colon becomes the label. If you paste only variables like --ink: #0f2230;, every pair of them is checked.

5 pairs checked: 4 pass AA for normal text, 1 fail.

Contrast results for each pasted pair
Pair	Ratio	AA text	AA large	AAA text	UI 3:1	Closest text color for AA
Body text#0f2230 on #f7f8f6	15.25 : 1	Pass	Pass	Pass	Pass	Already passes
Link#0b6b66 on #f7f8f6	5.95 : 1	Pass	Pass	Fail	Pass	Already passes
Muted text#4b5b66 on #ffffff	7.02 : 1	Pass	Pass	Pass	Pass	Already passes
Placeholder#9aa5ad on #ffffff	2.51 : 1	Fail	Fail	Fail	Fail	#6a7883
Button#ffffff on #0b6b66	6.34 : 1	Pass	Pass	Fail	Pass	Already passes

What next?

Wondering how many colors across a whole site fall short? This tool looks at one thing at a time. It cannot tell you whether a whole website meets a standard or a law.

Check your whole site free Running this for client sites? See agency white-label reports

How it works

Each color is turned into red, green and blue values, then into relative luminance, the brightness measure defined in WCAG.
The contrast ratio is (lighter + 0.05) divided by (darker + 0.05). It runs from 1:1 for identical colors to 21:1 for black on white.
The ratio is compared with the WCAG levels: 4.5:1 for normal text and 3:1 for large text at AA, 7:1 and 4.5:1 at AAA, and 3:1 for interface parts and graphics.
For a failing pair, the tool keeps the hue and saturation and moves the lightness in small steps, both lighter and darker, until the ratio is reached. It then checks the new color with the same formula before showing it.
Everything runs in your browser. The colors you type are not stored or sent anywhere. Copy share link puts the two colors, and nothing else, into the web address so you can send a result to someone.

Questions

What contrast ratio do I need for WCAG AA?

Normal text needs at least 4.5:1 and large text at least 3:1 (success criterion 1.4.3). User interface components and graphics that carry meaning need 3:1 (1.4.11). AAA asks for 7:1 for normal text and 4.5:1 for large text (1.4.6).

What counts as large text?

Text that is at least 24 CSS pixels (18 point), or at least 18.66 pixels (14 point) and bold.

Does a pass here mean my page is accessible?

No. It means this one pair reaches the ratio. Text over images or gradients, hover and focus states, disabled controls and many other things need their own checks, and so do the many other parts of WCAG.

Why is 4.499 shown as 4.49 and not 4.5?

WCAG does not allow rounding up. A ratio just below the limit fails, so the tool cuts the number to two decimals instead of rounding it.

Does it work with transparent colors?

In a simple way. A see-through text color is laid over the background, and a see-through background is laid over white, before the ratio is worked out. For anything more complex, test the color you actually see on screen.