...
When using fonts, you want to use fonts that are easily readable and not distracting or fancy. Fonts like Times New Roman, Verdana and Georgia are examples of good fonts to use. It is not recommended to use fonts like Pacifico, Caveat, or Amatic SC.
...
| Warning |
|---|
While these fonts look more interesting, they are very hard to read for some users. |
...
 |
| Tip |
|---|
These fonts are much easier for people to read.  |
Section 1.2: Font Size
To keep things simple and easy to read, make sure the font is over 12 points in size.
...
Screen readers do not recognize capitalized letters, so there is no point to relying on capital letters to emphasize text.
...
| Warning |
|---|
This example shows capital letters that are not needed. Screen readers will not emphasize the text even when it is in all caps. |
...
 |
| Tip |
|---|
This example shows a new way to show the important content. Screen readers will read the (covered) label and tell the reader that it will be on the test.  |
| Tip |
|---|
Only use capital letters to show the IMPORTANT text. |
...
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.6: NVDA Settings for Text
...
Example of using symbols…
...
| Warning |
|---|
This example only shows the symbols and fails to explain to the readers what the symbols mean. Screen readers will not read the symbol without an additional queue. |
...
 |
| 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
...
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.
...
Rule 1: 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.
...
 |
Rule 2: 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.  |
Rule 3: 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.  |
Related articles
| Filter by label (Content by label) | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|