- \r\n \t
- Accessible Font<\/a><\/li>\r\n \t
- Accessible Colour<\/a><\/li>\r\n<\/ul>\r\n
<\/a>Accessible Font<\/h2>\r\nText content needs to be readable. For people with low-vision or dyslexia, good font choices can make content easier to read. Consider the following passage:\r\n
\r\n\r\n\r\n[caption id=\"attachment_8743\" align=\"alignnone\" width=\"830\"]![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/DyslexiaSimPressbooks.gif\")
Animation demonstrating what text may look like to someone with dyslexia[\/caption]\r\n\r\n<\/div>\r\n<\/div>\r\nConsider how much more difficult that is based on font choice:\r\n\r\n[caption id=\"attachment_9613\" align=\"alignnone\" width=\"873\"]![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/11\/DyslexiaGIF3.gif\")
Animation demonstrating what italic text may look like to someone with dyslexia[\/caption]\r\nConsult footnote[footnote]<\/p>\r\n\"Dyslexia<\/strong>, previously known as\u00a0word blindness<\/strong>, is a\u00a0learning disability ('learning difficulty' in the UK) that affects either reading or writing.\r\n\r\nDifferent people are affected to different degrees.<\/sup>\u00a0Problems may include difficulties in\u00a0spelling\u00a0words, reading quickly,\u00a0writing words, \"sounding out\" words\u00a0in the head, pronouncing words when reading aloud and understanding what one reads.\u00a0Often these difficulties are first noticed at school.<\/sup>\u00a0The difficulties are involuntary, and people with this disorder have a normal desire to\u00a0learn.\"\r\n\r\nDyslexia - Wikipedia<\/a>\r\n\r\n\u201cThe one argument for accessibility that doesn\u2019t get made nearly often enough is how extraordinarily better it makes some people\u2019s lives. How many opportunities do we have to dramatically improve people\u2019s lives just by doing our job a little better?\u201d<\/strong>\r\n\r\nSteve Krug,\u00a0Don\u2019t Make Me Think, Revisited<\/a><\/em>\r\n\r\n[\/footnote] for an unmodified version of this text.\r\n\r\nThe above animation is a brief simulation of dyslexia. Creating accessible content, including choosing readable fonts, have a great impact on people with dyslexia.\r\n
Font Better Practices<\/h3>\r\nSans-serif fonts in sizes between 12 and 14 points are shown to be the most readable styles (Morrell & Echt, 1997; Lin et al., 2013).\r\n\r\nPrefer sans-serif and basic serifs:\r\n
- \r\n \t
- Sans-serif fonts such as Aptos, Arial, Calibri, Helvetica, or Montserrat are good choices.<\/li>\r\n \t
- Simple serif fonts, such as Cambria, Sitka, and Times New Roman are readable.<\/li>\r\n \t
- Avoid decorative fonts with elaborate serifs.<\/li>\r\n<\/ul>\r\n[caption id=\"attachment_8769\" align=\"alignnone\" width=\"1920\"]
![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/11\/serifs-1.png\")
Image of the letter a in upper and lower case in sans-serif and serif font styles. The serifs\u2014small ticks at the end of character strokes\u2014are circled in red.[\/caption]\r\n\r\nUse font size 12 or larger for documents, 18 or larger for presentations, and 16 pixels or larger on webpages.\r\n\r\nLeft-align text for languages that read left to right. Avoid justified alignment as that may create \"rivers of white space\" which are<\/span>\u00a0gaps that appear to run through a paragraph due to coincidental alignment of spaces<\/span><\/span> and excessive blocks of white space when zoomed in.\r\n\r\nConsider spacing.\r\n- \r\n \t
- Line height or line spacing must be at least 1.5 times the font size.<\/li>\r\n \t
- Spacing after a paragraph must be at least 2 times the font size.<\/li>\r\n \t
- Letter spacing must be at least 0.12 times the font size.<\/li>\r\n \t
- Word spacing must be at least 0.16 times the font size.<\/li>\r\n<\/ul>\r\nAvoid excessive use of italics, long blocks of all capitals.\r\n\r\nDo not use images of text and avoid putting text over images.\r\n
More about Font<\/h3>\r\n
<\/code>\r\n\r\nFont choices are part of good design and make content easier to read for everyone.\r\n\r\nA simple test for your font choices is the Il1 test to root out imposters<\/em>. When choosing a font, type a capital i, a lowercase L, and the number 1 beside each other with no spaces: Il1.[footnote]Admittedly, the default font of Pressbooks, Montserrat, is not an excellent example of best practice.[\/footnote] A good font will have obvious distinction between those characters. A harder to read font will have imposter characters that look similar and can easily be mistaken for one another. Choosing a readable font helps avoid character ambiguity which may cause confusion for readers.\r\n\r\nConsider these examples:\r\n\r\n[columns count=3]Poor (Alata)\r\n![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/11\/Screenshot-2023-04-03-at-16.11.48.png\")
\r\n\r\nAcceptable (Roboto)\r\n![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/11\/Screenshot-2023-04-03-at-16.11.34.png\")
\r\n\r\nExcellent (Noto Sans)\r\n![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/11\/Screenshot-2023-04-03-at-16.12.17.png\")
\r\n\r\n[\/columns]\r\n\r\nThe Il1 test is not the only factor in choosing the right font, but is a good quick test of font legibility.\r\n<\/a>Accessible Colour<\/h2>\r\nText must have a [pb_glossary id=\"1289\"]contrast ratio[\/pb_glossary] of at least 4.5:1 against the background colour. For example, black on white is 21:1 and orange on white is 3.37:1.\r\n\r\nAdditionally, do not use visual styling, including colour, alone to emphasize content.\r\n\r\nThese best practices are essential for readers that are colour blind, but benefit users printing in black and white, viewing in the sun with screen glare, custom contrast settings, or other vision impairments.\r\n\r\nThe next chapter<\/a> examines colour in further detail.\r\n
Works Cited<\/h2>\r\n
Krug, Steve.\u00a0Don\u2019t Make Me Think, Revisited\u202f: A Common Sense Approach to Web Usability<\/i><\/a>. 3rd ed., New Riders, 2014.<\/div>\r\nLin, H., Wu, F.-G., & Cheng, Y.-Y.\u00a0Legibility and visual fatigue affected by text direction, screen size and character size on color LCD e-reader<\/a>.\u00a0Displays<\/em>, vol. 34, no. 1, pp. 49\u201358, 2013.<\/div>\r\nMorrell, R. W., & Echt, K. V. (1997).\u00a0Designing Written Instructions for Older Adults: Learning to Use Computers<\/a>.\u00a0Handbook of Human Factors and the Older Adult<\/em>, vol. 14, pp. 335\u2013361, 1997.<\/div>","rendered":"![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/11\/My-project-1-9-300x300.png\")
<\/p>\nHow content appears is an important influence on the accessibility of your content. Consider:<\/p>\n
- \n
- Font choices<\/li>\n
- Use of colour<\/li>\n<\/ul>\n
Accessible appearance helps those with vision impairments, cognitive disabilities, or a colour vision deficiency. However, like many accessible design practices, following these best practices will benefit everyone.<\/p>\n
On this page:<\/strong><\/p>\n
- \n
- Accessible Font<\/a><\/li>\n
- Accessible Colour<\/a><\/li>\n<\/ul>\n
<\/a>Accessible Font<\/h2>\n
Text content needs to be readable. For people with low-vision or dyslexia, good font choices can make content easier to read. Consider the following passage:<\/p>\n
\n\nAnimation demonstrating what text may look like to someone with dyslexia<\/figcaption><\/figure>\n<\/div>\n<\/div>\n Consider how much more difficult that is based on font choice:<\/p>\n
Animation demonstrating what italic text may look like to someone with dyslexia<\/figcaption><\/figure>\n Consult footnote[1]<\/sup><\/a> for an unmodified version of this text.<\/p>\n
The above animation is a brief simulation of dyslexia. Creating accessible content, including choosing readable fonts, have a great impact on people with dyslexia.<\/p>\n
Font Better Practices<\/h3>\n
Sans-serif fonts in sizes between 12 and 14 points are shown to be the most readable styles (Morrell & Echt, 1997; Lin et al., 2013).<\/p>\n
Prefer sans-serif and basic serifs:<\/p>\n
- \n
- Sans-serif fonts such as Aptos, Arial, Calibri, Helvetica, or Montserrat are good choices.<\/li>\n
- Simple serif fonts, such as Cambria, Sitka, and Times New Roman are readable.<\/li>\n
- Avoid decorative fonts with elaborate serifs.<\/li>\n<\/ul>\n
Image of the letter a in upper and lower case in sans-serif and serif font styles. The serifs\u2014small ticks at the end of character strokes\u2014are circled in red.<\/figcaption><\/figure>\n Use font size 12 or larger for documents, 18 or larger for presentations, and 16 pixels or larger on webpages.<\/p>\n
Left-align text for languages that read left to right. Avoid justified alignment as that may create “rivers of white space” which are<\/span>\u00a0gaps that appear to run through a paragraph due to coincidental alignment of spaces<\/span><\/span> and excessive blocks of white space when zoomed in.<\/p>\n
Consider spacing.<\/p>\n
- \n
- Line height or line spacing must be at least 1.5 times the font size.<\/li>\n
- Spacing after a paragraph must be at least 2 times the font size.<\/li>\n
- Letter spacing must be at least 0.12 times the font size.<\/li>\n
- Word spacing must be at least 0.16 times the font size.<\/li>\n<\/ul>\n
Avoid excessive use of italics, long blocks of all capitals.<\/p>\n
Do not use images of text and avoid putting text over images.<\/p>\n
More about Font<\/h3>\n
<\/code><\/p>\nFont choices are part of good design and make content easier to read for everyone.<\/p>\n
A simple test for your font choices is the Il1 test to root out imposters<\/em>. When choosing a font, type a capital i, a lowercase L, and the number 1 beside each other with no spaces: Il1.[2]<\/sup><\/a> A good font will have obvious distinction between those characters. A harder to read font will have imposter characters that look similar and can easily be mistaken for one another. Choosing a readable font helps avoid character ambiguity which may cause confusion for readers.<\/p>\n
Consider these examples:<\/p>\n
\nPoor (Alata)
\n<\/p>\nAcceptable (Roboto)
\n<\/p>\nExcellent (Noto Sans)
\n<\/p>\n<\/div>\nThe Il1 test is not the only factor in choosing the right font, but is a good quick test of font legibility.<\/p>\n
<\/a>Accessible Colour<\/h2>\n
Text must have a contrast ratio<\/a> of at least 4.5:1 against the background colour. For example, black on white is 21:1 and orange on white is 3.37:1.<\/p>\n
Additionally, do not use visual styling, including colour, alone to emphasize content.<\/p>\n
These best practices are essential for readers that are colour blind, but benefit users printing in black and white, viewing in the sun with screen glare, custom contrast settings, or other vision impairments.<\/p>\n
The next chapter<\/a> examines colour in further detail.<\/p>\n
Works Cited<\/h2>\n
Krug, Steve.\u00a0Don\u2019t Make Me Think, Revisited\u202f: A Common Sense Approach to Web Usability<\/i><\/a>. 3rd ed., New Riders, 2014.<\/div>\nLin, H., Wu, F.-G., & Cheng, Y.-Y.\u00a0Legibility and visual fatigue affected by text direction, screen size and character size on color LCD e-reader<\/a>.\u00a0Displays<\/em>, vol. 34, no. 1, pp. 49\u201358, 2013.<\/div>\nMorrell, R. W., & Echt, K. V. (1997).\u00a0Designing Written Instructions for Older Adults: Learning to Use Computers<\/a>.\u00a0Handbook of Human Factors and the Older Adult<\/em>, vol. 14, pp. 335\u2013361, 1997.<\/div>\n- <\/p>\r\n\"Dyslexia<\/strong>, previously known as\u00a0word blindness<\/strong>, is a\u00a0learning disability ('learning difficulty' in the UK) that affects either reading or writing.\r\n\r\nDifferent people are affected to different degrees.<\/sup>\u00a0Problems may include difficulties in\u00a0spelling\u00a0words, reading quickly,\u00a0writing words, \"sounding out\" words\u00a0in the head, pronouncing words when reading aloud and understanding what one reads.\u00a0Often these difficulties are first noticed at school.<\/sup>\u00a0The difficulties are involuntary, and people with this disorder have a normal desire to\u00a0learn.\"\r\n\r\nDyslexia - Wikipedia<\/a>\r\n\r\n\u201cThe one argument for accessibility that doesn\u2019t get made nearly often enough is how extraordinarily better it makes some people\u2019s lives. How many opportunities do we have to dramatically improve people\u2019s lives just by doing our job a little better?\u201d<\/strong>\r\n\r\nSteve Krug,\u00a0Don\u2019t Make Me Think, Revisited<\/a><\/em>\r\n\r\n ↵<\/a><\/li>
- Admittedly, the default font of Pressbooks, Montserrat, is not an excellent example of best practice. ↵<\/a><\/li><\/ol><\/div>
definition<\/span>The contrast ratio between the font colour and the background colour. Accessible contrast should be at least 4.5:1.<\/p>\n<\/div>
- Admittedly, the default font of Pressbooks, Montserrat, is not an excellent example of best practice. ↵<\/a><\/li><\/ol><\/div>
- <\/p>\r\n\"Dyslexia<\/strong>, previously known as\u00a0word blindness<\/strong>, is a\u00a0learning disability ('learning difficulty' in the UK) that affects either reading or writing.\r\n\r\nDifferent people are affected to different degrees.<\/sup>\u00a0Problems may include difficulties in\u00a0spelling\u00a0words, reading quickly,\u00a0writing words, \"sounding out\" words\u00a0in the head, pronouncing words when reading aloud and understanding what one reads.\u00a0Often these difficulties are first noticed at school.<\/sup>\u00a0The difficulties are involuntary, and people with this disorder have a normal desire to\u00a0learn.\"\r\n\r\nDyslexia - Wikipedia<\/a>\r\n\r\n\u201cThe one argument for accessibility that doesn\u2019t get made nearly often enough is how extraordinarily better it makes some people\u2019s lives. How many opportunities do we have to dramatically improve people\u2019s lives just by doing our job a little better?\u201d<\/strong>\r\n\r\nSteve Krug,\u00a0Don\u2019t Make Me Think, Revisited<\/a><\/em>\r\n\r\n ↵<\/a><\/li>
- Accessible Colour<\/a><\/li>\n<\/ul>\n
- Accessible Font<\/a><\/li>\n
- Accessible Colour<\/a><\/li>\r\n<\/ul>\r\n