Color Accessibility
A complete resource for building interfaces that work for everyone — contrast requirements, color vision deficiency guidance, and practical checklists for inclusive design.
Core resources
The essential guides for designing and shipping accessible color.
WCAG Contrast Guide
Understand the WCAG 2.2 contrast requirements — the 3:1, 4.5:1 and 7:1 thresholds, how they are calculated, and when each applies.
Color Blindness Guide
Learn about the seven types of color vision deficiency, their prevalence, and how to design interfaces that work without relying on hue.
Accessible Palettes
Curated palette sets that pass WCAG AA at every step, plus principles for building your own accessible color system.
Contrast Checker Tool
Test any foreground/background pair against AA, AAA and APCA. Get accessible alternative suggestions when a pairing fails.
Color Blindness Simulator
Preview any color or palette under seven CVD types. Verify that your interface still communicates when color is not reliable.
The four pillars of accessible color
These principles cover the vast majority of color accessibility issues in digital interfaces.
-
Sufficient contrastEvery foreground/background pair must reach the WCAG thresholds for its text size and use case. Body text needs 4.5:1 (AA), large text needs 3:1, and AAA requires 7:1.
-
Never rely on color alonePair color with icons, text labels, patterns or position. Status indicators (success, warning, error) must include a shape or text signal alongside the color.
-
Test under color vision deficiencySimulate your interface under protanopia, deuteranopia, tritanopia and achromatopsia. Ensure meaning survives when hue is unreliable.
-
Provide clear focus statesFocus rings must be visible and distinct from the background and from other interactive states. A focus ring that fails contrast is a keyboard accessibility failure.
WCAG contrast thresholds at a glance
| Level | Normal text | Large text | UI components |
|---|---|---|---|
| WCAG AA | 4.5:1 | 3:1 | 3:1 |
| WCAG AAA | 7:1 | 4.5:1 | — |
"Large text" means 18pt (24px) or larger, or 14pt (18.66px) or larger if bold. UI components include icons, borders, form controls, and focus indicators — anything the user needs to perceive to operate the interface.
- Light gray text on white (usually 2:1–3:1) — the single most common failure
- Placeholder text that fails contrast
- Green success and red error without any icon or label
- Focus rings that disappear against the background
- Disabled buttons that fail contrast for the meaning they convey (e.g. "not yet available" information)
Contrast ratio, in one paragraph
WCAG contrast ratio compares the relative luminance of two colors. The formula is (L₁ + 0.05) ÷ (L₂ + 0.05), where L₁ is the lighter color's relative luminance and L₂ is the darker. Relative luminance is computed from linearized sRGB values using the coefficients 0.2126 (red), 0.7152 (green) and 0.0722 (blue) — which is why green contributes far more to perceived brightness than blue. The scale runs from 1:1 (identical) to 21:1 (pure black on pure white).
Use the contrast checker to test any pair, and the guide for a deeper explanation of the math.
Practical checklist
- Every text color passes 4.5:1 against its background.
- Icons, borders and focus rings pass 3:1 against adjacent colors.
- Status is conveyed with color plus icon or text.
- Charts use distinguishable colors plus labels or patterns.
- Placeholder text meets at least AA contrast.
- Links in body text are distinguishable by more than color (underline, weight, or icon).
- The interface remains usable in dark mode, in high-contrast mode, and in grayscale.
- Interaction states (hover, focus, active, disabled) are visually distinct.
Frequently asked questions
What is color accessibility?
Color accessibility is the practice of choosing and using colors so that content remains usable and readable for everyone, including people with color vision deficiency, low vision, and users in challenging environments. It includes meeting WCAG contrast requirements and never relying on color alone to convey meaning.
What contrast ratio is required by WCAG?
WCAG 2.2 requires a contrast ratio of at least 4.5:1 for normal text (AA), 3:1 for large text and non-text UI components, and 7:1 for AAA on normal text. These ratios are calculated from relative luminance, which measures perceived brightness.
How common is color blindness?
Approximately 8% of men and 0.5% of women of European ancestry have some form of red-green color vision deficiency. Blue-yellow deficiency and total color blindness are much rarer. Designing for color vision deficiency benefits far more people than just those affected — everyone benefits from clear, well-designed interfaces.
Does accessibility limit design creativity?
No. Accessibility constrains certain technical choices — contrast ratios, not relying on color alone — but great design systems are built within those constraints and often improve as a result. Accessible color often means clearer hierarchy, better typography and more deliberate use of color.
Is WCAG AA or AAA the right target?
AA is the baseline legal requirement in most jurisdictions and is sufficient for general interfaces. AAA is recommended for text that is read extensively (documentation, articles) or in situations where users may be impaired (public kiosks, forms in bright environments). Aim for AA as a floor and AAA where practical.