Distinguishable is one of the key guidelines in the Perceivability principle of the Web Content Accessibility Guidelines (WCAG). It means content should be easy to see and hear. This guideline ensures that text, images, and audio don’t blend into the background or become hard to understand or read.
Following these rules makes websites better for everyone, not just people with disabilities. Think about trying to read a menu on your phone in bright sunlight or struggling to hear a video in a noisy café. When content is clear and easy to access, all users benefit.
What does “Distinguishable” mean, how can you apply it.
Do: Use Clear Contrast
Contrast is the difference between text and its background. If the colours are too similar, the text can be hard to read. The WCAG recommends:
Regular text should have a contrast ratio of at least 4.5:1 against its background.
Large text (18-point or 14-point bold) should have at least 3:1 contrast. We encourage everyone to use 4.5:1 here as well.
Don’t: Use light grey text on a white background or bright colours that clash.
Example of Good Contrast:
Black text on a white background
Dark blue text on a light grey background
Example of Poor Contrast:
Yellow text on a white background
Light grey text on a pastel-coloured background
Why this helps everyone:
Older adults with declining vision can read the text more easily.
Mobile users can still see the text even in bright sunlight.
People with low vision or colour blindness won’t struggle to read important information.
Do: Choose Readable Fonts
Some fonts are easier to read than others. Simple, sans-serif fonts (like Tahoma or Verdana) are clearer on screens than fancy or decorative fonts.
Don’t: Use script or decorative fonts for body text. These may look stylish but can be difficult to read, especially for people with dyslexia or vision impairments.
Why this helps everyone:
People with dyslexia find simple fonts easier to process.
Children and new readers can recognize letters more easily.
Fast readers can skim content without struggling to decipher words.
Do: Use Proper Spacing
Spacing between letters, words, and lines makes text easier to read. Line spacing should be at least 1.5 times the font size, and paragraph spacing should be at least twice the font size.
Don’t: Cram text too closely together or make lines too wide.
Why this helps everyone:
People with reading difficulties can track text more easily.
Tired readers can focus better without words blending together.
Users reading long articles can absorb information without feeling overwhelmed.
What does “Distinguishable” mean, how can you apply it.
Make Text Easy To Read
Do: Use Clear Contrast
Contrast is the difference between text and its background. If the colours are too similar, the text can be hard to read. The WCAG recommends:
Regular text should have a contrast ratio of at least 4.5:1 against its background.
Large text (18-point or 14-point bold) should have at least 3:1 contrast. We encourage everyone to use 4.5:1 here as well.
Don’t: Use light grey text on a white background or bright colours that clash.
Example of Good Contrast:
Black text on a white background
Dark blue text on a light grey background
Example of Poor Contrast:
Yellow text on a white background
Light grey text on a pastel-coloured background
Why this helps everyone:
Older adults with declining vision can read the text more easily.
Mobile users can still see the text even in bright sunlight.
People with low vision or colour blindness won’t struggle to read important information.
Do: Choose Readable Fonts
Some fonts are easier to read than others. Simple, sans-serif fonts (like Tahoma or Verdana) are clearer on screens than fancy or decorative fonts.
Don’t: Use script or decorative fonts for body text. These may look stylish but can be difficult to read, especially for people with dyslexia or vision impairments.
Why this helps everyone:
People with dyslexia find simple fonts easier to process.
Children and new readers can recognize letters more easily.
Fast readers can skim content without struggling to decipher words.
Do: Use Proper Spacing
Spacing between letters, words, and lines makes text easier to read. Line spacing should be at least 1.5 times the font size, and paragraph spacing should be at least twice the font size.
Don’t: Cram text too closely together or make lines too wide.
Why this helps everyone:
People with reading difficulties can track text more easily.
Tired readers can focus better without words blending together.
Users reading long articles can absorb information without feeling overwhelmed.
Help Users Separate Background from Foreground
Do: Use Clear Visual Elements
Important elements (like buttons, links, and headings) should stand out. Use bold text, underlines for links, or colour contrast to highlight them.
Don’t: Rely only on colour to show differences. Some people are colourblind and may not see the difference.
Why this helps everyone:
Colourblind users can still understand important information.
People scanning a page quickly can easily find buttons and links.
Do: Allow Users to Change Settings
Some people need to adjust text size or colours to read comfortably. Make sure your website works with browser zoom and high contrast settings. Test your website and document by zooming to a minimum of 200%. If it is still easily readable with the contents of the page not being hidden it is good.
Don’t: Disable zooming or resizing.
Why this helps everyone:
Older adults or people with low vision can enlarge text to read more comfortably.
Users on small screens (like mobile phones) can adjust text to fit their needs.
Make Audio and Video Easy to Hear
Do: Add Captions to Videos
Captions (text versions of speech and sound) help people who are deaf or hard of hearing. They also help users in noisy environments or those who prefer to read along.
Don’t: Use auto-generated captions without checking them.
Why this helps everyone:
People in noisy places (like on public transport) can read instead of listen.
Users learning a new language can follow along with both text and audio.
Do: Add Audio Descriptions to Videos
Audio descriptions provide spoken explanations of what is happening on-screen. This is especially useful for people who are blind or have low vision.
Don’t: Assume that everyone can see the visual details in a video.
Why this helps everyone:
- Blind and visually impaired users can understand key actions and visual cues.
- People multitasking (such as listening to a video while driving) can benefit from extra context.
Do: Provide Transcripts for Audio
A transcript is a written version of a podcast or other audio content.
Don’t: Only provide audio without a text alternative.
Why this helps everyone:
People who prefer reading can quickly scan the content instead of listening.
Users in quiet environments (like libraries) can still access the content.
Background music or sounds in videos should be quiet and should not interfere with speech.
Don’t: Use auto playing background music without a way to turn it off. It is preferable not to have videos auto play. Allow the user to control what they want to hear and see when they want to hear and see it.
Why this helps everyone:
People with sensory sensitivities won’t feel overwhelmed.
All users can focus on the main message without distractions.
Make Links and Buttons Stand Out
Do: Use Clear Labels
Links and buttons should have descriptive labels that tell users what will happen when they click. Ensure that all labels are programmatically linked to the input field. User the “for” attribute to link them.
Don’t: Use vague text like “Click here”, “Learn More” or “Read more.”
Why this helps everyone:
- People using screen readers (software that reads text aloud) or other assistive technologies understand where the link leads.
- Users scanning a page quickly can find what they need faster.
Do: Use More Than Just Colour for Links
Links should stand out with underline or bold text in addition to colour.
Don’t: Only change the colour of links.
Why this helps everyone:
Users with colour blindness can still tell links apart.
Mobile users can spot links more easily on small screens.
Moving Forward
Making content easy to see and hear improves accessibility for:
- People with low vision or colour blindness who need high contrast.
- Users who are deaf or hard of hearing who need captions and transcripts.
- People with reading difficulties or dyslexia who benefit from clear fonts and spacing.
- Older adults who need larger text and clearer visuals.
- Mobile users who need readable content in bright sunlight.
- People in noisy or quiet environments who need text alternatives for audio.
When websites follow Distinguishable guidelines, they become easier to use for everyone. Even if you don’t have a disability, these features improve readability, navigation, and overall user experience.