ColorCheckerColorContrast

Heading Contrast Checker

Verify your heading and title colors pass WCAG contrast standards. Large text only needs a 3:1 ratio — use our checker to confirm your h1 through h6 headings are accessible and readable.

How to Check Heading Colors

1. Pick your heading color — typically a darker shade of your brand color, like slate-800 (#1E293B) or your primary brand color.

2. Enter the section background behind your headings — often white or a light accent. Headings at 24px+ only need 3:1 for AA (the "large text" threshold), so lighter brand colors that fail for body text may still pass for headings.

3. Use the text preview to check at actual heading sizes. Remember: a color that passes for your H1 (32px) might fail for your H4 (16px). Check each heading level separately or ensure all levels use colors dark enough for body text.

Heading Contrast Rules by Size

Headings benefit from WCAG's large text exemption: at 18px+ (or 14px+ bold), the AA requirement drops from 4.5:1 to 3:1. This gives you more design freedom for hero sections, banners, and feature headings where you want to use brand colors that might be too light for body copy.

However, be strategic: your H1 and H2 (typically 24-48px) easily qualify as large text, but H4-H6 at 14-16px in regular weight do not. A common mistake is applying the same heading color to all levels — check each one individually. As a rule of thumb, if your heading is smaller than 18px AND not bold, it must meet the full 4.5:1 body text requirement.

Contrast Ratio

14:1
AA Normal
AA Large
AAA Normal
AAA Large

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

Palette Explorer

Pick a seed color and get WCAG-compliant harmonies.

AI Color Recommendations

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

Frequently Asked Questions

What contrast ratio do headings need?
Headings that are 18px (24px) or larger, or 14px (18.67px) or larger if bold, qualify as 'large text' under WCAG and only need a 3:1 contrast ratio for AA. For AAA, large text needs 4.5:1. Smaller headings (like h5/h6 at 14px or below) must meet the normal text requirement of 4.5:1.
Do all heading levels need the same contrast ratio?
It depends on the font size, not the heading level. An h1 at 32px only needs 3:1 for AA, while an h6 at 13px needs 4.5:1. The key factor is whether the rendered font size crosses the 'large text' threshold (18pt/24px, or 14pt/18.67px bold).
Can I use lighter colors for my hero titles?
Yes — hero titles are usually 32px+ and bold, so they qualify as large text and only need 3:1 for AA. However, make sure your body text below the hero uses a color that meets the stricter 4.5:1 requirement if it carries substantive information.
Should I use the same color for all heading levels?
Using the same color for H1-H6 is common and simpler to maintain, but check that your smallest heading passes for its actual rendered size. If you use a lighter brand color that passes for your 32px H1 (3:1 AA), it might fail for your 16px H5 (which needs 4.5:1). Many design systems use a single dark heading color across all levels to avoid this issue entirely.
Do I need to check heading contrast against gradient backgrounds?
Yes — if your headings sit on gradient or image backgrounds, test against the lightest and darkest points of the gradient separately. Our Gradient Contrast Checker handles this by sampling contrast at multiple points along the gradient. For the safest approach, ensure your heading color passes against both extremes.

Related Tools

Text Contrast CheckerWCAG AA CheckerButton Contrast CheckerIcon Contrast Checker