What is the difference between AA and AAA contrast requirements?

AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. Most organizations target AA because it is the legal standard in most jurisdictions (ADA, Section 508, EN 301 549). AAA is a stretch goal. For practical purposes, meeting AAA for body text (7:1) noticeably improves readability for all users, especially in bright environments. The [accessibility compliance template](/templates/accessibility-compliance-template) maps these requirements to specific legal standards by jurisdiction.

Do disabled elements need to meet contrast requirements?

No. WCAG 1.4.3 explicitly exempts "text or images of text that are part of an inactive user interface component." Disabled buttons, grayed-out form fields, and unavailable menu items are exempt. However, the user still needs to perceive that the element exists and is disabled. A very low-contrast disabled state (1.5:1) might be invisible to some users, causing them to think the feature does not exist.

How do we handle text on background images or gradients?

Measure the contrast at the worst-case point: where the text overlaps the lightest part of the background (for dark text) or the darkest part (for light text). If the image varies too much to guarantee contrast, add a semi-transparent overlay behind the text. An overlay with 80% opacity in the appropriate color (black for light text, white for dark text) typically provides enough contrast without fully obscuring the image.

Should placeholder text meet contrast requirements?

Yes. WCAG 1.4.3 applies to all text, including placeholder text in form fields. Placeholder text that fails contrast (the common light gray pattern) is both an accessibility failure and a usability problem: users mistake low-contrast placeholders for pre-filled values. The better approach is to use visible labels above form fields and reserve placeholder text for format hints ("MM/DD/YYYY") styled at a passing contrast ratio.

How do we audit contrast in data visualizations?

Each data series in a chart must have a 3:1 contrast ratio against adjacent areas (WCAG 1.4.11 Non-text Contrast). This includes adjacent data series, the chart background, and axis lines. For pie charts and stacked bar charts where data series touch each other, use a 1px white or black separator between segments to guarantee contrast. Additionally, never rely on color alone to distinguish data series. Use patterns, labels, or different shapes alongside color. The [cognitive accessibility template](/templates/cognitive-accessibility-template) covers the broader principle of not relying on color as the sole information channel.

Color Contrast Audit Template for PMs

What This Template Is For

Color contrast failures are the most common accessibility issue on the web. The WebAIM Million study (annual audit of the top 1,000,000 home pages) consistently finds low contrast text on over 80% of pages. The fix is straightforward once you know what to measure: WCAG defines specific contrast ratios for text, interactive elements, and graphical objects. This template structures the audit process.

WCAG 2.2 defines contrast requirements at two levels. Level AA requires a 4.5:1 ratio for normal text and 3:1 for large text (18px bold or 24px regular). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Non-text elements (icons, borders, form field boundaries) require a 3:1 ratio against their background at Level AA.

This template walks through a systematic contrast audit of your product's UI: text, interactive elements, status indicators, charts, and focus indicators. Use it alongside the accessibility audit template for a broader compliance review. The WCAG audit template covers all WCAG criteria, not just contrast. For understanding how contrast fits into the bigger picture of inclusive design, contrast is one part of the visual perception dimension.

How to Use This Template

Gather your product's color palette. Pull every color used in the UI from your design system, Figma file, or CSS/Tailwind configuration.
Generate a contrast matrix showing every foreground-background combination used in production.
Test each combination against WCAG thresholds using a contrast checker tool (listed below). Record the ratio and pass/fail status.
For failures, propose a replacement color that meets the required ratio while staying visually close to the original brand color.
Verify remediation in context. A color that passes the ratio check may still look wrong in the UI. Always preview fixes in the actual interface.
Update your design system tokens to use the corrected values so the fix propagates everywhere the color is used.

The Template

Audit Configuration

Field	Details
Product	[Product name]
Audit Owner	[Name]
Audit Date	[Date]
Target Level	[WCAG 2.2 AA / AAA]
Design System	[Figma library / Tailwind config / CSS custom properties]
Tools Used	[e.g., WebAIM Contrast Checker, Stark, axe DevTools, Colour Contrast Analyser]

Contrast Ratio Requirements (WCAG 2.2)

