Reviewed September 30, 2026

Color contrast under WCAG 2.1 Level AA

Normal text needs a contrast ratio of at least 4.5:1 against its background. Large text needs at least 3:1. Buttons, form borders, and icons that carry meaning need 3:1 against adjacent colors. Those are WCAG 1.4.3 and 1.4.11, both Level AA, and they are part of the standard the DOJ Title II rule names.

Which ratio applies to which text?

• 1.4.3 Contrast (Minimum), Level AA: 4.5:1 for text, 3:1 for large text.
• Large text is 18 point (about 24px) or 14 point bold (about 18.5px).
• 1.4.11 Non-text Contrast, Level AA: 3:1 for interface parts and graphics required to understand the content. The full answer is on the non-text contrast page.
• 1.4.6 Contrast (Enhanced) is Level AAA, at 7:1. The Title II rule does not require AAA.
• 1.4.1 Use of Color, Level A: color cannot be the only way to convey information, such as a red asterisk with no other required cue. The full answer is on the use of color page.

The W3C explanation is Understanding Contrast (Minimum). Inactive controls, pure decoration, and logotypes are exceptions in the criterion text. Placeholder text that a user needs to read is not an exception.

Where do sites usually fail contrast?

• Gray placeholder text inside a field. If that text is the only label, it also fails the label requirement.
• White text on a pale brand color, or a pale link color on a white background.
• A button whose only edge is a light gray border, below 3:1, with no other visible boundary.
• Error text in a light red that fails 4.5:1. The message also has to name the field.
• Link text that is distinguished from surrounding text by color alone, with a contrast difference under 3:1 and no underline.
• Text over a photograph. Measure the worst patch of the photo behind the words, not the average.

How do you measure contrast?

Use a contrast checker on the actual computed colors, including opacity. A gray at 60% opacity on a white card is lighter than the same gray on a transparent background in a design tool. Check hover and focus states separately. Focus rings need 3:1 against the colors they sit on, under 1.4.11 and the focus-visible criteria.

Automated tools catch many text-on-flat-background failures. They miss text on images, text that appears only in a state, and components whose boundary is a shadow rather than a solid edge. Include those in a manual pass of the templates people use: navigation, forms, and checkout.

Does a dark mode palette need the same ratios?

Yes. Each pair of foreground and background that a user can see has to meet the ratio. A light-mode palette that passes does not certify the dark theme. Check both, including disabled states you still expect people to read. Disabled text is exempt only when it is inactive and not needed to understand the page.