ColorCheckerColorContrast

Icon Contrast Checker

Verify your SVG icons, UI graphics, and non-text elements meet WCAG SC 1.4.11 contrast requirements. Icons need at least 3:1 contrast — test yours instantly with our free browser-based checker.

How to Check Icon Contrast

1. Set the foreground to your icon/SVG color — typically a medium gray like #64748B or your brand's secondary color for UI elements.

2. Set the background to the surface the icon sits on — a card, button, navigation bar, or page background. Icons rarely sit directly on the page background, so check against the actual container color.

3. Under SC 1.4.11, non-text UI elements need 3:1 minimum. Decorative icons that don't convey meaning are exempt, but any icon that helps users navigate or understand content (menu icons, status indicators, warning symbols) must pass.

Non-Text Contrast: SC 1.4.11 Explained

WCAG Success Criterion 1.4.11 requires a 3:1 contrast ratio for visual information needed to identify UI components and states. This applies to: icons (SVG, icon fonts, image icons), form input borders, focus indicators, selection indicators, and graphical objects that convey information.

The key distinction: informational icons must pass, decorative ones are exempt. A search magnifying glass, a hamburger menu icon, or a warning triangle all convey meaning and need 3:1. A decorative flourish next to a heading does not. When in doubt, make it pass — it's simpler than arguing the distinction in an audit.

Contrast Ratio

4.5:1
AA Normal
AA Large
AAA Normal
AAA Large
Non-Text (3:1)

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 is non-text contrast (WCAG SC 1.4.11)?
WCAG Success Criterion 1.4.11 requires that visual information needed to identify UI components and graphical objects has a contrast ratio of at least 3:1 against adjacent colors. This applies to icons, buttons, form borders, focus indicators, and any graphic that conveys meaning.
Why do icons need a separate contrast check?
Icons often use muted colors that designers assume are 'visible enough,' but users with low vision may not perceive them. A gray icon (#9CA3AF) on a white background has only ~2.5:1 contrast — below the 3:1 threshold. Our checker helps you catch these before they become usability problems.
Do decorative icons need to meet contrast requirements?
No — purely decorative icons that don't convey information or functionality are exempt from SC 1.4.11. However, any icon that helps users understand the interface (navigation icons, status indicators, action buttons) must meet the 3:1 minimum.
What icon colors typically pass 3:1 on common backgrounds?
On white (#FFFFFF): grays darker than #959595 pass at exactly 3:1. Safe icon colors are #757575 (~4.6:1), #64748B (~4.4:1), or #475569 (~7.3:1). On dark card backgrounds (#1E293B), light grays like #94A3B8 (~4.6:1) pass comfortably. Medium grays like #9CA3AF on white fail at ~2.8:1 — this is the most common failure we see in production interfaces.
Do icon fonts have different contrast rules than SVG icons?
No — the 3:1 non-text contrast requirement applies equally to icon fonts, SVG icons, image-based icons, and any other graphical element that conveys meaning. However, icon fonts are rendered as text by the browser, which can make them appear thinner at small sizes. Test them at the actual rendered size — a 16px icon font may need a slightly darker color than a 24px SVG to achieve the same perceived contrast.

Related Tools

Button Contrast CheckerForm Input CheckerLink Color CheckerText Contrast Checker