WCAG 1.4.3 Contrast (Minimum): How to Meet Colour Contrast Requirements

WCAG 1.4.3 sets the minimum colour contrast for text and images of text so people with low vision can read content. This guide explains the ratios, testing steps, common mistakes, and exact fixes developers and designers can apply.

What WCAG 1.4.3 requires

WCAG 1.4.3 (Contrast Minimum) requires a contrast ratio of at least 4.5:1 for normal text. For large text the minimum is 3:1. The rule applies to text and images of text. Logos and incidental text are exempt.

What counts as large text

Large text means 18 point or 14 point bold. In common web terms this roughly equals 24px for 18 point and about 18.7px for 14 point bold. When text meets those size or weight thresholds it can use the 3:1 requirement.

Contrast ratios and how they work

A contrast ratio compares relative luminance of foreground and background. The ratio ranges from 1:1 for identical colours to 21:1 for pure black on pure white. You do not need to calculate ratios by hand for most projects, but you should understand that semi-transparent layers and CSS opacity affect the final ratio.

Practical step-by-step: test a page for WCAG 1.4.3

1. Pick a page state to test. Include hover and focus styles, and any modal or overlay states.
2. Measure colour pairs for body text, headings, captions, labels, and buttons that use text. Also check images of text.
3. Use an automated contrast tool. Record the measured ratio for each item and mark failures.
4. For failing text, try increasing font size or weight to reach the large text threshold. If that is not possible, change foreground or background colour to reach 4.5:1 (or 3:1 for large text).
5. Re-test after changes and re-check interactive states.

Tools to use

• Browser developer tools with colour picker
• Accessibility plugins that report contrast ratios
• Automated scanners such as Lighthouse or axe for a first pass

Common pitfalls that cause failures

• Semi-transparent text or background layers. Alpha blending can drop contrast below the required ratio.
• Text over photographs. Colour and brightness change across the image so a single contrast pair often fails.
• Relying on bold or weight changes that do not meet the large text threshold.
• Only testing the default state. Hover, focus, active and disabled states can introduce failures.
• Assuming icons or UI borders are covered by 1.4.3. Non-text contrast for components is a separate criterion in WCAG 2.1.

How to fix contrast failures

Pick the least disruptive change that meets the ratio and fits the design system.

• Adjust the foreground colour to increase luminance difference.
• Adjust the background colour. A slightly darker or lighter background often helps.
• Increase text size to meet the large text threshold if appropriate.
• Add an opaque or semi-opaque overlay behind text on images to stabilise contrast. Use a solid or high-opacity overlay so the final pair meets the ratio.
• For UI components consider stronger borders or fill colours rather than tiny colour shifts.

What not to rely on

Do not rely on text-shadow or subtle outlines as the only means to meet contrast. Those effects can help legibility, but automated tests still measure colour pairs and may report failure.

Exceptions and allowed cases

WCAG 1.4.3 does not require contrast for logos. Incidental text that is purely decorative and not meant to be read by users can be exempt. When possible use native text rather than images of text so content can scale and adapt.

Developer checklist before release

• Run automated contrast scans across the site. Fix high-priority failures.
• Spot-check representative pages manually, including modals, menus and overlays.
• Document colour tokens in the design system with each pair’s contrast ratio.
• Include contrast checks in CI or pre-release accessibility tests.

Quick reference: required ratios

Content type	Minimum contrast ratio
Normal text	4.5:1
Large text (18pt or 14pt bold)	3:1
Logos and incidental text	Exempt

Further steps

Pair manual inspection with automated tools and include contrast as a discrete item in your design handoff. Track colour token changes and re-run tests when themes change.

If you want a short remediation plan, start by listing failing elements, then apply the fixes in this guide, re-test, and deploy changes in a small release so you can monitor user impact.