Web Accessibility (WCAG) for UX/UI designers: practical checklist

What is web accessibility for UX/UI designers?

Web accessibility means that a digital product - a website, an app, a service - can be used by as many people as possible, including those with visual, hearing, motor or cognitive disabilities, and also people who use the product in difficult conditions (mobile phone in the sun, poor connection, rushing...). 

From the UX/UI design role, web accessibility is: 

Designing interfaces that are perceived, understood and usable without unnecessary barriers. 

It is not just a legal or technical issue. It is inclusive design, good judgement and professionalism. 

The WCAG (Web Content Accessibility Guidelines) are the international standard that sets out what web content must comply with in order to be accessible. They are the basis on which laws, internal company policies and product audits are based.

Why web accessibility is also a design issue

Common myths that hold designers back

If you come from the world of visual design or junior front-end design, some of these ideas might ring a bell: 

• "Accessibility is a development thing, I go all the way to the screens. " 
• "To apply the WCAG I have to know a technical PDF by heart. " 
• "If I respect accessibility, my designs are going to be ugly or flat. " 
• "That's only looked at by big companies or very formal projects. " 

The problem with these myths is that they leave you out of an important part of your job: 

• As a designer you decide colours, hierarchy, sizes, interaction states, microcopy. 
• Many of those decisions are, in fact, accessibility decisions. 

From "compliance" to designing without leaving anyone out 

When people talk about accessibility they quickly think of laws, fines or reports. But before that, accessibility is about something much simpler: 

Who can use your interface and who is left out. 

Some very everyday examples: 

• A person with low vision zooming in on the browser. 
• A person who navigates with a keyboard because they can't use a mouse. 
• Someone filling in a form from a mobile phone, on the street and in a hurry. 

WCAG is about making your interface perceivable, manageable and understandable in all these real-life situations, not just in the perfect design scenario.

If you stick only to "WCAG compliance", accessibility seems far away. If you see it as designing barrier-free experiences, it becomes a natural part of your work. 

Key decisions made in Figma, not just in code 

Much of what makes a difference is decided by you: 

• Choose the colour palette for backgrounds, text and buttons. 
• Define font sizes and spacing. 
• Design the title hierarchy of a landing page. 
• Think about the focus states of a button or a link. 
• Set up a registration form. 
• Write an error message or the text of a link. 

If you ignore accessibility in these phases, the development area can only patch and often too late. 

A designer who understands accessibility: 

• Improves the experience for people with and without disabilities. 
• Brings quality to the product. 
• Avoids rework and future risks. 
• And earns employability points in teams that value profiles that unite UX, business and compliance. 

It's not about carrying everything on your own, but accepting that you have a very high impact. 

WCAG for designers: the essentials without reading the entire PDF 

WCAG is long and technical, yes. The good news: you don't need to know them by heart to start applying them well in your design role. 

The four WCAG principles explained for design 

The WCAG are organised into four principles. You can use them as a mini-brief for any accessible interface:

1. Perceptible 

 Information and interface components must be perceivable. 

• Text with good contrast and sufficient size. 
• Icons that are accompanied by text or explanation, not "stand alone" if they are important. 
• Videos that have an alternative for those who cannot hear the audio. 

2. Operable 

 The interface must be operable with different methods of interaction. 

• Mouse, keyboard, touch devices, screen readers. 
• Menus that do not depend only on desktop hover. 
• Visible spotlights when navigating with the keyboard. 

3. Understandable 

 Content and operation must be understandable and predictable. 

• Clear button labels. 
• Error messages that explain what is happening and what to do. 
• Consistent behaviour between screens. 

4. Robust 

Content should be interpretable by browsers and assistive technologies. 

• This is more about code, but you decide what is a button, what is a link, what is a title and how you document it in your design system. 

If, while designing, you ask yourself these four questions, how does it look? 

Is it perceived well, is it manageable, is it understood, is it interpreted well? 

you are already thinking about accessibility with WCAG logic. 

Levels A, AA and AAA: what affects you on a day-to-day basis

WCAG is structured into three levels of conformance:

• Level A: basic requirements. Without these, many people cannot even use the site. 
• Level AA: the most common standard. This is the reference level for most products. 
• Level AAA- advanced requirements that may not always apply to all content. 

From the design side, your realistic goal is to align with level AA.You don't need to remember all the criteria, but you do need to internalise things like: 

• Minimum contrasts for text. 
• Forms with clear labels. 
• Consistent and predictable navigation. 

In more mature projects and organisations, train yourself with a complete approach - such as the one you work on in the Official Master's Degree in User Experience for Digital Product and Service Design at UDIT - allows you to understand how these levels are taken to real product, business and service.

Tools that help you from design (without touching code ) 

To check accessibility you don't have to rely on your eye alone: 

