Start with body text
The AA threshold for text in paragraphs, labels and buttons. Normal text needs 7:1 for AAA.
CometWeb tools
Contrast ratio checker
Choose text and background colors. Preview the pair and check it against WCAG 2.2 contrast thresholds.
FreeNo account required
Colors
Paste a HEX code or choose a color from the picker.
Calculations run in your browser. Colors are not sent for analysis.
Preset pairs
Contrast ratio
19.17: 1
AA, Normal: pass
Preview: 24 px heading, 16 px body
Large heading title
The quick brown fox jumps over the lazy dog.
0123456789, @ & %
AA, Normal≥ 4.5:1pass
AA, Large≥ 3:1pass
AAA, Normal≥ 7:1pass
AAA, Large≥ 4.5:1pass
The displayed ratio is rounded. Threshold checks use the full value.
Which threshold applies?
This checks one pair of opaque colors, not the accessibility of an entire page. Gradients, images and transparency require checking the actual background behind the text.
W3C contrast guidance ↗Large text has a different threshold
AA for text at least 24 px, or bold text at least approximately 18.67 px. Large text needs 4.5:1 for AAA.
Check the finished design too
Review text at its actual size. Check links, placeholders, hover and focus states separately. A passing pair does not assess other elements.
It lightens or darkens the text color until it reaches 4.5:1 against the selected background. The background stays unchanged. Review the new color in your design: it may differ from your brand color.
No. This tool calculates contrast between two colors and compares it with text thresholds. It does not test your site, keyboard access, image descriptions or other accessibility requirements.
The calculator accepts 3- or 6-digit HEX without an alpha channel. For transparent text, first determine its resulting color on the specific background. For an image or gradient, check the lowest-contrast area behind the text.
This tool patches one problem at a time
Automated WCAG 2.2 tests with a fix list and an action plan.