WCAG AA Contrast Requirements

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 — except for large text (3:1), incidental text inside an image, decorative text, and text that is part of an inactive UI component or pure logotype.

Large text is defined as 18 point (24 px in CSS) and larger, or 14 point (18.66 px) and larger when bold. The threshold is anchored to the rendered size after CSS applies — Tailwind’s text-lg (18 px) is not large text under WCAG.

Added in WCAG 2.1, this criterion requires 3:1 contrast between adjacent colors for any UI component (button borders, focus indicators, form-field outlines, toggle states) and graphical objects required to understand content (chart bars, icons that convey meaning).

A common failure: a form input with a 1-pixel border whose color does not differ enough from the surrounding background. If the border is the only thing communicating "this is an input," it must hit 3:1.

Start with the design system: tokenize semantic colors (color-text-primary, color-text-secondary, color-border-default) and check each token combination against its intended surface. The contrast checker above accepts any two colors and instantly reports AA conformance.

For brand colors that fail AA on white, pair them with a darkened background variant rather than darkening the brand. Most accessible design systems expose two brand surfaces — a brand-on-white surface (failing) and a brand-on-dark surface (passing).