Accessibility Tools

WCAG Contrast Checker, Colour Blindness Simulator and Alt Text Helper

Tools for accessible design. Check colour contrast against WCAG and APCA, simulate colour blindness, write better alt text, test readability and generate skip links. They help find the problems that keep people from using a site.

44 tools tagged Accessibility

Accessible Colour Palette Generator

Generate a palette where every colour passes WCAG contrast on your background.

Accordion Builder

Build a smooth, accessible accordion from native details elements.

Alt Text Helper

Compose the right alt attribute for decorative, informative and functional images.

Animated Dropdown

Build an accessible dropdown menu with a fade, slide or scale animation.

Announcement Bar

Build a dismissible top-of-page announcement bar with rotating messages.

APCA Contrast Checker

APCA Lc contrast score with WCAG 3 draft levels and minimum text sizes.

ARIA Attribute Builder

Generate the right role and aria attributes for any common widget.

ARIA Label Generator

Write clear aria-label text for icon buttons, links and unlabelled inputs.

Back To Top Button

Build a scroll to top button with an optional reading progress ring.

Bottom Sheet

Build a slide-up bottom sheet with actions and swipe to close.

Breadcrumb Generator

Build accessible breadcrumb navigation with optional BreadcrumbList schema.

Colour Blindness Simulator

View any image through protanopia, deuteranopia, tritanopia or achromatopsia.

Contrast Checker

Check colour contrast against WCAG and APCA.

Coverflow Carousel

Build a 3D cover flow slider with tilted side slides.

FAQ Builder

Build an accessible FAQ section with optional FAQPage schema.

Feature Comparison Table

Build an accessible plan comparison table with ticks and a highlighted column.

 New

Flash And Flicker Checker

Check a video for dangerous flashing against the three flashes rule.

Floating Action Button

Build a floating action button with an optional speed dial menu.

Focus Indicator Generator

Build a visible, WCAG-friendly focus ring and copy the :focus-visible CSS.

Hover Effect Builder

Build animated hover effects for buttons and links.

Keyboard Navigation Tester

Audit HTML for controls that keyboard users cannot reach, operate or see.

Keyboard Shortcuts Cheat Sheet

Essential Windows and Mac keyboard shortcuts side by side.

Luminance Scorer

Score many colour pairs for contrast at once.

Mega Menu

Build an accessible full-width mega menu with link columns and a promo.

Mobile Menu

Build a responsive hamburger menu with an animated icon and panel.

Modal Builder

Build an accessible modal window with the native dialog element.

News Ticker

Build a scrolling breaking news headline bar with a pause button.

Off-Canvas Menu

Build an accessible slide-out side menu with an overlay and focus trap.

Pagination Builder

Build accessible page number links with ellipsis gaps and next and previous.

Popover Builder

Build a native HTML popover that opens next to its button.

Pricing Toggle

Build a monthly and yearly price switch with no JavaScript.

Read More Builder

Build an accessible Read more toggle that expands clipped text.

Readability Checker

Flesch reading ease, grade level and five other readability scores at once.

Review Stars

Make accessible partial star ratings with one CSS variable.

Scrollspy Navigation

Build a nav that highlights the section currently on screen.

Skip Link Generator

Generate a skip-to-content link that appears on focus, with HTML and CSS.

Social Proof Popup

Build a corner toast that cycles recent-activity messages.

Tab Order Tester

List every Tab stop in your HTML in order and flag focus order problems.

Tabs Builder

Build accessible tabs with arrow key support and three styles.

Testimonial Carousel

Build an accessible swipeable testimonial slider on CSS scroll snap.

Touch Target Checker

Check a control's size and spacing against WCAG, Apple and Android minimums.

Vertical Tabs Builder

Build accessible side tabs that turn into a row on phones.

Vertical Ticker

Build a ticker that rotates headlines one at a time, sliding up.

WCAG Checker

Find WCAG accessibility failures in pasted HTML, with the criterion each breaks.