Color & design

Apply WCAG AA Color Contrast to Text and Controls

Choose the correct AA threshold for normal text, large text, and essential controls, then document the component context behind each contrast result.

By Uddhav Gopani, FounderPublished 27 September 2026Updated 29 September 2026

Treat AA as a set of requirements

“AA color contrast” usually refers to the contrast requirements associated with WCAG Level AA. It is not a single pass label that makes an entire interface accessible. Text and non-text information have different criteria, and the appropriate comparison depends on what the visual element communicates. Start by naming the component: body text, a heading, an input boundary, a selected-state indicator or a meaningful graphic.

The Color Contrast Checker compares two opaque six-digit hex colors and reports normal-text and large-text AA/AAA results. It does not inspect font size, identify interface boundaries or determine whether an exception applies. Use its ratio as evidence within a component review rather than a page-wide certification.

Apply the ordinary and large-text thresholds

WCAG 2.2’s minimum text-contrast criterion requires at least 4.5:1 for ordinary text and 3:1 for qualifying large text. The large-text definition uses 18 points, or 14 points when bold. In CSS pixel terms those sizes are 24px and about 18.67px respectively. A 16px bold button label remains ordinary text for this threshold; boldness alone does not qualify every size.

Try #888888 on #ffffff. Its ratio is about 3.54:1, so it passes AA for qualifying large text but fails AA for ordinary text. A large heading can therefore use a pair that would be unsuitable for its smaller caption. If responsive styles reduce the heading below the large-text size, reevaluate that version under the ordinary-text threshold.

Choose useful headroom instead of a boundary color

For a second example, #595959 on white produces about 7.00:1 and passes normal-text AA; its unrounded ratio is slightly above seven, so it also passes normal-text AAA. These stronger colors can provide more room for small text and fine strokes than a pair barely above 4.5. The exact benefit still depends on the typeface, size and rendering context.

Keep semantic roles separate when building tokens. A muted text token for explanatory copy still needs to work on the surfaces where it is used. A decorative border token can have different requirements from a boundary needed to identify an input. Naming a token “secondary” or “disabled-looking” does not establish an exemption for active information.

Review meaningful non-text features separately

The non-text contrast criterion generally requires a 3:1 relationship to adjacent colors for visual information necessary to identify applicable controls, states and graphical objects, subject to its exceptions. That is not a rule that every decorative line must contrast by three. Determine which feature actually makes the control or state identifiable, then compare it with the relevant adjacent surface.

For a checkbox, the check mark may communicate the selected state while another shape identifies the control itself. Both can need review against their adjacent colors. For an input with an essential border, compare that border with the background where it must remain visible. A passing text label does not automatically establish that the control boundary or selected state is distinguishable.

Include interaction states and more than color

Check focus, hover, selected, expanded and error states wherever their colors change. A clearly visible default button can lose its boundary on a pale hover surface. A focus outline may sit partly against the button and partly against the page, so inspect the actual shape and adjacent colors rather than checking only a preferred swatch pair.

Do not use hue as the only indication of an error or selection. Add a suitable visible label, icon, pattern or other cue and expose the state programmatically where appropriate. A red border with high contrast can still leave a user guessing what is wrong if no error message explains the problem. Contrast and use-of-color requirements address related but distinct issues.

Document exceptions and unresolved component context

Inactive controls, purely decorative material and logotypes have specific exceptions in the relevant criteria. Apply them to the actual purpose and state of the element, not as a blanket exemption for all branded text or pale content. A brand-colored paragraph is not a logo merely because its color comes from a brand guide.

Record the criterion, color pair, measured ratio, typography or non-text role, component state and any justified exception. Consult the minimum text-contrast guidance and non-text contrast guidance when the component context is ambiguous. Keep keyboard, structure, labels and other accessibility checks alongside this record rather than treating an AA contrast pass as the end of the review.