DesignSystems.One LogoDesignSystems.One

Accessibility Checklist

Ensure your designs and implementations meet accessibility standards and create inclusive experiences for all users.

Overall Progress
0%

0 of 31 checks completed

Not StartedIn ProgressComplete

Compliance Level

WCAG 2.1 conformance levels

0/19
Level A

Essential

0/11
Level AA

Standard

0/1
Level AAA

Enhanced

Impact Distribution

Prioritize by impact level

0/10
High

Critical

0/20
Medium

Important

0/1
Low

Helpful

Visual Accessibility

0/8 completed

Ensure your design is perceivable by users with visual impairments, color blindness, or low vision.

All images, form elements, and other non-text content have appropriate text alternatives.

1.1.1
A
High

Semantic markup is used to designate headings, lists, emphasized text, etc.

1.3.1
A
High

Color is not used as the only visual means of conveying information.

1.4.1
A
Medium

Text has a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

1.4.3
AA
High

Text can be resized up to 200% without loss of content or functionality.

1.4.4
AA
Medium

Content can be presented without loss of information or functionality when the viewport is 320px wide.

1.4.10
AA
Medium

UI components and graphical objects have a contrast ratio of at least 3:1 against adjacent colors.

1.4.11
AA
Medium

No loss of content when line height is 1.5x font size, spacing after paragraphs is 2x font size, letter spacing is 0.12x font size, and word spacing is 0.16x font size.

1.4.12
AA
Medium

Color Contrast Checker

Test color combinations to ensure they meet WCAG contrast requirements for accessibility.

Accessible Color Checker

Verify that your text and background colors have sufficient contrast for all users.

Sample Text

This is how your text will appear to users.

Small text example for testing.

Contrast Ratio

21:1
Excellent
Normal Text (4.5:1 required)
PASS
Large Text (3:1 required)
PASS
Enhanced Contrast (7:1 required)
PASS

WCAG Guidelines

AA

Normal Text: 4.5:1 minimum

Text that is less than 18pt (or 14pt bold) requires a contrast ratio of at least 4.5:1.

AA

Large Text: 3:1 minimum

Text that is at least 18pt (or 14pt bold) requires a contrast ratio of at least 3:1.

AAA

Enhanced Contrast: 7:1 minimum

For enhanced accessibility (AAA level), normal text should have a contrast ratio of at least 7:1.

Color Combinations

Advanced Checker
Pro Tip:Don't rely solely on color to convey information. Always use additional indicators like text, icons, or patterns.
Click to copy color combination details

Accessibility Resources

WCAG Guidelines

Official Web Content Accessibility Guidelines

The complete set of guidelines for making web content more accessible to people with disabilities.

Visit WCAG Website

Testing Tools

Tools to help test your site's accessibility

Automated tools can help identify many accessibility issues, but manual testing is also essential.

  • WAVE
  • axe DevTools
  • Lighthouse

Common Mistakes

Accessibility pitfalls to avoid

  • Missing alternative text for images
  • Low contrast text that's difficult to read
  • Keyboard inaccessible interactive elements
  • Missing form labels or instructions