Element Type	Level AA	Level AAA	Measurement
Normal text (under 18px bold / 24px regular)	4.5:1	7:1	Foreground text color vs. background color
Large text (18px bold+ or 24px regular+)	3:1	4.5:1	Foreground text color vs. background color
UI components (buttons, form borders, icons)	3:1	N/A	Component color vs. adjacent background
Graphical objects (charts, data viz)	3:1	N/A	Each data series vs. adjacent areas
Focus indicators	3:1	N/A	Focus indicator vs. surrounding background
Placeholder text	4.5:1	7:1	Placeholder color vs. input background
Disabled elements	Exempt	Exempt	No contrast requirement, but should be perceivable

Color Palette Inventory

List every color token in your design system with its hex value and where it is used.

Token Name	Hex	Usage	Role
[e.g., primary-500]	[#0066CC]	[Primary buttons, links, active states]	Foreground
[e.g., gray-600]	[#6B7280]	[Body text, secondary labels]	Foreground
[e.g., gray-100]	[#F3F4F6]	[Page background, card background]	Background
[e.g., red-500]	[#EF4444]	[Error text, error borders]	Foreground
[e.g., green-500]	[#22C55E]	[Success text, success icons]	Foreground
[e.g., amber-500]	[#F59E0B]	[Warning text, warning badges]	Foreground

Text Contrast Audit

Test every text color + background color combination used in the product.

ID	Element	Text Color	Background	Ratio	AA Required	Result	Fix
TC-001	Body text on white	[#374151]	[#FFFFFF]	[X:1]	4.5:1	☐ Pass / ☐ Fail	[Proposed fix color]
TC-002	Body text on dark	[#D1D5DB]	[#111827]	[X:1]	4.5:1	☐ Pass / ☐ Fail
TC-003	Link text	[#2563EB]	[#FFFFFF]	[X:1]	4.5:1	☐ Pass / ☐ Fail
TC-004	Heading on hero	[#FFFFFF]	[Background image/gradient]	[X:1]	3:1 (large)	☐ Pass / ☐ Fail
TC-005	Placeholder text	[#9CA3AF]	[#FFFFFF]	[X:1]	4.5:1	☐ Pass / ☐ Fail
TC-006	Error message	[#DC2626]	[#FFFFFF]	[X:1]	4.5:1	☐ Pass / ☐ Fail
TC-007	Success message	[#16A34A]	[#FFFFFF]	[X:1]	4.5:1	☐ Pass / ☐ Fail
TC-008	Warning text	[#D97706]	[#FFFFFF]	[X:1]	4.5:1	☐ Pass / ☐ Fail
TC-009	Caption / helper text	[#6B7280]	[#FFFFFF]	[X:1]	4.5:1	☐ Pass / ☐ Fail
TC-010	Badge text	[#FFFFFF]	[Badge background]	[X:1]	4.5:1	☐ Pass / ☐ Fail

Interactive Element Contrast Audit

Test buttons, form fields, and interactive controls against WCAG 1.4.11 (Non-text Contrast, 3:1).

ID	Element	Element Color	Adjacent Background	Ratio	Required	Result
IE-001	Primary button	[#2563EB]	[#FFFFFF]	[X:1]	3:1	☐ Pass / ☐ Fail
IE-002	Primary button text	[#FFFFFF]	[#2563EB]	[X:1]	4.5:1	☐ Pass / ☐ Fail
IE-003	Secondary button border	[#D1D5DB]	[#FFFFFF]	[X:1]	3:1	☐ Pass / ☐ Fail
IE-004	Input field border	[#D1D5DB]	[#FFFFFF]	[X:1]	3:1	☐ Pass / ☐ Fail
IE-005	Input field border (focused)	[#2563EB]	[#FFFFFF]	[X:1]	3:1	☐ Pass / ☐ Fail
IE-006	Checkbox (unchecked)	[#D1D5DB]	[#FFFFFF]	[X:1]	3:1	☐ Pass / ☐ Fail
IE-007	Toggle switch (off)	[#D1D5DB]	[#FFFFFF]	[X:1]	3:1	☐ Pass / ☐ Fail
IE-008	Icon button	[#6B7280]	[#FFFFFF]	[X:1]	3:1	☐ Pass / ☐ Fail
IE-009	Focus indicator	[#2563EB]	[Adjacent background]	[X:1]	3:1	☐ Pass / ☐ Fail
IE-010	Link underline	[#2563EB]	[#FFFFFF]	[X:1]	3:1	☐ Pass / ☐ Fail

Status and Data Visualization Contrast

Test status indicators, charts, and data visualization elements.

ID	Element	Colors Used	Adjacent Color	Ratio	Required	Result
DV-001	Chart: Series 1 vs background	[#Color]	[#Background]	[X:1]	3:1	☐ Pass / ☐ Fail
DV-002	Chart: Series 1 vs Series 2	[#Color1]	[#Color2]	[X:1]	3:1	☐ Pass / ☐ Fail
DV-003	Status: Active (green dot)	[#22C55E]	[#FFFFFF]	[X:1]	3:1	☐ Pass / ☐ Fail
DV-004	Status: Error (red indicator)	[#EF4444]	[#FFFFFF]	[X:1]	3:1	☐ Pass / ☐ Fail
DV-005	Progress bar fill	[#Color]	[#Track color]	[X:1]	3:1	☐ Pass / ☐ Fail
DV-006	Heatmap: low vs medium	[#Color1]	[#Color2]	[X:1]	3:1	☐ Pass / ☐ Fail

Dark Mode Contrast Audit

If your product has a dark mode, repeat the text and interactive element audits for dark mode colors.

ID	Element	Dark Mode FG	Dark Mode BG	Ratio	Required	Result
DM-001	Body text	[#D1D5DB]	[#111827]	[X:1]	4.5:1	☐ Pass / ☐ Fail
DM-002	Link text	[#60A5FA]	[#111827]	[X:1]	4.5:1	☐ Pass / ☐ Fail
DM-003	Primary button	[#3B82F6]	[#1F2937]	[X:1]	3:1	☐ Pass / ☐ Fail
DM-004	Input border	[#4B5563]	[#1F2937]	[X:1]	3:1	☐ Pass / ☐ Fail
DM-005	Error text	[#FCA5A5]	[#111827]	[X:1]	4.5:1	☐ Pass / ☐ Fail
DM-006	Helper/caption text	[#9CA3AF]	[#111827]	[X:1]	4.5:1	☐ Pass / ☐ Fail

Recommended Contrast Checking Tools

Tool	Platform	Cost	Best For
WebAIM Contrast Checker	Web (webaim.org/resources/contrastchecker)	Free	Quick manual checks of specific color pairs
Colour Contrast Analyser (CCA)	Desktop (Mac/Windows)	Free	Eyedropper sampling of any on-screen color
Stark	Figma/Sketch plugin	Free tier + paid	Design-time contrast checking in context
axe DevTools	Chrome extension	Free	Automated scanning of rendered pages
Lighthouse	Chrome DevTools	Free	Automated page-level contrast audit
Polypane	Desktop browser	Paid	Full-page contrast overlay with failing areas highlighted

Remediation Guidance

When a color fails the contrast check:

Darken the foreground (for light backgrounds) or lighten the foreground (for dark backgrounds). Stay within the same hue family.
Check the fix in context. A darker gray that passes 4.5:1 may look too heavy for secondary text. Iterate.
Update the design token, not individual instances. If gray-400 fails as body text, either stop using it for body text or replace the token value globally.
Document the decision. If a brand color fails and cannot be changed, document the exception and provide an accessible alternative for text usage.

Common fixes:

Problem	Typical Fix
Light gray text on white (#9CA3AF on #FFFFFF = 2.9:1)	Darken to #6B7280 (4.6:1) or #4B5563 (7.1:1)
Blue link on white (#3B82F6 on #FFFFFF = 3.1:1)	Darken to #2563EB (4.6:1) or #1D4ED8 (6.4:1)
Green success on white (#22C55E on #FFFFFF = 2.0:1)	Darken to #15803D (4.6:1) and add a checkmark icon
Orange warning on white (#F59E0B on #FFFFFF = 1.8:1)	Darken to #B45309 (4.5:1) and add a warning icon
White text on bright button (#FFFFFF on #3B82F6 = 3.1:1)	Darken button to #2563EB (4.6:1) or #1D4ED8 (6.4:1)

Audit Summary

Category	Total Checks	Passed	Failed	Pass Rate
Text contrast
Interactive elements
Status / data viz
Dark mode
Total

Color Contrast Audit Template for PMs