UI component contrast and the ADA

What needs 3:1

Two kinds of visual information need a contrast ratio of at least 3:1 against the adjacent colors: user interface components, and graphical objects. For a component, that means the parts you need in order to find the control and tell what state it is in, such as the edge of a text field, the box of a checkbox, a selected tab marker or a focus indicator. For graphics, it means the parts needed to understand the content, such as the lines in a chart or a stand-alone icon.

Not everything is covered. Disabled controls, appearance set by the browser and left unchanged, hover effects, purely decorative graphics, and graphics that only repeat information already in nearby text are exempt. Logos and photographs are exempt where the exact appearance is essential. Text inside graphics is judged by the text contrast criterion instead.

Faint controls on public forms

Pale gray field borders, white-on-light-blue icons and focus rings in a barely different shade are common on government and school sites, often because a design system was tuned for a minimalist look. A resident who cannot see where to type, or which page of results is current, has no clear way forward, however good the text contrast is.

The most useful habit is to ask one question per control: if the text were removed, could I still find this and tell whether it is on, off, selected or focused? That question catches search boxes, pagination, toggles and calendar day pickers on a county or school site that look fine in a style guide.

Fields identified only by a faint fill

A field that is just a slightly gray rectangle on a white page has a boundary with a ratio of about 1.12:1. The edge needs a 3:1 border, or another cue that is itself at least 3:1.

.search input {
  background: #f2f2f2;   /* 1.12:1 against the page */
  border: 0;
}

.search input {
  background: #ffffff;
  border: 2px solid #6b6b6b;   /* 5.33:1 against the page */
}

Bars, slices and map symbols

In a chart, the marks that carry the data need 3:1 against the background and, where it matters, against each other. Pale fills on white vanish, and pale neighbors blend together.

.bar { fill: #c6dbef; }   /* 1.42:1 on white */

.bar { fill: #2171b5; }   /* 5.13:1 on white */
/* also label each bar with its value, so color is not the only cue */

Where adjacent areas of similar color cannot be avoided, separate them with a line that does meet 3:1.

Focus indicators on a dark header

A focus ring is a user interface component state, so it needs 3:1 against what is behind it. A mid-blue ring on a navy header can drop below that. A white or light ring on a dark header is a simple fix. The browser's default focus ring is exempt only if you have not changed it.

.site-header a:focus-visible {
  outline: 2px solid #1565c0;   /* 2.68:1 on #0b2545 */
}

.site-header a:focus-visible {
  outline: 3px solid #ffd54f;   /* 10.9:1 on #0b2545 */
  outline-offset: 2px;
}

Controls in native apps

Text field outlines in native apps follow the same rule. Light hairlines that look neat in a mockup are hard to find outdoors.

// SwiftUI
TextField("Parcel number", text: $parcel)
    .overlay(RoundedRectangle(cornerRadius: 8)
        .stroke(Color(white: 0.85)))   // about 1.4:1 on white

// SwiftUI
TextField("Parcel number", text: $parcel)
    .overlay(RoundedRectangle(cornerRadius: 8)
        .stroke(Color(white: 0.45), lineWidth: 1.5))   // about 4.7:1 on white

// Jetpack Compose
OutlinedTextField(
    value = parcel, onValueChange = { parcel = it },
    label = { Text("Parcel number") },
    colors = OutlinedTextFieldDefaults.colors(
        unfocusedBorderColor = Color(0xFFD0D0D0))   // 1.54:1
)

// Jetpack Compose
OutlinedTextField(
    value = parcel, onValueChange = { parcel = it },
    label = { Text("Parcel number") },
    colors = OutlinedTextFieldDefaults.colors(
        unfocusedBorderColor = Color(0xFF757575))   // 4.61:1
)

How to check it

1. List the controls on the page: fields, buttons that rely on a border, checkboxes, radios, tabs, toggles, pagination, icon buttons, and chart marks.
2. For each, ask whether you could find it and read its state if the text were gone.
3. Pick colors with the inspector or an eyedropper and compute the ratio against the adjacent color. For focus, check the ring against the page behind it.
4. Test states: selected, checked, focused and error. The resting state alone is not enough.
5. Do not rely on a scan; most tools cannot see borders and states.

Common mistakes and a ship-it list

• Applying the 3:1 rule to text, or the 4.5:1 rule to icons. Text and non-text have different thresholds.
• Checking the ratio of an icon against its container but not against the page behind it.
• Removing the default focus outline without adding a measurable replacement.
• Using a pale fill as the only selected state.

Ship it when:

• Field boundaries, checkbox boxes and toggles reach 3:1 against their surroundings.
• Selected, checked and focused states are visible at 3:1.
• Icons and chart marks that carry meaning reach 3:1.
• Text inside graphics still meets the text contrast ratios.

The text counterpart is the criterion on minimum contrast. For the wider set of issues, see common barriers.

Sources

• Understanding SC 1.4.11: Non-text Contrast (W3C), opens in a new tab
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), opens in a new tab

Standard version: WCAG 2.1 (W3C Recommendation, 5 June 2018), as named in the Title II web rule. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official ADA statute and regulations, and ask a lawyer how they apply to you.