Accessible web design 101

The best websites don’t just look good — they work well for everyone. And that starts long before code is written or plugins are installed.

As a designer or business owner, the choices you make early on—from colors and type to navigation and layout—set the stage for whether your site will be accessible.

Accessibility starts with design. And when you design with inclusivity in mind, you’re not just following rules—you’re making the web friendlier, more beautiful, and more useful for everyone.

Accessible web design is for everyone.

What is web accessibility, anyway?

In it’s simplest terms, web accessibility means making websites usable for people of all abilities. That includes those with visual, auditory, motor or cognitive differences.

It’s not just people with mobility issues—it’s people who are color blind, people who are sensitive to flashing images and, honestly, just people who are aging and can’t read tiny print on your website or figure out who to call or email. If we’re lucky, that’s just about all of us.

The official guidelines for accessible design (called WCAG) boil down to four common-sense ideas:

  • Perceivable. People need to be able to see or hear your content.
  • Operable. They need to be able to use it, whether with a mouse, keyboard or assistive tech.
  • Understandable. Content should be clear and predictable.
  • Robust. It should work on different devices and browsers.

That’s the technical side. The human side is even simpler: can everyone enjoy the designs you’ve poured your creativity into?

Why should designers or business owners care accessible web design?

Besides being the right thing to do, accessibility has some big perks for your work (and your clients):

  • Bigger audience. In the U.S., people with disabilities represent a $490 billion market.
  • Better UX for everyone. Good contrast, clear fonts and smart navigation don’t just help people with disabilities. They help everyone.
  • Better search engine performance. Keywords paired with images, well-labeled sections and clear headings all improve your visibility in search engines.
  • Legal peace of mind. More companies are being sued for inaccessible websites. Starting with accessible design means fewer headaches later.
  • Financial incentives. Businesses can also take advantage of the Disabled Access Credit, a tax credit that helps offset the cost of making your website accessible.

Think of web accessibility like curb cuts in sidewalks—they were made for wheelchairs, but they also help parents with strollers, travelers with luggage and delivery drivers with carts.

Simple mistakes to avoid

Sometimes small design choices create big accessibility barriers. A few of the usual suspects:

  • Low-contrast color palettes may look beautiful on your monitor but be unreadable for someone with low vision.
  • Tiny or overly decorative fonts are hard to read on small screens.
  • Text baked into images is invisible to screen readers.
  • Low-res graphics get blurry when zoomed in.
  • Missing visual cues for links or buttons leave keyboard users guessing.
  • Overusing motion or auto-playing animations can overwhelm users with sensory sensitivities.
Two side-by-side version of the same photo. The photo is a close-up of a die-cut YellowDog labrador sticker. A person's hands are holding the sticker over a cardboard box and getting ready to peel the sticker from its backing. The version on the left is low-resolution and fuzzy. The version on the right is high-resolution and clear.
Low-resolution, out-of-focus photos don’t work for the vision-impaired. Your photos should look more like the version on the right, with crisp, clear lines that are more accessible to more users.

The good news? These are all things you can spot and address before a developer ever gets involved.

It’s all fixable.

Here are some quick fixes you can start using right away:

  • Pick high-contrast colors, with a contrast ratio of at least 3:1. Use built-in contrast checkers in your design tools, or free browser add-ons like ANDI.
  • Stick with live text. Don’t flatten important text into graphics. Use editable text so that screen readers can catch it.
  • Think about alt text while designing. Ask yourself: if someone couldn’t see this image, how would I describe it in a sentence? That’s your alt text cue.
  • Caption your videos. If you’re designing for video, captions are a must (and easier than you think).
  • Design buttons that work for everyone. Make them large enough to tap on mobile, with good contrast and a visible outline.
  • Test, test, test. Look at your designs on different devices and zoom levels. Small tweaks now can save big fixes later.

Tools to keep in your pocket

A few freebies everyone should know about (nope, this doesn’t have to cost money):

  • ANDI checks contrast and basic accessibility in your browser.
  • NVDA is a free screen reader for Windows. Try experiencing your designs without visuals—it’s eye-opening.
  • ALLY is Elementor’s free plugin for WordPress that can fix some accessibility issues. NOT a one-size-fits-all, but a plus. 
  • WebAIM contrast checker gives you quick way to test your color palettes online.
  • YouTube auto-captions make adding captions a breeze.
Four colored blocks with different colored text illustrating high and low contrast.
Contrast creates legibility. When colors are too similar, like the blue on green and grey on grey in the lower blocks of this example, text is tough to read.

Collaboration is key.

Accessibility isn’t a solo act—it’s a team effort. Business owners who are hiring designers and developers should bring up accessibility early in the process and make it part of project discussions from day one. Designers can then plan for it in their choices, and developers can build it into the site.

Notes on colors, contrast, font choices and suggested alt tex should be included in the initial file hand-off, and accessibility should be on the table during review and revision. Ask developers to give feedback on what’s working (and what’s not) early in the design process. When everyone’s talking about it from the start, the end result is stronger, smoother and more inclusive.

Once the site is built, don’t forget one last step: publishing an accessibility statement. This signals to visitors that you’re committed to accessibility and gives them a way to reach out if they run into issues. Here’s a simple way to generate one.

Accessible web design inspiration for the swipe file

If all of this is new to you, it can be hard to picture accessibility done well. Check out these stellar examples of websites who are doing it well:

  • GOV.UK. The UK government portal is often cited for clear design, strong keyboard support and screen-reader-friendly filters and search results.
  • USA.gov. The U.S. General Services Administration Publicly documents how they meet Section 508 and WCAG. They even build with the U.S. Web Design System, which bakes in accessible components and guidance.
  • NHS.uk. The UK National Health Service website has a clear accessibility statement and extensive design/service manuals for inclusive UX at scale—great for citing patterns, checklists and WCAG 2.2 alignment.
  • BBC.com. The BBC leads by example with their GEL design system and published accessibility practices.

Beautiful design = inclusive design

The takeaway? Accessibility doesn’t limit your creativity. It expands it.

When you design with accessibility in mind, you’re not just making something pretty. You’re making something powerful—a design that truly connects with the widest possible audience.


Are you inspired to break down the accessibility barriers around your website? Work with a qualified designer to implement ADA best practices without sacrificing your aesthetic.

You can also take your own compliance to the next level with my upcoming ADA Compliance Basics Class, launching October 16!

Picture of Mary-Frances O’Dea

Mary-Frances O’Dea

Mary-Frances O’Dea is the founder of Apricity Web Solutions (https://apricitywebsolutions.com/ada-consulting/), a Colorado-based consultancy that builds websites designed to actually work. With 20+ years of experience in web development, project management and ADA compliance, she helps nonprofits, startups and growing businesses create digital presences that are inclusive, scalable and stress-free. When she’s not untangling tricky web projects, she mentors entrepreneurs, speaks on accessibility and connects business owners with the right partners to bring their ideas to life.

Can we help you find something?