Ensure Non-Text Contrast of 3:1 | BeforeMerge Rules | BeforeMerge

Pricing Blog Contributors Install Guide

Explore
Accessibility
Ensure Non-Text Contrast of 3:1

MEDIUMQualitysmallAccessibility

Ensure Non-Text Contrast of 3:1

Share

UI components (inputs, buttons, focus states) and meaningful graphics must have at least 3:1 contrast against adjacent colors. (WCAG 2.1 SC 1.4.11)

Why This Matters

Low-vision users can't perceive control boundaries, states, or essential icons.

Related Rules

Use Semantic HTML Elements

Quality

Add Alt Text to Images

Quality

Ensure Keyboard Navigation

Quality

Maintain Color Contrast Ratio

Quality

Catch this automatically on every PR

BeforeMerge scans your pull requests against this rule and dozens more. Get actionable feedback before code ships.

Join Waitlist Browse All Rules

AI-native code review knowledge base. Structured rules that catch what linters miss.

Product

Features
Explore
Pricing
Docs
GitHub

Company

About
Blog
Contributors
Contributing

Legal

Privacy Policy
Terms of Service
MIT License

© 2026 BeforeMerge. Built by

Features Explore

Rules Skills Knowledge Prompts

Pricing Blog Contributors Install Guide

Why this matters

Text contrast isn't enough: users must also see where a button or input is and what state it's in. Boundaries, focus rings, and icon graphics that carry meaning need 3:1 contrast.

Good: a 3:1+ input border and a clearly visible focus ring. Bad: a 1px light-gray border on white, or a focus state that only changes a barely-visible shadow.