Skip to content
中文Let's talk

Insights ·

Website Accessibility: Font Size, Contrast and Keyboard Use

Website accessibility can start with five checks: whether text can be enlarged without breaking the layout, whether text and background contrast enough, whether information relies on color alone, whether the main journey can be completed with a keyboard only, and whether images and forms carry text descriptions. None of these changes the brand's look, but they let more visitors finish reading and using a page. Before launch, walk the main journey twice, once enlarged and once with the keyboard alone.

Visitors to a website are not all people with good eyesight and a mouse in hand. Some are older and cannot read small type. Some are color-blind and cannot tell red from green. Some use a phone in direct sunlight where pale gray text almost disappears. Some have an injured hand and can only use a keyboard. In each case the visitor is willing to read; the page just did not leave them a way in.

Accessibility means taking these situations into account during design and development. This article covers five checks to run before a website goes live.

1. Font size and line spacing: still readable when enlarged

Start with body text. On a phone, body text should be comfortable to read through a paragraph without zooming. When a visitor enlarges the page, the layout should hold: text should not overlap, buttons should not be pushed off screen, and lines that must be dragged sideways to finish reading should be avoided.

Leave enough line spacing too. A block of small type packed together is hard on everyone and harder on people with weaker eyesight. Separate headings from body text in size so visitors can tell at a glance what is a title, what is body and what is a note.

2. Contrast: text must stand apart from the background

Contrast is the difference in lightness between text color and background color. Light gray on white, or colored text on a colored block, looks fine in a design file and becomes hard to read on a phone in bright sunlight.

Keep enough lightness difference between the background and the text in body copy, links and buttons. The Web Content Accessibility Guidelines (WCAG) give specific contrast ratios for body text and large text, so check each pair with a contrast checker instead of judging by eye. Before putting a brand color on text, run this check; if the brand color is not dark enough, use it for blocks and decoration and choose a darker color for the text. How to write type and color into a brand guide is covered in How to set website fonts and colors so they match the brand guidelines.

3. Do not rely on color alone

"Red means error, green means success" gives color-blind visitors no way to tell the difference. Pair the same information with a second cue:

  • When a form field is wrong, besides turning the border red, write a line saying what is wrong and how to fix it;
  • Links should differ by more than color, for example an underline;
  • In charts, tell lines apart by line style or direct labels as well as color.

4. Keyboard use: can the main journey be completed without a mouse?

Put the mouse aside and walk the main journey from the top of the page using only the Tab and Enter keys: open the menu, enter a section, fill in and submit the contact form. Look at four things:

  • Is the order sensible? Focus should move in the same order as the page reads, top to bottom and left to right, not jump back and forth.
  • Can you see the focus? Wherever focus lands on a button or link, the page should show a clear outline. Do not remove it for looks.
  • Is there anywhere you cannot leave? After a dialog or drop-down opens, it must be closable by keyboard, and focus must not get stuck inside.
  • Can the main functions be reached? The most-used entries, such as the menu, search and the contact form, must all be openable and operable by keyboard.

5. Images, video and forms: give a text version to people who cannot see them

When an image carries information, give it a short text description so a screen reader knows what the image is about. Purely decorative images need none. Provide captions for video where you can, so visitors can follow in a quiet place or when they cannot hear well.

Every form field needs a clear text label. Do not rely on a gray hint inside the box that vanishes once you type. Mark required fields, and when there is an error, say which field it is.

Also respect the system's "reduce motion" setting when a visitor has turned it on. The approach is covered in How to use website motion without slowing pages.

Checking before launch

Take a checklist and run through the five items:

  1. Enlarge the page and see whether the layout falls apart;
  2. Check the contrast of each piece of text and each button against the design file;
  3. Switch the page to black and white and see whether the information can still be told apart;
  4. Using only the keyboard, complete the journey of opening the menu, browsing content and submitting the form;
  5. Check that images with information have text descriptions and that forms have clear labels.

Rank what you find by how many visitors it affects and how big the change is, and fix the main journey first.

Summary

For website accessibility, check five things first: whether font size and line spacing still read when enlarged, whether text and background contrast enough, whether information relies on color alone, whether the main journey can be completed with the keyboard only, and whether images and forms have text descriptions. None of these changes the brand's look, and all of them help more visitors finish using the page.

FIM's digital experience service covers strategy, design and development for websites, mini programs, apps and H5.

← All articles