Color Accessibility WCAG Guide

← Back to Blog

Color Accessibility WCAG Guide

· 7 min read

What Is WCAG and Why It Matters

WCAG (Web Content Accessibility Guidelines) is an international standard developed by the W3C to ensure websites are accessible to all users, including those with visual, auditory, motor, or cognitive disabilities. Color-related accessibility requirements are mainly covered in the WCAG 1.4 series of guidelines, which are critical for hundreds of millions of visually impaired users worldwide.

Three WCAG Compliance Levels

WCAG defines three compliance levels of increasing stringency: Level A (minimum, basic accessibility), Level AA (middle, the minimum standard required by most regulations and contracts), and Level AAA (highest, not achievable for all content). Most organizations target WCAG 2.1 Level AA. US ADA regulations and European EN 301 549 both require Level AA.

Key Guideline 1.4.3: Text Contrast

This is the most important color accessibility requirement: there must be sufficient contrast between text and background. Specific requirements:

• AA Level, normal text: At least 4.5:1 contrast ratio (applies to text smaller than 18pt or smaller than 14pt bold)
• AA Level, large text: At least 3:1 contrast ratio (applies to 18pt+ or 14pt bold+)
• AAA Level, normal text: At least 7:1 contrast ratio
• AAA Level, large text: At least 4.5:1 contrast ratio

/* Contrast ratio examples */
Black on White:        21:1  (PASS AAA)
Dark gray on White:    15:1  (PASS AAA)
#767676 on White:     4.54:1 (PASS AA, FAIL AAA)
#999999 on White:     2.85:1 (FAIL ALL)
White on Blue #4A90E2: 3.1:1 (PASS AA for large text only)

Guideline 1.4.1: Don't Use Color Alone to Convey Information

This is an often-overlooked important guideline: color should not be the only means of conveying information. For example: don't use only red to indicate form errors (also provide an error icon or text description); don't use only green and red to distinguish success and failure states (colorblind users cannot distinguish these); don't rely only on color to differentiate data series in charts (also use different patterns or labels).

Guideline 1.4.11: Non-Text Contrast

A guideline added in WCAG 2.1, requiring that UI components (non-text elements) used to convey information also meet contrast standards: all active UI components used to convey information (button borders, input borders, radio buttons, etc.), as well as informational parts of charts and graphics, need at least 3:1 contrast with adjacent colors.

Considerations for Colorblind Users

About 8% of men and 0.5% of women worldwide have some degree of color vision deficiency. The most common type is red-green color blindness (Deuteranopia/Protanopia), where sufferers cannot distinguish red from green. Design recommendations:

• Avoid using only red/green colors to distinguish critical information (like success/error states)
• Add icons (✓ ✗) or text labels alongside colors
• Use colorblind simulation tools (like Coblis, Figma plugins) to preview your design
• Use both color and shape/pattern to distinguish data in charts
• Link colors should be clearly distinguishable from body text, and should ideally include underlines

Practical Accessible Color Strategies

Here are practical strategies for ensuring color accessibility:

• Check contrast during the design phase, not as a last-minute fix
• Use tools like Lighthouse, axe, and WAVE for automated accessibility scanning
• When selecting text colors, prioritize dark colors (dark text is generally more readable than light text)
• Use gray text carefully: #767676 barely passes AA on white background — lighter than this fails
• For sites that need to support both dark and light modes, validate contrast in both modes

APCA: The Next-Generation Contrast Algorithm

WCAG 3.0 (still in draft) will introduce a new contrast algorithm called APCA (Advanced Perceptual Contrast Algorithm). APCA more accurately simulates human visual perception than the current WCAG 2.x contrast algorithm, particularly in handling small fonts, bold fonts, and special color combinations more reasonably. Although WCAG 3.0 has not yet been released, APCA has already been adopted by some designers as a reference tool.

Try the online tool now — no installation, completely free.

Open Tool →