• Success Criterion 1.4.11
  • Conformance level AA

Chart Lines or Pie Slices With Contrast Too Low to See

1.4.11 — Non-text Contrast

Scenario

Setting

A job board's application form

What’s wrong

Graph lines, pie slices boundaries, and required chart elements <3:1 against adjacent colors.

Example 

.completeness-chart .segment-done { fill: #a8d5a8; }
.completeness-chart .segment-todo { fill: #dceedc; } /* boundary between them is barely visible */

Why it matters

An applicant checking how much of their profile is complete can't see where the finished portion of the pie chart ends.

How to test

Measure chart lines, pie-slice boundaries, and other required chart elements against adjacent colors: each needs 3:1 where the boundary itself conveys information.

How to fix

Required chart boundaries need at least 3:1 contrast between adjacent segments, not just an aesthetic color pairing.

.completeness-chart .segment-done { fill: #2e7d32; }
.completeness-chart .segment-todo { fill: #e0e0e0; }

Outcome

An applicant sees exactly how much of the application is left to finish at a glance.

Who is affected

Low-vision applicants can't judge their application progress from a chart whose segment boundary nearly disappears.

Learn more

Related scenarios