{"id":2704,"date":"2023-02-13T19:26:34","date_gmt":"2023-02-14T00:26:34","guid":{"rendered":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/?post_type=chapter&#038;p=2704"},"modified":"2025-07-21T15:57:16","modified_gmt":"2025-07-21T19:57:16","slug":"brightspace-accessibility-1","status":"publish","type":"chapter","link":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/brightspace-accessibility-1\/","title":{"raw":"Templates, Font, and Colour","rendered":"Templates, Font, and Colour"},"content":{"raw":"<strong>On this page:<\/strong>\r\n<ul class=\"navbar\">\r\n \t<li class=\"navitem\"><a href=\"#templates\">Templates<\/a><\/li>\r\n \t<li class=\"navitem\"><a href=\"#text\">Font<\/a><\/li>\r\n \t<li class=\"navitem\"><a href=\"#colour\">Colour Contrast<\/a><\/li>\r\n<\/ul>\r\n<h2><a id=\"templates\"><\/a>Templates<\/h2>\r\nCreate great-looking, responsive, and accessible content topic pages using the page layouts provided in the [pb_glossary id=\"2028\"]template[\/pb_glossary] package. The layouts are designed to be edited using the HTML Editor in the Learning Environment.\r\n\r\nTo access the templates, <strong>Create a File<\/strong> and then click on <strong>Select a Document Template<\/strong> menu next to the title text box.\r\n\r\n<img class=\"alignnone wp-image-1210 size-full\" style=\"border: 2px solid #555;margin-bottom: 1em\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2020\/10\/chrome_qc2XF6Kuww.png\" alt=\"Brightspace template menu\" width=\"766\" height=\"440\" \/>Choose the appropriate nnn_x_v3 template.\r\n\r\nBe consistent: use the introductory template for all introductory pages, the video page for videos, etc.\r\n\r\nEach Brightspace content page requires a title. Give each page a descriptive, unique title.\r\n<h3>Existing Content<\/h3>\r\nIf you have existing content you would like to convert into a Brightspace webpage, you can copy and paste directly from a Word document. Select\u00a0<strong>Remove formatting\u00a0<\/strong>when prompted.\r\n<img class=\"alignnone size-full wp-image-9707\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/Remove-formatting.jpeg\" alt=\"\" width=\"478\" height=\"151\" \/>\r\n\r\nIf you encounter formatting errors when copy and pasted content into Brightspace, consider using <a href=\"https:\/\/html-cleaner.com\/\">HTML Cleaner<\/a> to eleminate excess code while retaining look and layout. Copy and paste the HTML Cleaner results into the\u00a0<strong>Source Code<\/strong> view in the Brightspace editor.\r\n<h2><a id=\"text\"><\/a>Font<\/h2>\r\nUse the built-in editor tools to change font. All font options are available on the Brightspace editor toolbar.<img class=\"alignnone size-full wp-image-8104\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/BSp-EditorToolbar-Font.png\" alt=\"\" width=\"2784\" height=\"162\" \/>\r\n\r\nPrefer sans-serif fonts. Use a minimum font size of 16 pixels.\r\n\r\nThe <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/appearance\/\">Appearance<\/a> chapter of this handbook has additional information on <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/appearance\/#font\">using accessible font<\/a>.\r\n<h2><a id=\"colour\"><\/a>[pb_glossary id=\"1168\"]\u00a0Colour Contrast[\/pb_glossary]<\/h2>\r\n<img class=\"wp-image-7918 alignright\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/Untitled-Your-Story.gif\" alt=\"\" width=\"233\" height=\"335\" \/>\r\n\r\nContrast must be at least 4.5:1 for normal text (11-12 point) and 3:1 for large text (18 point +). Use the <strong>Accessibility Checker<\/strong> to verify.\r\n\r\nTo select font colours:\r\n<ol>\r\n \t<li>Highlight the text<\/li>\r\n \t<li>Select the <strong>Select <\/strong><strong>Color <\/strong>button in the toolbar<\/li>\r\n \t<li>In the <strong>Select a Color<\/strong>\u00a0dialogue, use the sliders to change your colour until the contrast is at least 4.5:1<\/li>\r\n<\/ol>\r\nhttps:\/\/mediaspace.langara.ca\/media\/t\/0_k544cvdm\r\n\r\n&nbsp;\r\n\r\nRemember the <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/accessible-colour\/\">accessible colour best practices<\/a> covered earlier in this handbook. <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/accessible-colour\/#UseofColour\">Do not use colour alone<\/a> to convey meaning or emphasis.","rendered":"<p><strong>On this page:<\/strong><\/p>\n<ul class=\"navbar\">\n<li class=\"navitem\"><a href=\"#templates\">Templates<\/a><\/li>\n<li class=\"navitem\"><a href=\"#text\">Font<\/a><\/li>\n<li class=\"navitem\"><a href=\"#colour\">Colour Contrast<\/a><\/li>\n<\/ul>\n<h2><a id=\"templates\"><\/a>Templates<\/h2>\n<p>Create great-looking, responsive, and accessible content topic pages using the page layouts provided in the <a class=\"glossary-term\" aria-haspopup=\"dialog\" aria-describedby=\"definition\" href=\"#term_2704_2028\">template<\/a> package. The layouts are designed to be edited using the HTML Editor in the Learning Environment.<\/p>\n<p>To access the templates, <strong>Create a File<\/strong> and then click on <strong>Select a Document Template<\/strong> menu next to the title text box.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1210 size-full\" style=\"border: 2px solid #555;margin-bottom: 1em\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2020\/10\/chrome_qc2XF6Kuww.png\" alt=\"Brightspace template menu\" width=\"766\" height=\"440\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2020\/10\/chrome_qc2XF6Kuww.png 766w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2020\/10\/chrome_qc2XF6Kuww-300x172.png 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2020\/10\/chrome_qc2XF6Kuww-65x37.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2020\/10\/chrome_qc2XF6Kuww-225x129.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2020\/10\/chrome_qc2XF6Kuww-350x201.png 350w\" sizes=\"auto, (max-width: 766px) 100vw, 766px\" \/>Choose the appropriate nnn_x_v3 template.<\/p>\n<p>Be consistent: use the introductory template for all introductory pages, the video page for videos, etc.<\/p>\n<p>Each Brightspace content page requires a title. Give each page a descriptive, unique title.<\/p>\n<h3>Existing Content<\/h3>\n<p>If you have existing content you would like to convert into a Brightspace webpage, you can copy and paste directly from a Word document. Select\u00a0<strong>Remove formatting\u00a0<\/strong>when prompted.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9707\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/Remove-formatting.jpeg\" alt=\"\" width=\"478\" height=\"151\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/Remove-formatting.jpeg 478w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/Remove-formatting-300x95.jpeg 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/Remove-formatting-65x21.jpeg 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/Remove-formatting-225x71.jpeg 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/Remove-formatting-350x111.jpeg 350w\" sizes=\"auto, (max-width: 478px) 100vw, 478px\" \/><\/p>\n<p>If you encounter formatting errors when copy and pasted content into Brightspace, consider using <a href=\"https:\/\/html-cleaner.com\/\">HTML Cleaner<\/a> to eleminate excess code while retaining look and layout. Copy and paste the HTML Cleaner results into the\u00a0<strong>Source Code<\/strong> view in the Brightspace editor.<\/p>\n<h2><a id=\"text\"><\/a>Font<\/h2>\n<p>Use the built-in editor tools to change font. All font options are available on the Brightspace editor toolbar.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8104\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/BSp-EditorToolbar-Font.png\" alt=\"\" width=\"2784\" height=\"162\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/BSp-EditorToolbar-Font.png 2784w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/BSp-EditorToolbar-Font-300x17.png 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/BSp-EditorToolbar-Font-1024x60.png 1024w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/BSp-EditorToolbar-Font-768x45.png 768w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/BSp-EditorToolbar-Font-1536x89.png 1536w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/BSp-EditorToolbar-Font-2048x119.png 2048w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/BSp-EditorToolbar-Font-65x4.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/BSp-EditorToolbar-Font-225x13.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/BSp-EditorToolbar-Font-350x20.png 350w\" sizes=\"auto, (max-width: 2784px) 100vw, 2784px\" \/><\/p>\n<p>Prefer sans-serif fonts. Use a minimum font size of 16 pixels.<\/p>\n<p>The <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/appearance\/\">Appearance<\/a> chapter of this handbook has additional information on <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/appearance\/#font\">using accessible font<\/a>.<\/p>\n<h2><a id=\"colour\"><\/a><a class=\"glossary-term\" aria-haspopup=\"dialog\" aria-describedby=\"definition\" href=\"#term_2704_1168\">\u00a0Colour Contrast<\/a><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7918 alignright\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/02\/Untitled-Your-Story.gif\" alt=\"\" width=\"233\" height=\"335\" \/><\/p>\n<p>Contrast must be at least 4.5:1 for normal text (11-12 point) and 3:1 for large text (18 point +). Use the <strong>Accessibility Checker<\/strong> to verify.<\/p>\n<p>To select font colours:<\/p>\n<ol>\n<li>Highlight the text<\/li>\n<li>Select the <strong>Select <\/strong><strong>Color <\/strong>button in the toolbar<\/li>\n<li>In the <strong>Select a Color<\/strong>\u00a0dialogue, use the sliders to change your colour until the contrast is at least 4.5:1<\/li>\n<\/ol>\n<p><iframe loading=\"lazy\" id=\"kaltura_player\" title=\"Brightspace colour contrast\" src=\"https:\/\/api.ca.kaltura.com\/p\/138\/sp\/13800\/embedIframeJs\/uiconf_id\/23449468\/partner_id\/138?iframeembed=true&#38;playerId=kaltura_player&#38;entry_id=0_k544cvdm&#38;flashvars[streamerType]=auto&#38;flashvars[localizationCode]=en&#38;flashvars[sideBarContainer.plugin]=true&#38;flashvars[sideBarContainer.position]=left&#38;flashvars[sideBarContainer.clickToClose]=true&#38;flashvars[chapters.plugin]=true&#38;flashvars[chapters.layout]=vertical&#38;flashvars[chapters.thumbnailRotator]=false&#38;flashvars[streamSelector.plugin]=true&#38;flashvars[EmbedPlayer.SpinnerTarget]=videoHolder&#38;flashvars[dualScreen.plugin]=true&#38;flashvars[hotspots.plugin]=1&#38;flashvars[Kaltura.addCrossoriginToIframe]=true&#38;wid=0_fxrb74kj\" width=\"400\" height=\"285\" allowfullscreen=\"allowfullscreen\" sandbox=\"allow-downloads allow-forms allow-same-origin allow-scripts allow-top-navigation allow-pointer-lock allow-popups allow-modals allow-orientation-lock allow-popups-to-escape-sandbox allow-presentation allow-top-navigation-by-user-activation\" frameborder=\"0\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>Remember the <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/accessible-colour\/\">accessible colour best practices<\/a> covered earlier in this handbook. <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/accessible-colour\/#UseofColour\">Do not use colour alone<\/a> to convey meaning or emphasis.<\/p>\n<div class=\"glossary\"><span class=\"screen-reader-text\" id=\"definition\">definition<\/span><template id=\"term_2704_2028\"><div class=\"glossary__definition\" role=\"dialog\" data-id=\"term_2704_2028\"><div tabindex=\"-1\"><p>Preset document or file format, used for consistency without having to recreate each time<\/p>\n<\/div><button><span aria-hidden=\"true\">&times;<\/span><span class=\"screen-reader-text\">Close definition<\/span><\/button><\/div><\/template><template id=\"term_2704_1168\"><div class=\"glossary__definition\" role=\"dialog\" data-id=\"term_2704_1168\"><div tabindex=\"-1\"><p>Colour contrast is the difference in saturation, brightness, and pigment of different elements relative to one another. A contrast ratio of at least 4.5:1 between text and background is required by common accessibility standards.<\/p>\n<\/div><button><span aria-hidden=\"true\">&times;<\/span><span class=\"screen-reader-text\">Close definition<\/span><\/button><\/div><\/template><\/div>","protected":false},"author":1655,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-2704","chapter","type-chapter","status-publish","hentry"],"part":2683,"_links":{"self":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters\/2704","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/users\/1655"}],"version-history":[{"count":25,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters\/2704\/revisions"}],"predecessor-version":[{"id":9708,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters\/2704\/revisions\/9708"}],"part":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/parts\/2683"}],"metadata":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters\/2704\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/media?parent=2704"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapter-type?post=2704"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/contributor?post=2704"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/license?post=2704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}