WCAG Non-Text Contrast Checker

Ensure your UI components, icons, and borders meet the WCAG 2.1 Success Criterion 1.4.11 (3:1 contrast ratio).

4.6:1
PASS
Example of a UI component (border and icon) against background.

What is Non-Text Contrast?

WCAG 2.1 Success Criterion 1.4.11 requires a contrast ratio of at least 3:1 against adjacent colors for:

This differs from the 4.5:1 ratio required for standard body text, as graphical elements are typically larger or have more visual weight than a single character of text.

Invalid hex color

More Free Tools

JSON Formatter & Validator Random Workout Routine Generator - Custom Home Workouts World Cup Match Conflict Checker DORA Compliance Self-Assessment Checklist
Browse all 124 tools →