• Colour contrast plugins in Figma or Sketch to check if text and background are WCAG AA or AAA compliant. 
• Colour blindness and low vision simulators to see how the interface changes. 
• Browser extensions that analyse pages that are already laid out and point out basic accessibility flaws. 

Your judgement remains paramount, but these tools help you argue with data. 

 Web AccessibilityChecklist for UX/UI  Designers

A web accessibility checklist for your day-to-day work as a UX/UI designer does not replace the WCAG, but it is a practical roadmap for your next projects, portfolio or case studies. 

1. Colours and contrast 

Colour is one of the first design decisions and one of the first sources of accessibility problems. 

Keep in mind: 

Ensure that text-background contrast meets, at a minimum, WCAG AA: 

• Normal text with sufficient contrast. 
• Large text (headings, highlighted figures) with adequate contrast.

Check contrast in key components: 

• Primary and secondary buttons. 
• Form labels. 
• Links within paragraphs. 
• Error and validation messages.
  

Avoid using colour alone to convey information. Combine colour with: 

• Text ("Error in mail field"). 
• Icons (✔ ✖). 
• Border, underline or shape changes. 

Check the interface in light mode and dark mode, if your product has them. 

Colour and contrast checklist: 

• Main text has sufficient contrast with the background. 
• Buttons and links stand out from other elements. 
• Error or success statuses do not depend only on the colour. 
• Check contrast with a tool, not just by eye. 

2. Typography, text size and spacing 

A beautiful but unreadable typography is not a good design. 

Take care of these aspects: 

• Define minimum text sizes that are comfortable on desktop and mobile. For reference, a base of around 16 px on the web is usually a good starting point. 
• Maintain generous line spacing and spacing between paragraphs. Dense blocks get tiring quickly, especially on mobile. 
• Avoid long paragraphs. Introduce subheadings, lists and highlights to make diagonal reading easier. 
• Make sure the text remains legible when the person zooms in on the browser. 

Quick typography checklist: 

• Body text is a comfortable and consistent size. 
• Line spacing and margins make it easy to read, not difficult. 
• There are no excessively long paragraphs with no visual break. 
• Typography reads well on different screen sizes and with zoom. 

3. Structure and visual hierarchy

Visual hierarchy helps both people and assistive technologies (screen readers, for example).

As a designer, arrange: 

• The main title (H1). One per page, clear, descriptive. 
• The subtitles (H2, H3...) with a coherent visual and semantic hierarchy. 
• The sequence of content blocks: what appears before, what after, what depends on what. 
• The alignment of texts and components, which guides the reading flow. 

Quick structure checklist: 

• There is a clear main heading per screen or page. 
• Subheadings follow a logical hierarchy, without strange jumps. 
• The visual order matches the natural reading order. 
• The size of each text reflects its real importance. 

4. Navigation and focus: think keyboard as well

An interface that is only used well with a mouse leaves many people out. 

Keep in mind: 

• The tab order should follow the logical flow of the page. Even if you don't program, you can design and document this order. 
• Focus states should be visible, clear and consistent. If they are removed "for aesthetics", for many people the interface becomes a maze. 
• Interactive components (buttons, links, tabs, toggles) must be easily identifiable as interactive. 

Navigation checklist and focus: 

• I can imagine a clear path through the interface using only keyboard. 
• Each interactive element has a visible focus state. 
• Clickable elements are well distinguishable from non-interactive content. 
• I don't rely on hover effects that don't exist on mobile or keyboard. 

5. Design-accessible forms

Many accessibility issues are concentrated in forms. 

Design forms that help: 

• Use visible labels for fields. The placeholder can complement, but not replace the label. 
• Write clear error messages, linked to the specific field and indicating how to correct it. 
• Mark mandatory fields clearly, not just with colour. 
• Group fields by logical blocks (personal data, shipping, payment) and avoid "wall screens" with too many fields without breathing space. 

Form checklist: 

• Each field has a clear and visible label. 
• Error messages explain what is happening and how to fix it. 
• Mandatory fields are well indicated. 
• The structure of the form guides rather than hinders the task. 

6. Content, microcopy and messages 

Accessibility also comes into play in the way you write. 

Treat text as part of the design: 

• Write clear and specifictexts . Avoid unnecessary technicalities. 
• Use descriptive link texts: "View order details", "Edit shipping address", instead of "Click here". 
• Place instructions before the action, not just after the error. 
• Keep the tone consistent with the brand, always prioritising comprehension. 

Content checklist and microcopy: 

• Text clearly explains what the person can do on each screen. 
• Links and buttons have descriptive labels. 
• Instructions appear when they are needed. 
• I have checked the texts with someone tired or in a hurry in mind. 

7. Images, icons and multimedia 

Not all people perceive images, icons or videos in the same way. 

