AuditYourWeb
WCAG contrast tool

WCAG color contrast checker for AA and AAA ratios.

Test foreground and background colors with a WCAG contrast ratio calculator for normal text, large text, UI components, and AAA targets.

Instant foreground/background contrast ratioAA and AAA pass/fail checksSample text and UI preview
Try the tool

WCAG Color Contrast Checker

Built for Designers, front-end developers, agencies, and design-system teams.

Normal text contrast against WCAG AA and AAA thresholds

Large text contrast against WCAG AA and AAA thresholds

UI component and graphical object contrast at the 3:1 threshold

Foreground and background color combinations before design handoff

WCAG Color Contrast Checker

Test foreground and background colors instantly.

Enter hex colors or use the color pickers. The ratio is calculated using the WCAG relative luminance formula and tested against common AA and AAA thresholds.

Sample preview

Accessible text should be easy to read.

Use this preview to compare body copy, headings, buttons, and UI labels before shipping a design system update.

Contrast ratio

17.74:1

AA normal textPass
AA large textPass
AA UI componentsPass
AAA normal textPass
AAA large textPass
What to fix

Turn the scan into practical accessibility work.

Automated testing is a starting point. AuditYourWeb keeps the guidance direct so owners, agencies, and developers can decide what to fix next without pretending automation is legal certification.

Run the free checker
1

Use at least 4.5:1 contrast for normal text.

2

Use at least 3:1 contrast for large text and meaningful UI components.

3

Aim for 7:1 for AAA normal text when the design can support it.

4

Document accessible color pairs in your design system.

Where it fits

From one free scan to a repeatable accessibility workflow.

Use the website scanner when you need to find contrast and readability issues across a live page.

The public checker is free to use. Saved websites, widget setup, deep scans, and code issue tracking live in the dashboard when your team needs a longer workflow.

Related free tools

Keep checking the connected issues.

View all tools

Color Contrast Checker

Check whether website text, buttons, links, and interface states may have contrast problems that affect readability.

Open tool

WCAG Checker

Run a free WCAG-oriented website scan and review machine-detectable accessibility issues with evidence, severity, and practical next steps.

Open tool

Keyboard Navigation Checker

Check for interaction patterns that may create keyboard traps, weak focus visibility, or inaccessible controls.

Open tool
FAQ

Common questions about WCAG color contrast checker.

What contrast ratio passes WCAG AA?

WCAG AA generally requires 4.5:1 for normal text and 3:1 for large text. Meaningful UI components and graphical objects are commonly checked against 3:1.

What contrast ratio passes WCAG AAA?

WCAG AAA generally requires 7:1 for normal text and 4.5:1 for large text.