...
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.5: 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.
...
6: Bold, Italic, Strikethrough and Underlined Text
Screen readers 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.
...
7: 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.
...
| Warning |
|---|
This example only highlights the text and does not provide an additional queue for a screen reader to tell the reader that the highlighted text means something. |
...
| 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.8: 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.
...
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.
...
| Warning |
|---|
This example only highlights the text and does not provide an additional queue for a screen reader to tell the reader that the highlighted text means something. |
...
| 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. |
...
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.
...
| 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. |
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: Symbols and Special Characters
...