A more accessible
website.
Check a public page for common source-HTML issues. Then take a closer look at color contrast.
Standards and guidance references—not certification or endorsement.
Start with a public page.
This initial check cannot establish ADA or WCAG conformance. Why human evaluation matters.
Check a color pairing.
Measure two opaque colors against WCAG text-contrast thresholds. This does not inspect the scanned page’s rendered colors.
Find your pairing.
Opaque, 3- or 6-digit hex colors only.
Make every
word count.
Good design is not only what you notice. It is also what you can comfortably read.
Pick two colors to check the text contrast thresholds.
| Text size | AA | AAA |
|---|---|---|
| Normal text | ||
| Large text |
Normal text: 4.5:1 for AA, 7:1 for AAA. Large text: 3:1 for AA, 4.5:1 for AAA. Large means at least 24px regular text, or approximately 18.67px bold text. Calculations use the unrounded ratio.
Readable starts here.
It does not end here.
The result checks the contrast of two opaque sRGB colors. It does not test your font, the size of the rendered text, a photograph, a gradient, opacity, keyboard behavior, or the accessibility of a whole page.
How to use the result.
For normal body copy, start with the 4.5:1 AA threshold. Do not round a result up to call it a pass. If the pairing misses the threshold, make the text darker or the background lighter and check again.
Use the preview to assess the feeling, then apply the colors to your actual design. A photograph or gradient needs checks at the actual locations behind the text, across responsive layouts and changing states.
Does a pass mean my website is accessible?
No. These are color-pair text contrast results only. Accessibility includes structure, keyboard access, names and labels, readable content, zoom behavior, focus, and many other requirements. The tool does not make a compliance certification.
Can I check colors with transparency or an image behind them?
Not directly. This tool accepts opaque three- or six-digit hex colors. Transparent layers have to be composited against the actual background first; photographs and gradients can have different contrast behind different letters.
Where do the thresholds come from?
The calculations use WCAG relative luminance. See the W3C explanations of Contrast (Minimum), SC 1.4.3 and Contrast (Enhanced), SC 1.4.6. Thresholds are checked against the unrounded ratio.