{"id":100,"date":"2021-10-13T01:44:58","date_gmt":"2021-10-13T05:44:58","guid":{"rendered":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/?post_type=chapter&#038;p=100"},"modified":"2026-03-04T15:17:10","modified_gmt":"2026-03-04T20:17:10","slug":"accessible-colour","status":"publish","type":"chapter","link":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/accessible-colour\/","title":{"raw":"Accessible Colour","rendered":"Accessible Colour"},"content":{"raw":"<a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/09\/Screen-Shot-2022-09-27-at-11.24.09-e1664303510995.png\"><img class=\"alignright wp-image-1846\" style=\"border: 2px solid #555;margin-bottom: 1em;border-radius: 6px\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/09\/Screen-Shot-2022-09-27-at-11.24.09-e1664303510995-217x300.png\" alt=\"Brightspace colour tool\" width=\"92\" height=\"127\" \/><\/a>\r\n\r\n1 in 12 men and 1 in 200 women have some kind of colour vision deficiency (Colour Blind Awareness, 2010).\u00a0To create inclusive content foreground information must have sufficient [pb_glossary id=\"1168\"]colour contrast[\/pb_glossary] against background colours. Additionally, it is essential that colour is not the only means to convey or emphasize information.\r\n\r\n<strong>On this page:<\/strong>\r\n<ul class=\"navbar\">\r\n \t<li class=\"navitem\"><a href=\"#accessiblecolour\">Accessible Colour<\/a><\/li>\r\n \t<li class=\"navitem\"><a href=\"#contrast\">Colour Contrast<\/a><\/li>\r\n \t<li class=\"navitem\"><a href=\"#UseofColour\">Use of Colour<\/a><\/li>\r\n \t<li class=\"navitem\"><a href=\"#digitalcolour\">Digital Colour<\/a><\/li>\r\n \t<li class=\"navitem\"><a href=\"#tools\">Colour Code Tools<\/a><\/li>\r\n \t<li class=\"navitem\"><a href=\"#fr\">Further Reading<\/a><\/li>\r\n<\/ul>\r\n<h2><a id=\"accessiblecolour\"><\/a>Accessible Colour<\/h2>\r\nConsider that good colour practices aren't just for those who see colour differently. Better practices are\r\n<div class=\"textbox textbox--exercises\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">Essential for<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<ul>\r\n \t<li>Readers with a colour vision deficiency.<\/li>\r\n \t<li>Readers with low vision.<\/li>\r\n \t<li>Readers on an electronic paper screen, like an e-reader.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<div class=\"textbox textbox--exercises\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">But also benefit<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<ul>\r\n \t<li>All readers, regardless of access means.<\/li>\r\n \t<li>Readers that customize appearance and style.\r\n<ul>\r\n \t<li>Effective use of colour ensures information looks similar regardless of device and user settings, such as dark or night mode or other custom contrast settings.<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Readers that print content in black and white.\r\n<ul>\r\n \t<li>Content that relies on colour or lacks sufficient contrast will lose meaning in black and white.<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Readers experiencing eye fatigue.<\/li>\r\n \t<li>When viewing content in poor lighting or when there is glare from the sun.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<h2><a id=\"contrast\"><\/a>Colour Contrast<\/h2>\r\n<img class=\"noborder alignright wp-image-5719\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/10\/LangaraOrangeContrast-237x300.png\" alt=\"Screenshot of a colour contrast analyzer showing that Langara branded orange does not pass accessibility standards.\" width=\"300\" height=\"380\" \/>For proper colour contrast, aim for <strong>at least<\/strong> a 4.5:1 ratio. To (over)simplify that ratio, that means the text is 4.5 times brighter than the background. Large text (size 18 point or greater) or bold 14 point or greater, requires only a 3:1 ratio to be accessible. Logos and decorative images have no colour requirements.\r\n\r\nAs an example of an accessible contrast ratio, black text on a white background has a ratio of 21:1. <span style=\"color: #f15a22\">Orange text on a white background <\/span>(or vice-versa) has a ratio of 3.37:1 and does not provide sufficient colour contrast.\r\n\r\nColour combinations to avoid:\r\n<ul>\r\n \t<li>Red and green<\/li>\r\n \t<li>Green and red or blue or brown or black<\/li>\r\n \t<li>Light green and yellow<\/li>\r\n \t<li>Blue and purple of grey<\/li>\r\n<\/ul>\r\nUse dark font colours on light backgrounds (black text on a white page for example) and light font colours on dark backgrounds (for example white text on a black background)\r\n<div class=\"clearfix\"><\/div>\r\n<h2><a id=\"UseofColour\"><\/a>Use of Colour<\/h2>\r\nFurther, don\u2019t rely on colour alone to convey information or emphasize importance. Accessible practice is to add visual or text equivalents to colour, for example:\r\n<ul>\r\n \t<li>Use colour, shapes, and text in charts and diagrams.<\/li>\r\n \t<li>Add text indicators to highlighted table cells.<\/li>\r\n \t<li>Include reminders like \u201cimportant\u201d or \u201crequired\u201d in addition to using bold or a specific font colour.<\/li>\r\n<\/ul>\r\nIf you rely on colour alone, readers with colour vision deficiency, using screen readers or text to speech software, or those viewing in black and white will miss the meaning.\r\n<h2><a id=\"digitalcolour\"><\/a>Digital Colour<\/h2>\r\nDigital colours are specified using colour codes. The most common colour codes are Hexadecimal (hex), RGB, and HSL. Each of these colour codes express colours using different values. Try entering a colour in this <a href=\"https:\/\/www.w3schools.com\/colors\/colors_converter.asp\">Color Converter tool<\/a> to see how colours can be coded.\r\n\r\n<img class=\"alignnone wp-image-1196 size-full\" style=\"border: 2px solid #555;margin-bottom: 1em;border-radius: 6px\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/10\/chrome_1toCqLLnQe.png\" alt=\"W3 schools colour code converter showing Langara orange colour values\" width=\"760\" height=\"413\" \/>\r\nHex values are referred to in this guide, but the principles are applicable to any colour code system.\r\n<h2><a id=\"tools\"><\/a>Colour Code Tools<\/h2>\r\nThere are many options for finding colour codes.\r\n\r\n<details><summary>Firefox<\/summary>Firefox has a built-in eyedropper tool. Navigate to <strong>Tools &gt; Browser Tools &gt; Eyedropper<\/strong>. Click on the colour you want and the hexadecimal code is copied to your clipboard.\r\n\r\nAdditionally, right-click on any webpage and select <strong>Inspect<\/strong>. Navigate to the <strong>Accessibility <\/strong>pane and select an option from the <strong>Simulate <\/strong>menu to see how different people may experience the colour of that page.\r\n\r\n<\/details><details><summary>Chrome<\/summary><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/colorzilla\/bhlhnicpbhignbdhedgjhgdocnmhomnp\">ColorZilla Chrome extension<\/a> allows you to easily copy colour codes from websites. Simply open the extension and use the eyedropper to select a colour. The HEX colour code is added to your clipboard.\r\n\r\nIn Chrome, you can right-click on the colour you want and select <strong>Inspect<\/strong>. Navigate to the <strong>Styles <\/strong>pane in the <strong>DevTools<\/strong> window. Additional options are available in the <strong>Computed <\/strong>tab. On a complicated page, you may wish to use the filter box to search for \"color.\" Click on the colour box next to the element you want to get the colour codes. This option display contrast ratios only if the colour is coded as a foreground or background colour relative to another properly coded element's colour. That is not always the case, however, you can still use this method to find the hex codes and compare them in another tool.\r\n\r\n<\/details><details><summary>macOS<\/summary>Built-in to MacOS is the Digital Color Meter application. Press CMD + L to lock the meter's position on the desired colour. Use the Color menu or press SHIFT + CMD to copy the colour code. This tool allows users to copy colour codes as RGB.\r\n\r\n<a href=\"https:\/\/usecontrast.com\/\">Contrast for MacOS<\/a> is an excellent application to determine colours and colour contrast.\r\n\r\n<\/details><details><summary>Windows<\/summary><a href=\"https:\/\/www.tpgi.com\/color-contrast-checker\/\">TPGi Color Contrast Analyser<\/a> for Windows is an excellent option.\r\n\r\nYou can use <a href=\"https:\/\/learn.microsoft.com\/en-us\/windows\/powertoys\/\">Microsoft PowerToys<\/a> to find Hex codes.\r\n\r\n<\/details>Use these tools to find colour codes and contrast checking tools to verify accessible colour contrast.\r\n<h3>Contrast Checkers<\/h3>\r\nWebAIM (Accessibility in Mind) is an exceptional resource that has a <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">contrast checker<\/a> (that can be added as a <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/bookmarklet#:~:text=The%20Contrast%20Checker%20Bookmarklet%20will,the%20foreground%20and%20background%20colors.\">browser tool<\/a>), a <a href=\"https:\/\/webaim.org\/resources\/linkcontrastchecker\/\">link contrast checker<\/a>, and <a href=\"https:\/\/webaim.org\/articles\/contrast\/\">additional reading on colour contrast.<\/a>\r\n\r\n<a href=\"https:\/\/www.garrethtigwell.com\/ACE\/ace\/\">ACE (Accessibility Colour Evaluator)<\/a> is an excellent tool for checking colour contrast. You can set multiple colours for multiple elements (background, text, link, hover, etc.) and see the corresponding colour contrast ratios.\r\n\r\nConsider some of these as well and find what works best for you:\r\n\r\n<a href=\"https:\/\/www.websiterating.com\/color-contrast-perception-checker\/\">Color Contrast Checker<\/a>\r\n\r\n<a href=\"https:\/\/www.aremycolorsaccessible.com\/palette?colors=%23fff&amp;colors=%23d33a2c&amp;colors=%23ffe7e7&amp;colors=%23811d15&amp;colors=%23333333&amp;colors=%23666\">Palette Checker<\/a>\r\n\r\n<a href=\"https:\/\/whocanuse.com\/?b=040876&amp;c=fd4949&amp;f=20&amp;s=\">Who can use this color combination?<\/a>\r\n\r\n<a href=\"https:\/\/www.toptal.com\/designers\/colorfilter\/\">Color Blind Web Page Filter<\/a>\r\n\r\n<a href=\"https:\/\/www.december.com\/html\/spec\/colorsafe.html\">Safe Hexadecimal Color Codes<\/a>\r\n\r\n<hr \/>\r\n\r\n<div class=\"textbox textbox--key-takeaways\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\"><a id=\"fr\"><\/a>Further Reading<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\n<a href=\"https:\/\/webaim.org\/articles\/contrast\/\">WebAIM guide to WCAG colour guidelines.<\/a>\r\n\r\n<\/div>\r\n<\/div>\r\n<h2 class=\"references\">Works Cited<\/h2>\r\nColour Blind Awareness. \"<a href=\"https:\/\/www.colourblindawareness.org\/colour-blindness\/\">About Colour Blindness<\/a>.\" <em>Colour Blind Awareness<\/em>, 2010.","rendered":"<p><a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/09\/Screen-Shot-2022-09-27-at-11.24.09-e1664303510995.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-1846\" style=\"border: 2px solid #555;margin-bottom: 1em;border-radius: 6px\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/09\/Screen-Shot-2022-09-27-at-11.24.09-e1664303510995-217x300.png\" alt=\"Brightspace colour tool\" width=\"92\" height=\"127\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/09\/Screen-Shot-2022-09-27-at-11.24.09-e1664303510995-217x300.png 217w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/09\/Screen-Shot-2022-09-27-at-11.24.09-e1664303510995-742x1024.png 742w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/09\/Screen-Shot-2022-09-27-at-11.24.09-e1664303510995-768x1060.png 768w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/09\/Screen-Shot-2022-09-27-at-11.24.09-e1664303510995-65x90.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/09\/Screen-Shot-2022-09-27-at-11.24.09-e1664303510995-225x311.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/09\/Screen-Shot-2022-09-27-at-11.24.09-e1664303510995-350x483.png 350w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/09\/Screen-Shot-2022-09-27-at-11.24.09-e1664303510995.png 839w\" sizes=\"auto, (max-width: 92px) 100vw, 92px\" \/><\/a><\/p>\n<p>1 in 12 men and 1 in 200 women have some kind of colour vision deficiency (Colour Blind Awareness, 2010).\u00a0To create inclusive content foreground information must have sufficient <a class=\"glossary-term\" aria-haspopup=\"dialog\" aria-describedby=\"definition\" href=\"#term_100_1168\">colour contrast<\/a> against background colours. Additionally, it is essential that colour is not the only means to convey or emphasize information.<\/p>\n<p><strong>On this page:<\/strong><\/p>\n<ul class=\"navbar\">\n<li class=\"navitem\"><a href=\"#accessiblecolour\">Accessible Colour<\/a><\/li>\n<li class=\"navitem\"><a href=\"#contrast\">Colour Contrast<\/a><\/li>\n<li class=\"navitem\"><a href=\"#UseofColour\">Use of Colour<\/a><\/li>\n<li class=\"navitem\"><a href=\"#digitalcolour\">Digital Colour<\/a><\/li>\n<li class=\"navitem\"><a href=\"#tools\">Colour Code Tools<\/a><\/li>\n<li class=\"navitem\"><a href=\"#fr\">Further Reading<\/a><\/li>\n<\/ul>\n<h2><a id=\"accessiblecolour\"><\/a>Accessible Colour<\/h2>\n<p>Consider that good colour practices aren&#8217;t just for those who see colour differently. Better practices are<\/p>\n<div class=\"textbox textbox--exercises\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">Essential for<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<ul>\n<li>Readers with a colour vision deficiency.<\/li>\n<li>Readers with low vision.<\/li>\n<li>Readers on an electronic paper screen, like an e-reader.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"textbox textbox--exercises\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">But also benefit<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<ul>\n<li>All readers, regardless of access means.<\/li>\n<li>Readers that customize appearance and style.\n<ul>\n<li>Effective use of colour ensures information looks similar regardless of device and user settings, such as dark or night mode or other custom contrast settings.<\/li>\n<\/ul>\n<\/li>\n<li>Readers that print content in black and white.\n<ul>\n<li>Content that relies on colour or lacks sufficient contrast will lose meaning in black and white.<\/li>\n<\/ul>\n<\/li>\n<li>Readers experiencing eye fatigue.<\/li>\n<li>When viewing content in poor lighting or when there is glare from the sun.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<h2><a id=\"contrast\"><\/a>Colour Contrast<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"noborder alignright wp-image-5719\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/10\/LangaraOrangeContrast-237x300.png\" alt=\"Screenshot of a colour contrast analyzer showing that Langara branded orange does not pass accessibility standards.\" width=\"300\" height=\"380\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/10\/LangaraOrangeContrast-237x300.png 237w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/10\/LangaraOrangeContrast-65x82.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/10\/LangaraOrangeContrast-225x285.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/10\/LangaraOrangeContrast-350x443.png 350w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/10\/LangaraOrangeContrast.png 600w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>For proper colour contrast, aim for <strong>at least<\/strong> a 4.5:1 ratio. To (over)simplify that ratio, that means the text is 4.5 times brighter than the background. Large text (size 18 point or greater) or bold 14 point or greater, requires only a 3:1 ratio to be accessible. Logos and decorative images have no colour requirements.<\/p>\n<p>As an example of an accessible contrast ratio, black text on a white background has a ratio of 21:1. <span style=\"color: #f15a22\">Orange text on a white background <\/span>(or vice-versa) has a ratio of 3.37:1 and does not provide sufficient colour contrast.<\/p>\n<p>Colour combinations to avoid:<\/p>\n<ul>\n<li>Red and green<\/li>\n<li>Green and red or blue or brown or black<\/li>\n<li>Light green and yellow<\/li>\n<li>Blue and purple of grey<\/li>\n<\/ul>\n<p>Use dark font colours on light backgrounds (black text on a white page for example) and light font colours on dark backgrounds (for example white text on a black background)<\/p>\n<div class=\"clearfix\"><\/div>\n<h2><a id=\"UseofColour\"><\/a>Use of Colour<\/h2>\n<p>Further, don\u2019t rely on colour alone to convey information or emphasize importance. Accessible practice is to add visual or text equivalents to colour, for example:<\/p>\n<ul>\n<li>Use colour, shapes, and text in charts and diagrams.<\/li>\n<li>Add text indicators to highlighted table cells.<\/li>\n<li>Include reminders like \u201cimportant\u201d or \u201crequired\u201d in addition to using bold or a specific font colour.<\/li>\n<\/ul>\n<p>If you rely on colour alone, readers with colour vision deficiency, using screen readers or text to speech software, or those viewing in black and white will miss the meaning.<\/p>\n<h2><a id=\"digitalcolour\"><\/a>Digital Colour<\/h2>\n<p>Digital colours are specified using colour codes. The most common colour codes are Hexadecimal (hex), RGB, and HSL. Each of these colour codes express colours using different values. Try entering a colour in this <a href=\"https:\/\/www.w3schools.com\/colors\/colors_converter.asp\">Color Converter tool<\/a> to see how colours can be coded.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1196 size-full\" style=\"border: 2px solid #555;margin-bottom: 1em;border-radius: 6px\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/10\/chrome_1toCqLLnQe.png\" alt=\"W3 schools colour code converter showing Langara orange colour values\" width=\"760\" height=\"413\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/10\/chrome_1toCqLLnQe.png 760w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/10\/chrome_1toCqLLnQe-300x163.png 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/10\/chrome_1toCqLLnQe-65x35.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/10\/chrome_1toCqLLnQe-225x122.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2021\/10\/chrome_1toCqLLnQe-350x190.png 350w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><br \/>\nHex values are referred to in this guide, but the principles are applicable to any colour code system.<\/p>\n<h2><a id=\"tools\"><\/a>Colour Code Tools<\/h2>\n<p>There are many options for finding colour codes.<\/p>\n<details>\n<summary>Firefox<\/summary>\n<p>Firefox has a built-in eyedropper tool. Navigate to <strong>Tools &gt; Browser Tools &gt; Eyedropper<\/strong>. Click on the colour you want and the hexadecimal code is copied to your clipboard.<\/p>\n<p>Additionally, right-click on any webpage and select <strong>Inspect<\/strong>. Navigate to the <strong>Accessibility <\/strong>pane and select an option from the <strong>Simulate <\/strong>menu to see how different people may experience the colour of that page.<\/p>\n<\/details>\n<details>\n<summary>Chrome<\/summary>\n<p><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/colorzilla\/bhlhnicpbhignbdhedgjhgdocnmhomnp\">ColorZilla Chrome extension<\/a> allows you to easily copy colour codes from websites. Simply open the extension and use the eyedropper to select a colour. The HEX colour code is added to your clipboard.<\/p>\n<p>In Chrome, you can right-click on the colour you want and select <strong>Inspect<\/strong>. Navigate to the <strong>Styles <\/strong>pane in the <strong>DevTools<\/strong> window. Additional options are available in the <strong>Computed <\/strong>tab. On a complicated page, you may wish to use the filter box to search for &#8220;color.&#8221; Click on the colour box next to the element you want to get the colour codes. This option display contrast ratios only if the colour is coded as a foreground or background colour relative to another properly coded element&#8217;s colour. That is not always the case, however, you can still use this method to find the hex codes and compare them in another tool.<\/p>\n<\/details>\n<details>\n<summary>macOS<\/summary>\n<p>Built-in to MacOS is the Digital Color Meter application. Press CMD + L to lock the meter&#8217;s position on the desired colour. Use the Color menu or press SHIFT + CMD to copy the colour code. This tool allows users to copy colour codes as RGB.<\/p>\n<p><a href=\"https:\/\/usecontrast.com\/\">Contrast for MacOS<\/a> is an excellent application to determine colours and colour contrast.<\/p>\n<\/details>\n<details>\n<summary>Windows<\/summary>\n<p><a href=\"https:\/\/www.tpgi.com\/color-contrast-checker\/\">TPGi Color Contrast Analyser<\/a> for Windows is an excellent option.<\/p>\n<p>You can use <a href=\"https:\/\/learn.microsoft.com\/en-us\/windows\/powertoys\/\">Microsoft PowerToys<\/a> to find Hex codes.<\/p>\n<\/details>\n<p>Use these tools to find colour codes and contrast checking tools to verify accessible colour contrast.<\/p>\n<h3>Contrast Checkers<\/h3>\n<p>WebAIM (Accessibility in Mind) is an exceptional resource that has a <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">contrast checker<\/a> (that can be added as a <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/bookmarklet#:~:text=The%20Contrast%20Checker%20Bookmarklet%20will,the%20foreground%20and%20background%20colors.\">browser tool<\/a>), a <a href=\"https:\/\/webaim.org\/resources\/linkcontrastchecker\/\">link contrast checker<\/a>, and <a href=\"https:\/\/webaim.org\/articles\/contrast\/\">additional reading on colour contrast.<\/a><\/p>\n<p><a href=\"https:\/\/www.garrethtigwell.com\/ACE\/ace\/\">ACE (Accessibility Colour Evaluator)<\/a> is an excellent tool for checking colour contrast. You can set multiple colours for multiple elements (background, text, link, hover, etc.) and see the corresponding colour contrast ratios.<\/p>\n<p>Consider some of these as well and find what works best for you:<\/p>\n<p><a href=\"https:\/\/www.websiterating.com\/color-contrast-perception-checker\/\">Color Contrast Checker<\/a><\/p>\n<p><a href=\"https:\/\/www.aremycolorsaccessible.com\/palette?colors=%23fff&amp;colors=%23d33a2c&amp;colors=%23ffe7e7&amp;colors=%23811d15&amp;colors=%23333333&amp;colors=%23666\">Palette Checker<\/a><\/p>\n<p><a href=\"https:\/\/whocanuse.com\/?b=040876&amp;c=fd4949&amp;f=20&amp;s=\">Who can use this color combination?<\/a><\/p>\n<p><a href=\"https:\/\/www.toptal.com\/designers\/colorfilter\/\">Color Blind Web Page Filter<\/a><\/p>\n<p><a href=\"https:\/\/www.december.com\/html\/spec\/colorsafe.html\">Safe Hexadecimal Color Codes<\/a><\/p>\n<hr \/>\n<div class=\"textbox textbox--key-takeaways\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\"><a id=\"fr\"><\/a>Further Reading<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<p><a href=\"https:\/\/webaim.org\/articles\/contrast\/\">WebAIM guide to WCAG colour guidelines.<\/a><\/p>\n<\/div>\n<\/div>\n<h2 class=\"references\">Works Cited<\/h2>\n<p>Colour Blind Awareness. &#8220;<a href=\"https:\/\/www.colourblindawareness.org\/colour-blindness\/\">About Colour Blindness<\/a>.&#8221; <em>Colour Blind Awareness<\/em>, 2010.<\/p>\n<div class=\"glossary\"><span class=\"screen-reader-text\" id=\"definition\">definition<\/span><template id=\"term_100_1168\"><div class=\"glossary__definition\" role=\"dialog\" data-id=\"term_100_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":1367,"menu_order":4,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[48],"contributor":[],"license":[],"class_list":["post-100","chapter","type-chapter","status-publish","hentry","chapter-type-numberless"],"part":6454,"_links":{"self":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters\/100","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\/1367"}],"version-history":[{"count":25,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters\/100\/revisions"}],"predecessor-version":[{"id":10348,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters\/100\/revisions\/10348"}],"part":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/parts\/6454"}],"metadata":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters\/100\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/media?parent=100"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapter-type?post=100"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/contributor?post=100"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/license?post=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}