Appearance
Text and Links
These techniques help to ensure that the page is readable to everyone.
Accessibility Checklist
- Have you checked the contrast for each colour combination?
- Can the text be resized up to 200%?
For links:
- Does the text content of the element describe the purpose of the link?
- If the link is an image without any text, does the alt text describe the purpose of the link?
- If you repeat the link text, does it always go to the same place?
Contrast
Check the font size of your text and ensure you have the correct contrast against the background. You can use a contrast checker to find out what contrast your colours have, then compare it to the table below to find what result you need to match.
You will need to check the contrast for every combination of font and background colours.
| Font Size | Bolded | Contrast Required |
|---|---|---|
| less than 19px | Y | 4.5:1 |
| 19px or greater | Y | 3:1 |
| less than 24px | N | 4.5:1 |
| 24px or greater | N | 3:1 |
TIP
If you are struggling to increase the contrast; you can use bold text, outlines, or larger text sizes to help.
Link Purpose
Descriptive link text provides the user with more context as to the next destination and allows them to decide if they want to follow the link. Try not to use the same link text for multiple links, especially if they go to different places as this will confuse the users of your website.
You should avoid using phrases such as "read more" or "click here" without providing additional context for your viewers. This is usually done by embedding the link within a paragraph that provides that additional information.
Example
html
<a href="ingredients.html">The ingredients for this recipe</a>
<p>This recipe has a lot of ingredients that you can find <a href="ingredients.html">here</a>.</p>If your link is an image, the alt text for the image should describe the link.
Example
html
<a href="ingredients.html">
<img src="ingredients.jpg" alt="The ingredients for this recipe" />
</a>Resize
You must ensure that the text can be resized and allow an increase of up to 200%. This is to help users with visual impairments to read the content of your website.
The text being resized must not end up hidden or cause other content to become hidden, so the easiest way to achieve this is to avoid using set pixel values when defining font-sizes. Instead, you can use relative values to ensure that the text can be resized.
You can either use em values to make the text relative to the parent contain or rem values to be relative to the root page.
Example
css
p {
font-size: 100%;
}Example
css
p {
font-size: 1rem;
}Associated WCAG Criteria
1.4.3 Contrast (Minimum) (Level AA)
Text should have a minimum contrast ratio of 4.5:1, or 3:1 for larger text. See the WCAG 2.2 Guidelines for Contrast (Minimum) for more information.
These examples used the following techniques:
See the WCAG documentation for Other Techniques for Contrast (Minimum)
1.4.4 Resize Text (Level AA)
All text, with the exception of captions and text on images, can be resized up to 200% without causing a loss of functionality or content. See the WCAG 2.2 Guidelines for Resize Text for more information.
These examples used the following techniques:
See the WCAG documentation for Other Techniques for Resize Text
2.4.4 Link Purpose (In Context) (Level A)
The purpose of each link can be understood by reading the text of the link. See the WCAG 2.2 Guidelines for Link Purpose in Context for more information.
These examples used the following techniques:
See the WCAG documentation for Other Techniques for Link Purpose in Context