Accessibility in visual design

How to take accessibility into consideration in visual design?

This page features a list of visual design aspects that affect accessibility.

Page content layout

  • Are the contents of the page divided into clear, logical wholes that can be presented with HTML structure elements?
  • Is the order of the contents of the page logical and visually easy to perceive on differently sized screens?
  • Is the distance between elements sufficient to separate them from one another?
  • Is the distance between elements that belong together sufficiently short to indicate that the contents belong together?
  • Are content elements of different levels of meaning visually distinguishable as well?
  • Does the placement of elements conform to common and conventional design solutions?
  • Is the placement of elements consistent on all pages?

Colours and contrasts

  • Are the colours used clear and distinguishable (from one another)?
  • The colours are not glaringly intense.
  • The colours can be distinguished from one another in different forms of colour blindness as well.
  • The contrast between foreground and background colours is sufficient.
  • Links are separated from the rest of the text visually as well, not merely with colour.
  • The active element (focus) is visually highlighted when the website is used with a keyboard.
  • No information is indicated with colour alone.


  • The font used is clear and easy to read.
  • The font size used is large enough.
  • The row length of text paragraphs must not exceed 80 characters.
  • The leading is at least 1.5 times the font size.
  • The paragraph spacing is at least twice the font size – the contrast between the text and the background colours is at least 4.5 for normal text and 3 for large text.
  • The text is aligned to the left side – all HTML title levels are taken into account in the design.

Images and icons

  • If an image has a caption text, it is presented clearly in connection with the image.
  • Any decorative images and icons are useful and informative.
  • The images selected serve their purpose and are functional in terms of both their content and their colour scheme (for colour blind people as well, if possible).


  • All form fields have a title text that is always visible.
  • The titles of form fields are descriptive of the contents of the input fields.
  • The distance between the title and the input field indicates that they belong together.
  • Form buttons are placed clearly in connection with the form or function.
  • The error notifications of forms are visually distinguishable and the erroneous information is highlighted sufficiently.
  • The notification following a successfully submitted form must be distinguishable and clearly highlighted.