Keep this in mind: 

• Differentiate between decorative images (add aesthetics) and informativeimages (provide key information). 
• Informative images (graphs, diagrams, diagrams) should have an alternative description that captures their content. 
• Icons that represent important actions (save, delete, share) should be accompanied by text or at least have an accessible label that development can implement. 
• For video, consider subtitles and a brief textual description of the gist. 

Checklist of images and multimedia: 

• I clearly distinguish which images are decorative and which are informative. 
• Informative images are also understood through text. 
• Action icons are supported by text or label. 
• Videos take into account those who cannot hear the audio. 

8. Responsive design and interaction states

Your design doesn't just live on a perfect desktop screen. 

Keep in mind: 

Check how hierarchy rearranges on smaller screens. What works on 1440 px may break on mobile. 

Always design the interaction states of key components: 

• Normal. 
• Hover (if applicable). 
• Focus. 
• Active. 
• Disabled.

Avoid invisible gestures on mobile (clueless swipes). Ensure that there are visible elements that invite action. 

Responsive checklist and interaction: 

• I have checked readability and hierarchy on different screen sizes. 
• Each key component has defined and distinguishable states. 
• I don't rely on hidden gestures that the person has to guess. 
• The interface remains usable with zoom and in different orientations. 

How to integrate this checklist into your process without stifling creativity 

Implementing accessibility at the end is expensive and frustrating. Integrating it from the beginning is more efficient and creative. 

Include accessibility from the briefing 

In the first steps of any project, add some simple questions: 

• Who is going to use this product in reality? 
• In what contexts (mobile phone on the street, office, public transport...)? 
• What would happen if someone couldn't see the colours well, couldn't hear the audio or couldn't use a mouse? 

You don't need a perfect study. Just start visualising different situations.That changes your first wireframes. 

Accessible default components in your design system

One of the best investments you can make as a designer is to create accessible components as standard: 

• Buttons with revised contrasts and defined focus states. 
• Form fields with clear labels, well-measured spacing and thoughtful error messages. 
• Cards, manners and menus with clear hierarchy and logical reading order. 

When your design system integrates these criteria, each new screen starts from a much stronger foundation. 

Quick revisions with tools and people 

You can introduce three light reviews into your process: 

1. On wireframes: review hierarchy, reading order and clarity of flow. 

2. In final UI: check contrast, typography, forms and interaction states. 

3. With prototypes: informal testing with people who don't know the product; where possible, including different needs. 

In advanced contexts, accessibility is integrated into a service research and design strategy. This approach is worked on systematically in the Official Master's Degree in User Experience for the Design of Digital Products and Services at UDIT, where real projects with an impact on product and business are addressed.

Accessibility as a competitive advantage in your UX career

What companies, agencies and startups are looking at today

More and more organisations understand that accessibility is not an "extra", but an indicator of quality and maturity.

When reviewing a design profile, they tend to look at: 

• If the person mentions accessibility in a natural way when explaining their process. 
• If in their deliverables there is revised contrast, focus states, clear forms. 
• If in their portfolio they talk about inclusion, identified barriers and accessibility decisions. 

A designer who can talk about accessibility with criteria conveys that they understand the whole product, not just the visual layer. 

How to demonstrate accessibility in your portfolio and case  studies 

You can incorporate accessibility into your portfolio without turning it into a technical manual: 

• Include an "Accessibility Decisions"section in your projects , where you explain what you reviewed and what you changed. 
• Show before and after screens where you improved contrast, hierarchy or forms. 
• Explain what kind of testing you did (contrast check, keyboard testing, user feedback). 

This differentiates you from portfolios that just show pretty screens without context. 

If you want to go beyond the checklist: get advanced  UX and accessibility training.

This checklist is a good first step. It helps you to bring down to earth a concept that is often perceived as distant: the WCAG applied to everyday design. 

If you want to turn this first approach to accessibility into a core competency of your UX profile, advanced training comes into play. 

The Official Master's Degree in User Experience for the Design of Digital Products and Services at UDIT is an official programme taught in Madrid, developed in collaboration with Telefónica I+D since its origins, precisely to respond to the demand for profiles capable of uniting UX, product, technology and business. 

In this type of programme you don't just work with checklists. You work: 

• Research with users, including people with different abilities. 
• Design of complete services and products, not just single screens. 
• Product strategy, where accessibility impacts on reach, satisfaction and risk. 
• Real projects, which become a portfolio that speaks to more than just aesthetics. 

Accessibility stops being an afterthought and becomes a way of understanding design. 

If this guide has made you look at your interfaces with different eyes, you can start applying this checklist to your next project today. And, if you feel you want to go further and make accessibility one of your strengths as a UX/UI designer, there are training paths like UDIT that can turn that initial curiosity into a solid and strategic specialisation.