WCAG stands for Web Content Accessibility Guidelines, published by the W3C. Contrast requirements exist because users with low vision, colour blindness, or ageing eyes have difficulty reading text that does not stand out sufficiently from its background. WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 and 4.5:1 respectively. These thresholds are derived from research on the contrast sensitivity function of the human visual system and represent the minimum contrast at which text remains legible for most users with moderate visual impairments.

The contrast ratio uses relative luminance, which measures the perceptual brightness of a colour on a scale from 0 (absolute black) to 1 (absolute white). Each sRGB colour component (R, G, B in 0 to 255 range) is first normalised to 0 to 1, then gamma expanded to linear light using the formula: if c ≤ 0.04045, linear = c/12.92; else linear = ((c+0.055)/1.055)^2.4. Relative luminance is then L = 0.2126R + 0.7152G + 0.0722B, with the green channel weighted most heavily because human eyes are most sensitive to green light. Contrast ratio = (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter colour.

WCAG defines large text as at least 18 pt (24 px) for normal weight, or at least 14 pt (approximately 18.66 px) for bold text. This larger threshold applies because bigger text is inherently easier to read at lower contrast due to the increased character width. The 3:1 ratio for large text (AA) and 4.5:1 (AAA) are correspondingly relaxed compared to normal text requirements. In practice, check which threshold applies based on the rendered font size and weight at the breakpoint where the text appears.

Colour blindness (colour vision deficiency) affects approximately 8% of men and 0.5% of women. The most common type is red green colour blindness (deuteranopia or protanopia), in which the red and green channels are difficult to distinguish. WCAG contrast ratios are calculated from luminance (perceived brightness), not hue, which means a passing contrast ratio generally works for colour blind users, it is pure colour differentiation (red green, for example) that they cannot rely on. Using contrast ratio as your primary accessibility metric is therefore the right approach; never rely on colour alone to convey information.

The 4.5:1 ratio applies to text and images of text. Incidental text (text that is part of a logo, purely decorative, or in an inactive UI component) is exempt. Placeholder text in input fields, however, should pass contrast requirements since it provides labelling information. Text in images (like screenshots or charts where text is not separately rendered) must also meet contrast requirements if it conveys meaning. UI components like button borders, focus indicators, and icons have a separate 3:1 requirement under WCAG 2.1 Success Criterion 1.4.11 (Non text Contrast).

Darken the text colour or lighten the background (or vice versa) until the ratio passes. The simplest approach for text on a white background is to darken the text colour, every step toward black increases contrast. For coloured backgrounds, desaturate the background or increase its lightness in HSL space. This calculator provides automatic suggestions: the Suggestions panel proposes adjusted versions of your foreground or background that achieve AA compliance while staying as close to your original colour as possible. Run the check again after any adjustment to confirm the new ratio.

WCAG 2.1 does not specify a minimum font size directly, the contrast thresholds at 4.5:1 and 3:1 implicitly address size through the large text definition. However, WCAG 1.4.4 (Resize Text) requires that text can be resized up to 200% without loss of content or functionality, which effectively prevents fixed pixel sizes that refuse to scale. Some national standards and government accessibility frameworks do add explicit minimum sizes (often 12 to 14px body text). For body copy, 16px at 1.5 line height is a broadly accepted best practice for readability independent of contrast.

Placeholder text in form fields is specifically excluded from WCAG contrast requirements in some interpretations but should still aim for at least 3:1 to be usable. Disabled UI elements (greyed out buttons or inputs) are explicitly exempt from contrast requirements in WCAG 2.1, the rationale is that they are not operable and convey their unavailability through their muted appearance. However, consider providing alternative visual cues or tooltips explaining why an element is disabled, since users with low vision may not perceive the disabled state from colour alone.