Non-text contrast: the WCAG rule for icons (1.4.11)

Text contrast has its own rule, 1.4.3. Everything else people need to see in order to use a page, such as meaningful icons, input borders, toggle positions, chart lines and focus rings, falls under 1.4.11 Non-text Contrast, added in WCAG 2.1 at Level AA. Its threshold is lower than for text, 3:1 against adjacent colors, but it applies to dozens of small details that design reviews tend to skip.

The margins are small. A copy icon in #5A5A5A on a #121212 card measures 2.72:1 and fails. In #6B6B6B it measures 3.52:1 and passes. This guide explains what the rule covers, what it deliberately leaves out, and how to apply it to icon buttons, focus indicators and charts. If you need the formula behind those numbers, see color contrast ratio explained.

What 1.4.11 covers

The criterion has two parts.

User interface components. The visual information needed to identify a control, and to tell which state it is in, must have at least 3:1 against adjacent colors. For a text field with no fill of its own, the border is what tells you where to type. For a checkbox it's the box and the check mark. For a switch it's the track and the knob position. Focus counts as a state, so focus indicators are covered too.

Graphical objects. Parts of a graphic that are required to understand the content need 3:1 against adjacent colors. A trend arrow that shows direction, the line of a price chart, the filled part of a progress bar and a status icon all qualify.

"Adjacent" means the colors that actually touch the element. For an icon on a card, that's the card. For a ring drawn around a button, it's whatever sits on either side of the ring.

What it leaves out

Several things are explicitly or effectively outside the rule:

• Logos and brand marks. A token logo, a chain mark or an exchange logo is not required to meet 3:1, and neither are decorative graphics.
• Icons next to visible text. When a button says "Send" and has an arrow icon, the word identifies the control and the icon is decoration. The text then falls under 1.4.3.
• Inactive components. A disabled "Confirm" button is exempt.
• Controls left in the browser's default style. An unstyled native checkbox is the browser's responsibility. Once you restyle it, it's yours.
• Button backgrounds, when something else identifies the button. A borderless "Copy" button is fine if its text meets 1.4.3.

Exempt doesn't mean fine. A dark navy logo on a #121212 background can be close to invisible and still meet WCAG, and people will struggle to recognize it. That's a design problem rather than a conformance one, and the usual fix is to place dark logos on a light tile. Web3 Icons does exactly that for logos that disappear on its dark interface; when a dark logo needs a light tile explains how to decide.

Icon buttons

When an icon is the only visible thing that identifies a control (copy, view on explorer, settings, close, the swap-direction arrow between two amount fields), the icon itself must reach 3:1 against what's directly behind it. If the button has no fill, that's the card or page color.

Here is how common grays measure on a #121212 card:

Contrast checkers measure the color you specified, but thin strokes don't render at full strength. A 1.5px line icon at 16px is partly anti-aliased, so it looks fainter than its hex value suggests. For outline icons, leave some margin above 3:1 and look at them at actual size on a real screen.

Keep the same rule for states. Picture a segmented control for chart periods ("1D", "1W", "1M") where the selected option has a #1C1C1C fill on a #121212 background. That's 1.10:1. If the fill is the only thing showing which period is selected, it needs 3:1 against the neighboring colors. Add a clearly lighter fill, a border or an underline, and consider a bolder label as well, since a selection shown only by a color change also runs into 1.4.1 Use of Color.

Input borders follow the same logic. A #2A2A2A border on a #121212 card is 1.31:1. If that border is the only thing showing where the amount field starts and ends, raise it to at least #636363, or give the field a fill that itself contrasts 3:1 with the card.

Focus indicators

Because focus is a state, the focus indicator needs 3:1 against the colors next to it. On a dark interface a #A3A3A3 ring on #121212 measures 7.43:1, which is plenty.

Trouble starts where a ring hugs a colored control. The same #A3A3A3 ring drawn directly against a blue #2563EB button is only 2.05:1 against the button. The simplest fix is an offset, so a band of page background separates the ring from the control and the ring's adjacent color is the background on both sides:

:focus-visible {
  outline: 2px solid #a3a3a3;
  outline-offset: 2px;
}

For rings that must work on both light and dark surfaces, a two-color ring is the usual approach; designing visible focus styles shows one.

Charts and other graphics

Crypto dashboards are full of graphical objects that carry meaning:

• Price lines and area charts. The line needs 3:1 against the chart background. Light gridlines usually support reading rather than carry the data themselves.
• Candlesticks. Each body and wick needs to be visible against the background. Telling rising candles from falling ones by color alone is a separate problem, covered by 1.4.1.
• Portfolio donuts. Adjacent segments in blue #3B82F6 and green #22C55E are only 1.61:1 against each other. A 2px gap in the background color between segments solves it, as long as each segment has 3:1 against that background (the blue is 5.09:1 on #121212).
• Risk and health gauges. The marker and the filled portion must stand out from the track.

Accessible price charts goes further into labels, patterns and text alternatives.

A quick review routine

1. List every icon that appears without a visible text label and measure it against each surface it sits on: cards, modals, hovered rows.
2. Check every stateful control in each state: selected, checked, expanded, focused, error.
3. Measure focus rings on the most colorful buttons, not just on the page background.
4. Look at charts with the data labels hidden and ask whether the shapes alone are still visible.
5. Leave logos alone for conformance purposes, then fix the ones people can't see anyway.