WCAG for Design

A website must also be accessible for people with color vision deficiencies. If information is conveyed only through color (for example, a green dot = active, red = inactive), additional graphical elements or text must be provided.

 

All graphical elements that are interactive (e.g., icon buttons) or important for understanding must have a minimum contrast of 3:1 with the background.

 

All text, including body text, labels, and placeholders, must have sufficient contrast with the background. The minimum contrast ratio is 4.5:1 for text smaller than 24px and 3:1 for text 24px or larger.

 

Important information shouldn’t be presented solely as text within images. Users can’t adjust this text to their needs, and assistive technologies cannot read it.

 

Automatically starting animations lasting longer than 5 seconds must be pausable, stoppable, or able to be hidden.

 

A website should not include elements that flash more than three times per second, such as rapidly blinking GIFs or flickering videos. Flashing elements that are small enough (around 148×148 px) are considered acceptable.

 

Users must be able to navigate a website’s content using the keyboard (Tab key) in a logical order. The tab order should generally follow the visual layout.

 

Subpages of your website must be accessible in multiple ways. In addition to navigation menus, provide options such as a search function or a sitemap.

 

Interactive elements, such as buttons and links, must have a visible focus state. A recommended approach is a two-colored focus outline, with white and black lines, ensuring it is clearly visible on all backgrounds.

 

Interactive elements, such as buttons or links, must have a clickable area of at least 24 × 24 px that does not overlap with the clickable area of other elements.

 

The navigation elements on your website, such as menus, breadcrumbs, and search, must consistently be located in the same place to make navigation between subpages easier.

 

If a website provides help, it should be easy to find and consistently located on all subpages. Help can include elements such as chatbot or simple contact information in the footer.

 

If errors occur on a website, they should be easy to identify and not indicated by color alone. Text describing the error must also be provided.

 

Form fields should include a clearly visible label, ideally using the <label> tag. This label should always remain visible and not disappear. Placeholder text by itself is not an adequate substitute for a proper label.

 

Error messages should be as specific as possible, providing clear guidance to help users understand and fix the issue.

 

To prevent errors during important interactions or transactions, users should have the opportunity to review their data before sending. Alternatively, they should be able to confirm the action again or have the option to undo it.