Text Contrast Checker
Verify your body text and paragraph colors are readable against any background. Check WCAG AA and AAA compliance for all text sizes — from small captions to large headings — with real-time previews.
How to Check Body Text Contrast
1. Enter your body text color — typically the default font color from your CSS, like #333333 for dark gray or your brand's primary text color.
2. Enter your page background — usually white (#FFFFFF) or a light off-white shade. The tool instantly shows whether your body text meets the 4.5:1 AA threshold.
3. Use the preview tab to see actual rendered text at different sizes. The text preview shows exactly how your colors look at reading sizes, so you can judge readability beyond just the numbers.
Body Text vs Large Text: Know Your Thresholds
WCAG has different contrast requirements based on text size — and this matters enormously in real-world design. Body text (paragraphs, labels, menu items, captions) is typically 16px and falls under the stricter 4.5:1 AA requirement. Large text (18px+ or 14px+ bold) only needs 3:1.
This two-tier system exists because larger text has thicker strokes that are inherently easier to read, even at lower contrast. A heading at 24px with a 3.5:1 ratio may be perfectly legible, while body copy at 16px with the same ratio would strain readers' eyes. Always design for your primary content size first — that's where users spend the most time.
The most common failure pattern we see: brands using their secondary brand color (often a lighter shade) for body text on white. At 16px, this almost always fails AA. The fix is usually to darken the text color while keeping the brand color for decorative elements, links, or headings where the 3:1 threshold applies.
Contrast Ratio
Heading Preview
Body text rendered in your selected colors. This is how your content will look — check if it's comfortable to read at normal paragraph sizes.
12px caption · secondary information
URL Scanner
Scan any site for WCAG issues
Pick a seed color and get WCAG-compliant harmonies.
This feature is not yet available. We're actively building it — if you'd like early access or have ideas to share, reach out and we'll prioritize your needs.
Contact Us