| Table of Contents | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
\uD83D\uDCD8 Instructions
...
Go to the Main Tool Bar.
Select the font size button and select the font size you want.
Section 1.3: Color Contrast
When typing in text you want to consider the color contrast between the text and the background. For small text (under size 18), a good contrast ratio to aim for is 4.5:1 or higher. For bigger text (over size 18) a good contrast ratio is 3:1 or higher. Black text on a white background or 21:1 is the highest and best ratio you could have.
To change the color of your font,
Go to the Main Tool Bar.
Select the text color button and select a color you want from the grid.
To see if your color provides a strong color contrast ratio, use the Adobe Color Contrast Analyzer. If you can get all of your previews to pass, then you can use that font color.
...
| Warning |
|---|
The text examples have a very low color contrast ratio of 1.25:1 and 1.07:1, which is well below the standard. |
...
| Tip |
|---|
The text examples have a color contrast ratio that is over 4.5:1. |
As you can see in the example, good color contrast makes the text easier to read for the viewer.
Section 1.4: Using Color to Convey Meaning
When using color in a project to convey information, you should include a text alternative.
...
| Warning |
|---|
This example only has color conveying meaning. If Dan was colorblind for red and green colors, how would he have known if he made the team? |
...
| Tip |
|---|
This example shows two ways to indicate that Dan made the team. The first is that his name is colored red, and there is (callback) next to his name. Now Dan can easily read the list and know he made it to the Olympic Team. |
Table Example: The text alternative must mean the same thing as the color.
...
| Warning |
|---|
In this table, only the red section is accurately labeled. Yellow and Green have no indication on what they mean for a reader who struggles to see the difference in color. |
...
| Tip |
|---|
In this table, all three sections are accurately labeled. Now all readers will be able to tell what each section means and their color. |
This last example shows the importance of using multiple factors of indication in a Pie Chart.
...
| Warning |
|---|
In this pie chart, we only have lines to point out which sport belongs to each section. For people who have visual disabilities, they may struggle seeing the line. Another thing to note, is the percentage labels are light gray, so they have a very low color contrast ratio. |
...
| Tip |
|---|
In this pie chart, we have added a second percentage label inside the slices. Now the data is much easier to see. |
Section 1.3: Capitalization
Screen readers do not recognize capitalized letters, so there is no point to relying on capital letters to emphasize text.
...
| Tip |
|---|
Only use capital letters to show the IMPORTANT text. |
Section 1.
...
4: Bold, Italic, Strikethrough and Underlined Text
Screen readers by default do not recognize text that is bold, italic, strikethrough or underlined. The text will be read as normal text. There are settings available in NVDA to make the text be read as bold, italic or underlined, but very few people change these settings. A good rule is to use bold text, italics, underlined, or strikethrough text sparingly.
...
| Tip |
|---|
This example uses bold, italics, and underlining text sparingly. Only change the important words. This will make the content easier to read. |
Section 1.
...
5: Highlighting
When highlighting, it is important to be sure it is not the only way to convey meaning. Screen readers will not recognize the highlighted text as highlighted text. So it will only read it as normal text. This will be confusing to someone with visual disabilities.
...
| Tip |
|---|
This example gives a second queue for the screen reader to read. This will help a reader understand the meaning and context behind a highlighted text. |
Section 1.
...
6: NVDA Settings for Text
When you use text that is bold, italic, strikethrough, or underlined, be sure to modify the settings in the screen readers. This will allow the screen reader to tell the reader of any bold, italic, strikethrough, or underlined text. To change the settings,
In NVDA, go to the Preference Tab, then click Document Formatting.
Select the Font Attributes check box in the pop up box. Click Apply in the bottom right corner.
In JAWS, you can examine the font attributes at the cursor, including whether or not there is strikethrough, by pressing INSERT + F.
Section 1.9: Background Colors
Background colors are fine to use, as long as they have a good contrast ratio. It is also a good idea to avoid strong background gradients or patterns. They can make the text very hard to read and are usually very distracting.
...
| Warning |
|---|
This example has a background and text that is too dark and do not have a good contrast ratio. The brown background is also very distracting to readers. |
...
| Tip |
|---|
This example has a good color contrast ratio. It is also very easy to read and is not distracting to readers. |
...
| Warning |
|---|
This example has a very distracting background and is very hard to read. The color contrast ratio is also very low. |
...
| Tip |
|---|
This example has a more subtle background and a good color contrast ratio. This one is much easier to read and wont overwhelm the readers. |
...
To make your screen reader read the document, go to your document and click on the Menu Search box in the Main Tool Bar and type in Accessibility.
In the Accessibility Support pop-up box, check “Turn on screen reader support.” and click OK. An Accessibility Tab will appear in the Main Tool Bar. Now when your screen reader is active, it can read your document.
Section 1.7: Symbols and Special Characters
You can use many different symbols and special characters. However, only 17 characters can be read by most screen readers. The list of symbols and special characters that can be read are as follows.
The AT Symbol.
Ampersand.
Slash
Copyright
Registered
Trademark
Paragraph
US Dollar
Euro
British Pound
Japanese Yen
Percent
Bullet
Degrees
One Half
One Fourth
Three Fourths
If you use other symbols or special characters, they must always be shown in regular text as well. This must be done so the screen readers will read the symbol properly to the reader.
...
| Tip |
|---|
This example shows two ways to type in information and give the same outcomes for readers. You can just type it in text. Another way is to type the symbols, then type in the text in parenthesis. Both ways give readers and screen readers an easier understanding of the information provided. |
Section 1.
...
8:
...
Color Contrast
When using acronyms typing in text you want to be sure that you type out the whole name in parenthesis after giving the acronym. After you have typed in the acronym and full name, you may continue to use the acronym without typing the full name for the rest of the document. This is because the reader will now know what you are referring to.
| Tip |
|---|
Example: WCAG 2.1 (Web Accessibility Guidelines Version 2.1) |
...
consider the color contrast between the text and the background. For small text (under size 18), a good contrast ratio to aim for is 4.5:1 or higher. For bigger text (over size 18) a good contrast ratio is 3:1 or higher. Black text on a white background or 21:1 is the highest and best ratio you could have.
To change the color of your font,
Go to the Main Tool Bar.
Select the text color button and select a color you want from the grid.
To see if your color provides a strong color contrast ratio, use the Adobe Color Contrast Analyzer. If you can get all of your previews to pass, then you can use that font color.
...
| Warning |
|---|
The text examples have a very low color contrast ratio of 1.25:1 and 1.07:1, which is well below the standard. |
...
| Tip |
|---|
The text examples have a color contrast ratio that is over 4.5:1. |
As you can see in the example, good color contrast makes the text easier to read for the viewer.
Section 1.9: Using Color to Convey Meaning
When using color in a project to convey information, you should include a text alternative.
...
| Warning |
|---|
This example only has color conveying meaning. If Dan was colorblind for red and green colors, how would he have known if he made the team? |
...
| Tip |
|---|
This example shows two ways to indicate that Dan made the team. The first is that his name is colored red, and there is (callback) next to his name. Now Dan can easily read the list and know he made it to the Olympic Team. |
Table Example: The text alternative must mean the same thing as the color.
...
| Warning |
|---|
In this table, only the red section is accurately labeled. Yellow and Green have no indication on what they mean for a reader who struggles to see the difference in color. |
...
| Tip |
|---|
In this table, all three sections are accurately labeled. Now all readers will be able to tell what each section means and their color. |
This last example shows the importance of using multiple factors of indication in a Pie Chart.
...
| Warning |
|---|
In this pie chart, we only have lines to point out which sport belongs to each section. For people who have visual disabilities, they may struggle seeing the line. Another thing to note, is the percentage labels are light gray, so they have a very low color contrast ratio. |
...
| Tip |
|---|
In this pie chart, we have added a second percentage label inside the slices. Now the data is much easier to see. |
Section 1.10: Background Colors
Background colors are fine to use, as long as they have a good contrast ratio. It is also a good idea to avoid strong background gradients or patterns. They can make the text very hard to read and are usually very distracting.
...
| Warning |
|---|
This example has a background and text that is too dark and do not have a good contrast ratio. The brown background is also very distracting to readers. |
...
| Tip |
|---|
This example has a good color contrast ratio. It is also very easy to read and is not distracting to readers. |
...
| Warning |
|---|
This example has a very distracting background and is very hard to read. The color contrast ratio is also very low. |
...
| Tip |
|---|
This example has a more subtle background and a good color contrast ratio. This one is much easier to read and wont overwhelm the readers. |
\uD83D\uDCCB Related articles
...