• Success Criterion 1.4.11
  • Conformance level AA

Error Icon or Asterisk With Contrast Too Low to See

1.4.11 — Non-text Contrast

Scenario

Setting

A language-learning app's lesson screen

What’s wrong

Error icons/asterisks that carry state <3:1.

Example 

.required-marker { color: #ffb3b3; } /* red asterisk on a white quiz answer field */

Why it matters

A learner filling in a fill-in-the-blank answer can't see the asterisk marking it as required before submitting an incomplete quiz.

How to test

Measure error icons or asterisks that carry required-field/error state against their background: 3:1 minimum.

How to fix

Darken status-carrying glyphs like required-field asterisks so they clear 3:1 against their background.

.required-marker { color: #c62828; }

Outcome

A learner notices the required asterisk before submitting and fills in the missing answer first.

Who is affected

Low-vision learners miss required-field markers that carry meaning through color and shape alone at this contrast.

Learn more

Related scenarios