What Is Colour Contrast, and Why Is It an Accessibility Requirement?
Colour contrast refers to the perceptible difference — the luminance difference — between the colour of text and its background. For users with low vision, colour blindness, or cataracts, insufficient contrast can make text impossible to read, even when it is fully visible to other users.
Success Criterion 1.4.3 of WCAG 2.1 — Contrast (Minimum) at Level AA — therefore sets precise thresholds for the required contrast ratio. The requirement is based on a mathematical calculation of relative luminance and is objectively testable: a colour pair either meets the requirement or it does not.
Contrast ratios are expressed as a ratio — for example, 4.5:1 — calculated from the relationship between the lightest and darkest colour in a pair. Black text on a white background gives the maximum possible ratio of 21:1. Light grey text on white can fall well below the threshold, even when the visual result seems acceptable to many.
The Requirements in WCAG 1.4.3
WCAG 1.4.3 operates with two thresholds depending on text size:
Normal text (below 18pt / 24px in regular weight, or below 14pt / approximately 18.5px in bold): The contrast ratio must be at least 4.5:1 against the background.
Large text (at least 18pt / 24px in regular weight, or at least 14pt / approximately 18.5px in bold): The contrast ratio must be at least 3:1. The lower threshold reflects the fact that larger letterforms are easier to distinguish even at reduced contrast.
The exceptions are important to understand. The requirement does not apply to:
- Decorative text — text that is purely ornamental and conveys no information
- Logos and brand marks — text within logotypes is explicitly exempt
- Inactive user interface components — a greyed-out, disabled button is exempt, as users cannot interact with it
These exceptions are narrow. Body text, headings, navigation text, and form labels are always covered — regardless of design intent.
The Related Requirement: WCAG 1.4.11 Non-Text Contrast
WCAG 2.1 added Success Criterion 1.4.11 — Non-Text Contrast at Level AA — extending the contrast requirement to visual components beyond text. The requirement applies to:
- User interface components: Focus indicators, checkboxes, radio buttons, input fields, and buttons must have a contrast ratio of at least 3:1 against adjacent colours.
- Graphical objects: Icons and information-bearing diagrams must also achieve at least 3:1 contrast where they convey information necessary for understanding the content.
A grey checkbox on a white background, a weak focus indicator, or a low-contrast icon can therefore constitute a failure of 1.4.11, even if all text on the page satisfies 1.4.3.
Common Failures in Practice
Contrast failures are extremely widespread. WebAIM’s annual analysis of one million websites consistently finds that low contrast is the most common WCAG failure. The most typical patterns include:
Light grey body text on white backgrounds: Many design systems use #767676 or lighter grey tones to achieve an “airy” visual tone. #767676 on white yields exactly 4.54:1 — a razor-thin margin. Many designs use a slightly off-white background and fall below the threshold as a result.
White text on mid-tone colours: Buttons and call-to-action elements in medium blue (#4A90D9) or medium green do not always meet the contrast requirement for white text, even when the colour appears vivid.
Placeholder text in forms: HTML placeholder text is typically rendered at approximately 40% opacity in browsers. It almost never meets the 4.5:1 requirement — and is at minimum difficult to read for users with low vision.
Text over images and gradients: Text placed directly over a background photograph has a dynamic background that varies in luminance. Contrast may well satisfy the requirement in one corner of the image while dropping below 2:1 in another.
Links distinguished by colour alone: WCAG 1.4.1 (Use of Colour) additionally requires that links are not identified solely by colour. If a hyperlink is distinguished from surrounding text only by being blue — with no underline or other visual indicator — the requirement is breached, even if the contrast ratio itself is sufficient.
How to Test Contrast
Contrast is one of the few accessibility problems that can be tested almost comprehensively using automated tools. The most widely used are:
WebAIM Contrast Checker (webaim.org/resources/contrastchecker): A straightforward web-based calculator. Enter foreground and background colours in hex, RGB, or HSL and immediately receive a pass/fail result for both 1.4.3 and 1.4.11. Indispensable for validating design decisions before publication.
axe DevTools: The browser extension for Chrome and Firefox scans entire pages automatically and reports contrast failures with precise details: the specific element, the actual ratio, and the required ratio. axe is among the most accurate automated scanners and is used by many public authorities as part of their ongoing testing procedures.
WAVE (wave.webaim.org): WAVE marks contrast failures directly on the page with visual indicators and provides both an error message and a contrast calculation. Well suited to a rapid overview, particularly for non-technical users.
Browser DevTools: In Chrome and Firefox, the DevTools Accessibility panel allows you to inspect the contrast ratio of individual elements. Chrome additionally displays a real-time contrast calculation when editing colours in the CSS inspector.
Automated tools can identify most text contrast failures — but text over images and gradients requires manual assessment, since the actual background luminance varies across the element.
How to Fix Contrast Problems
Once a contrast failure has been identified, the solution is usually straightforward: darken the text colour, lighten the background, or do both. Both WebAIM Contrast Checker and axe DevTools suggest the nearest colour that would satisfy the requirement.
A few principles are worth keeping in mind:
- Dark text on a light background is generally easier to adjust than light text on a dark background, because there is more “room” in the darker direction.
- Colour choices should always be verified within the actual design system — a colour that appears correct in a contrast calculator may cause problems when rendered with partial transparency or colour blending.
- Placeholder text in forms should be replaced with visible, persistent labels — this resolves the contrast problem while also improving general usability.
Colour Contrast in PDF Documents
PDF documents are not exempt from contrast requirements when they represent citizens’ only access to information. A PDF/UA-compatible document should satisfy the same contrast principles as HTML content — but the PDF format provides no automated contrast validation equivalent to axe or WAVE.
Converting a PDF to HTML brings the converted content into a context where contrast can be tested systematically using standard browser-based tools. PDFAccess generates semantic HTML preserving the original text and formatting — and the output can subsequently be validated against WCAG 1.4.3 using axe DevTools or WAVE in the same way as any other web content.
Checklist: Colour Contrast
Use this checklist to verify contrast levels on your website or in your document:
- Normal body text and headings have a contrast ratio of at least 4.5:1 against the background (WCAG 1.4.3)
- Large text (≥ 18pt regular or ≥ 14pt bold) has at least 3:1 against the background (WCAG 1.4.3)
- Placeholder text in forms has been replaced by visible labels — or meets the contrast requirement (WCAG 1.4.3)
- Text over images and gradients has been manually assessed across all varying background areas
- User interface components (checkboxes, input fields, focus indicators) achieve at least 3:1 contrast (WCAG 1.4.11)
- Information-bearing icons and graphics achieve at least 3:1 contrast (WCAG 1.4.11)
- Links are distinguished from surrounding text by means other than colour alone (WCAG 1.4.1)
- Logos and decorative text are exempt from the contrast requirement and excluded from the above