WCAG 1.4.3 — Contrast (Minimum), explained with examples

Logos and logotypes are explicitly exempt from 1.4.3. However, brand colors used for body text, button labels, navigation links, or any other text that conveys information are fully subject to the 4.5:1 rule. The practical fix is to define a darker on-brand text variant (often the brand's 700 or 800 shade) and use it wherever text appears on a light background.

Only if the rendered font size is at least 18pt (24px) at regular weight, or at least 14pt (approximately 18.66px) at bold weight. Anything smaller is not large text under WCAG and must meet the 4.5:1 ratio. Headings styled at 20px bold do not qualify as large text because they fall below 18.66px bold threshold.

According to the WebAIM Million report, low contrast text affects 83.6% of the top one million homepages — making it the single most prevalent automated WCAG failure year after year. It is also the failure most likely to affect a broad population: anyone with low vision, age-related macular changes, color vision deficiency, or who reads in bright sunlight.

Low contrast is rarely the sole basis for a complaint, but it is consistently cited alongside other barriers in ADA demand letters and settlements. The DOJ's 2024 Title II rule and the EU's EN 301 549 (which underpins the European Accessibility Act) both require WCAG 2.1 AA, which includes 1.4.3. Auditors hired by plaintiffs' attorneys routinely flag contrast as part of the initial evidence.

Run an automated scan with a tool like Certvo, axe DevTools, or Lighthouse. Automated contrast checkers can evaluate every text/background pair they can compute from CSS — catching the majority of failures without manual inspection. The remaining gaps (text over images, text inside SVGs, dynamically coloured text) require manual spot-checks with a contrast analyser like the TPGi Colour Contrast Analyser.

No. The contrast ratio is computed against the actual rendered colour the user sees, which means opacity and alpha values are factored in against the background. rgba(0,0,0,0.3) on white is far below 4.5:1. Your design system should specify solid hex values that already pass, not rely on opacity to produce a passing render in one specific context.