Accessible by Design: Your Guide to Screen Readers, Color Contrast, and more
This blog is adapted from our social media series "Accessible by Design”.
Accessibility is a key part of all design, but unfortunately, one that is often overlooked. Maybe it is because of complicated terminology or stubbornness around creative visions, but many of us don’t work accessible principles into our design philosophy. This series will focus on demystifying web accessibility in hopes of making the internet a better experience for all.
How screen readers read your site.
What is a screen reader? A screen reader is software that reads website content out loud. It doesn't "see" your design; it reads your code and web structures. This allows it to relay information to blind/low-vision (and more!) website visitors. Screen readers navigate a page by going through headings, links, buttons, form fields, and image descriptions (alt text). In these instances, design is NOT the experience; how you have structured your site is.
A common mistake is to prioritize design aesthetics over accessibility. For example, maybe an H3 size heading looks better at the top of your page. Every page needs an H1, so this design decision turns into an accessibility error. Other examples include styling buttons that are really division containers ("<div>") or missing alt text. Screen readers skip over font choices, color palettes, layout spacing, and non-essential animations. They rely on logical flow of information, labeling elements, assigning roles to elements, and clear hierarchy. Pay attention to these, and your site becomes helpful to everyone navigating it. Ask yourself, if a screen reader lands on my site, can it:
Understand what the page is about?
Navigate without guessing?
Complete a form independently?
If the answer is no, then the accessibility of your site is weak. Designers and developers can use real headings (not stylized text), write clear link text, add meaningful alt text, label form fields correctly, and test out designs with a screen reader or WAVE. Small fixes can create major impact that leads to independence, control, dignity, and equal access for all of your users.
Color contrast & why brand colors can’t always be text.
Creating a brand color palette is more than just picking pretty colors. It's about creating a useful system that ensures a good experience for all. Your brand colors were never meant to do every job. A color that works beautifully as an accent, a background, or graphic element can fail the moment it is used for text. The color isn't the problem; it is a mismatch in how the color is being used.
For example, take the Hueman hot pink shade (#FF007D). Hot pink as text on a white body fails body text baseline contrast ratios with a rating of 3.79. However, black text on a hot pink background passes with a ratio of 5.55.
The number that you should be aiming for is set by WCAG (Web Content Accessibility Guidelines). Most professional sites are expected to meet the following ratios:
3:1 for large text minimum
4.5:1 for body text baseline
7:1 for any readable conditions
If your text doesn't hit these ratios, people struggle to read or can't read your text at all. Going back to Hueman's palette, let's see what colors we can use on a white background.
Purple 6.62:1 Safe ✅
Blue 4.83:1 Safe ✅
Hot Pink 3.79:1 Large only 🟡
Orange 2.30:1 Fails ❌
Yellow 1.10:1 Never ❌
You can check how accessible your palette is at coolors.co/contrast-checker.
So what happens to colors that fail? How do you still use them? You don't have to scrap your palette or start using colors outside of it; you just have to put each color in the right place. For the Hueman hot pink, we only use it for large display headings. For the orange, we use it for icons, borders, and graphic accents. For the yellow, we use it as a background for dark text and never as type. It is possible to stay on brand and maintain accessibility standards.
What alt text is and why it matters more than you think.
Alt text’s purpose is often viewed as just for accessibility, but it is more than that. It is one of the simplest ways to add meaning and structure to images. Alt text does two jobs at once. It supports accessibility by allowing screen readers to read alt text aloud to people who can't see images. Without it, they may only hear the word "image"— no description. It also supports SEO by allowing Search Engines to "see" images. They can read alt text like screen readers and help your photos show up in Google Image Search, improving your page rankings.
Some common mistakes when crafting alt text is not adding enough context for screen readers/search engines or keyword stuffing. For example, "image1.jpg" or "photo" isn't a sufficient enough description. However, "wellness branding design studio nonprofit branding logo" is too much and unclear. Good alt text is descriptive, specific, and easy to understand. "Two women reviewing branding mood boards at a studio table."
Every image is different, so when should you add alt text? If it is a decorative image, like a background or divider, you can leave it empty. However, if it is meaningful, includes text, or has a link, you should definitely add alt text.
Meaningful images: describe what photos, illustrations, and charts show and why they matter.
Images with text in them: include the text in logos, banners, and infographics.
Linked images: say where the image link leads, not the appearance.
A formula we have found that works every time for creating alt text is [subject] + [action or context] + [relevant detail]. Let's put it to the test.
Subject: Corporate building
Context: Blue and purple sky fading into soft pink
Detail: Cloud reflections on glass windows
“Corporate building with blue and purple sky fading into soft pink with cloud reflections on glass windows” is much better than "a building during sunset". This is also a building during sunset but provides a different experience and context.
Some things to still keep in mind are that alt text should stay under 125 characters and you don't need to add that it is an "image" or "photo". Screen readers know that. Write it like you are describing the image to someone over the phone. Include brand or product names naturally.
Good alt text may be invisible, but it does a lot of work in giving users meaning, context, and understanding your website.
How to run your own accessibility audit
If you missed it, we already recapped our thoughts on our journey of conducting over 60 accessibility audits.
However, if you want to run your own audit, here is where to start. Use these tools in order:
WAVE Web Accessibility Evaluation Tools. If you have access to the browser extension, we recommend using it since it makes the process easier.
*Light text on dark backgrounds may not always be interpreted correctly.
Lighthouse. Run this last. It’s available in Chrome DevTools and through PageSpeed Insights, though it may be a bit less strict than the other tools.
Before you fix anything, decide on a workflow. Two things to consider are who needs to know the results of the audit and how big the site is. If there are stakeholders involved, build a running document that they can view. Screenshot each issue to note the problem and recommended fix. This keeps everyone aligned and creates visibility and accountability. If it is just you or the site is small (5-6 pages), it is fine to scan and fix as you go. For larger sites, document issues first to avoid repeating the process.
Now that you have set up a workflow, work through your list of recommended fixes. Most of these are going to be things like skipped headings, missing alt text, or color contrast failures. For many websites, these are easy "one click" fixes.
Once you make your changes, test your design like a human. Automated tools miss things, so this step catches what they can't.
Tab through every page using only your keyboard. If navigation breaks, keyboard users can't continue. Check focus states/visual feedback. Can you clearly see where you are as you tab?
Now, do a screen reader check. Use free software like VoiceOver (Mac) or NVDA (Windows) to ensure your site works with screen readers.
Rerun everything after you make all of your fixes. Changes can introduce new issues, so a second pass helps confirm everything is still working. Your tool scores can vary, so focus less on scores and more on the overlapping issues both tools present.
In summary
Accessible design aims to provide everyone with an equitable experience.
Understanding screen readers, color contrast, and accessibility audits is just the tip of the iceberg. There is always more to learn and understand regarding making design more accessible for all.