MicroTools

Non-Text Contrast Checker

Validate 3:1 contrast for borders, icons, focus rings, and UI states.

About Non-Text Contrast Checker

Check WCAG 1.4.11 non-text contrast for UI components. Validate contrast for borders, icons, focus rings, input fields, and button states against their adjacent colors. Minimum 3:1 ratio required.

How to Use

  1. 1Select the type of UI element you are checking (border, icon, focus ring, etc.).
  2. 2Enter the element color and its adjacent background color.
  3. 3See the contrast ratio and WCAG 1.4.11 pass/fail result.
  4. 4For focus rings, also enter the unfocused state color to check both states.
  5. 5Use "Suggest fix" if the ratio is below 3:1.

Frequently Asked Questions

What is non-text contrast (WCAG 1.4.11)?
WCAG 1.4.11 requires that UI components (buttons, inputs, checkboxes) and graphical objects (icons, charts) have at least 3:1 contrast against adjacent colors.
What counts as a UI component?
Anything that conveys information or state: input borders, checkbox outlines, radio buttons, focus indicators, button boundaries, and icon-only controls.
Does this apply to disabled elements?
No — WCAG explicitly exempts inactive UI components (e.g. disabled buttons) from non-text contrast requirements.
How is this different from text contrast?
Text contrast (1.4.3) requires 4.5:1 or 3:1 (large text). Non-text contrast (1.4.11) always requires 3:1 regardless of size.

Tool Info

Category
compliance
Usage
Unlimited

Related Tools

WCAG Contrast Checker

Check AA/AAA contrast ratio for any two colors. Get fix suggestions instantly.

Accessible Color Palette Generator

Generate a full AA-compliant color palette from your brand color.

Form Accessibility Validator

Validate labels, aria attributes, required fields, and error messages in HTML forms.

More compliance tools

WCAG Contrast Checker

Check AA/AAA contrast ratio for any two colors. Get fix suggestions instantly.

Heading Structure Auditor

Detect skipped levels, duplicate H1s, and broken heading hierarchy in HTML/Markdown.

Link Text Quality Checker

Find "click here", duplicate links, and empty anchors that fail WCAG 2.4.4.

Alt-Text Linter

Find missing, redundant, or low-quality alt text in your HTML instantly.