How to use this tool
- Enter the text and background colors as three- or six-digit HEX values.
- Read the contrast ratio and AA/AAA results for normal and large text.
- Adjust the colors and inspect the sample. Use the color picker for other color formats.
How it works
Check text and background colors against WCAG 2.2 AA and AAA contrast thresholds. Enter HEX values and preview the pair locally.
The tool converts opaque sRGB channels to linear light and calculates relative luminance. Contrast is the lighter luminance plus 0.05 divided by the darker plus 0.05. AA thresholds are 4.5:1 for normal text and 3:1 for large text; AAA thresholds are 7:1 and 4.5:1. Pass/fail uses the full ratio, not its rounded display.
What to keep in mind
Only solid opaque sRGB colors are supported, not images, gradients or transparency. Large text means at least 18 pt (24 CSS px), or 14 pt (about 18.67 CSS px) in bold. A passing pair does not establish full WCAG compliance: typography, focus, interaction and other criteria still matter.
Frequently asked questions
What contrast does normal text need?
For WCAG AA, normal text needs at least 4.5:1; for AAA, at least 7:1. The tool displays both results.
Why can 4.50:1 still fail?
The display is rounded to two decimals. A true ratio just below 4.5 can display as 4.50 but still fail; thresholds must not be rounded up.
Can I test a transparent color?
Not directly. First determine the final opaque color after compositing it over its actual background, then enter that value.
Does passing mean my website is accessible?
No. This checks one pair of colors for text contrast. Accessibility also depends on keyboard use, structure, labels, behavior and other WCAG criteria.