Skip to content

WCAG Color Contrast Checker

Not sure whether your color choices are accessible? A11yInspect helps you scan, validate, and test color contrast against the Web Content Accessibility Guidelines (WCAG) and other global accessibility standards in just a few clicks.

Download and install for Chrome
Download and install for Edge
Download and install for Firefox

No Login, No Credit Card required.

Meet Color Contrast Conformance

One Tool to Test Color Contrast Across WCAG 2.2, 2.1 & 2.0, Section 508, EN 301 549, Americans with Disabilities Act or ADA Title II, GIGW 3.0, and IS 17802 for accessible digital experiences.

Real time monitoring. Automatically scan foreground and background colors, calculate WCAG contrast ratios for accessibility and instantly see what passes or fails for standard text, large text & non text elements.

First, select “Color” as the element type and choose the required accessibility guideline. Click “Test Page” to scan the webpage for color contrast issues. The tool automatically checks the colors and displays the results under “Fail” and “Validate.”

Validate foreground and background colors using the built-in color picker or manually enter color codes in HEX, HEXa, RGB, or RGBa formats for accurate testing.

First, select a foreground (FG) color using the color picker or enter its color code. Next, select a background (BG) color. The tool displays the selected color combination, calculates the contrast ratio, and shows whether it passes or fails WCAG AA and AAA requirements.

View every background color, text color, font size, and font family used across your webpage to identify potential color accessibility issues and support more accessible design decisions.

First, open the CSS Overview section. The tool scans the webpage and displays the foreground and background colors found on the page. It also shows the associated font sizes and font families, helping users review the colors and text styles being used.

Get accurate color combinations that should be avoided on a webpage to meet WCAG contrast requirements and support color compliance.

First, the tool scans the webpage for color combinations. It identifies combinations that fail WCAG requirements and displays the foreground color, background color, contrast ratio, and WCAG pass or fail status for each combination.

Automated color contrast checker

BarrierBreak - a Representative Vendor on the 2025 Gartner® Market Guide for Digital Accessibility

WCAG Color Contrast Requirements for Text and UI Elements

1 Month Free with a yearly subscription!

Monthly Yearly
Element Minimum Contrast Ratio Requirement
Standard Text 4.5:1 Text smaller than 18 pt or 14 pt bold must have a contrast ratio of at least 4.5:1.
Large Text 3:1 Text that is 18 pt or larger or 14 pt bold, must have a contrast ratio of at least 3:1.
Non-text Elements 3:1 Icons, buttons, graphics and other UI elements must have a contrast ratio of at least 3:1 against the background.

Bring accessibility into every design decision

Try the Pro Plan, with a 30-day free trial*. No Credit Card Required.
* If you do not subscribe to A11yInspect Pro, you will be downgraded to A11yInspect Free after the trial ends.

Frequently Asked Questions

  • Web Content Accessibility Guidelines (WCAG) requires a minimum contrast ratio for accessibility of 4.5:1 for standard text and 3:1 for large text and non-text UI elements to ensure readability.

Back To Top