What counts as large text?

24px and above, or 19px and above if it is bold. Below that the normal text thresholds apply: 4.5:1 for AA and 7:1 for AAA. Icons, borders and other interface parts have their own lower bar of 3:1, which is the last row and the one people most often do not know exists.

Does it handle transparency?

Yes. A contrast ratio is undefined against a colour you can see through, so the text colour is composited onto the background first and the flattened value is shown, which is the colour the eye is actually reading.

Is the ratio the whole story?

No. WCAG 2.2 contrast is known to be rough on mid tones and on dark backgrounds, and a pair that passes can still be uncomfortable. It is also the measure an audit will hold you to, so it is the one reported here.

Contrast Checker

Every WCAG threshold, graded at once.

Text color

Background color

Every WCAG threshold, graded at once.

How to use it

Enter the text color. Any CSS format. A translucent color is laid over the background first.
Enter the background. The color actually behind the text, not the page color, if they differ.
Read the grades. Every threshold is graded at once, so there is nothing to select and nothing to miss.

When you would use this

The WCAG contrast ratio runs from 1:1 for two identical colors to 21:1 for black on white, and the thresholds that matter are 4.5:1 for normal text at AA, 3:1 for large text, and 7:1 for normal text at AAA. Most checkers ask which one you are testing for and grade against that. This grades against all of them at once, including the 3:1 for icons and borders, which is the requirement people most often do not know exists. Translucent colors are handled properly. A ratio cannot be computed against a color you can see through, so the text color is composited onto the background first and the flattened value is shown, which is the color the eye is actually reading. It is worth knowing that WCAG 2.2 contrast is an imperfect measure, particularly on mid tones and dark backgrounds. It is also the one an audit will hold you to.

Questions

What counts as large text?: 24px and above, or 19px and above if it is bold. Below that the normal text thresholds apply: 4.5:1 for AA and 7:1 for AAA. Icons, borders and other interface parts have their own lower bar of 3:1, which is the last row and the one people most often do not know exists.
Does it handle transparency?: Yes. A contrast ratio is undefined against a colour you can see through, so the text colour is composited onto the background first and the flattened value is shown, which is the colour the eye is actually reading.
Is the ratio the whole story?: No. WCAG 2.2 contrast is known to be rough on mid tones and on dark backgrounds, and a pair that passes can still be uncomfortable. It is also the measure an audit will hold you to, so it is the one reported here.