{"id":4520,"date":"2025-11-12T14:49:40","date_gmt":"2025-11-12T14:49:40","guid":{"rendered":"https:\/\/allin.online\/?post_type=standard&#038;p=4520"},"modified":"2026-09-09T12:23:57","modified_gmt":"2026-09-09T12:23:57","slug":"use-of-colour","status":"publish","type":"standard","link":"https:\/\/allin.online\/cy\/standard\/digital-communications\/content-usability\/use-of-colour\/","title":{"rendered":"Use of Colour"},"content":{"rendered":"\n<div class=\"wp-block-ace-standard-fixed-content flex content-content bg_white padding indent two-column\"><div class=\"content_wrapper\"><h3 id=\"page_sub_nav\" class=\"mobile_only\">DC 2.02 Use of Colour<\/h3><select aria-labelledby=\"page_sub_nav\" class=\"mobile_only\" id=\"nav_select\"><option value=\"#overview\">Overview<\/option><option value=\"#examples\">Practical example<\/option><option value=\"#key_considerations\">Key considerations<\/option><option value=\"#definitions_list\">Definitions and acronyms<\/option><option value=\"#learning_resources\">Learning resources<\/option><option value=\"#linked_standards\">Linked Standards<\/option><option value=\"#references\">References<\/option><\/select><div class=\"action_links mobile_only\"><a href=\"https:\/\/form.jotform.com\/252393341563356?standard=Digital Communications 2.02 Use of Colour\" class=\"feedback_link button bg_secondary white\">Give us feedback on this Standard<\/a><a href=\"https:\/\/allin.online\/cy\/standard\/digital-communications\/\" class=\"return_link\">Back to Digital Communications<\/a><\/div>\n<div id=\"overview\" class=\"wp-block-ace-standard-overview standard-content\"><h3>Overview<\/h3>\n<p class=\"wp-block-paragraph\">Accessible colour choices benefit everyone. They reduce visual and sensory barriers, making content easier to read in bright light or with different screen settings.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Good colour use helps people see and understand information clearly. This means selecting colours with strong contrast and avoiding hard-to-distinguish combinations. Accessible use of colour can also make a website more visually engaging, helping some users absorb content better.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, don\u2019t rely on colour alone to convey meaning. Some individuals cannot see colour or perceive it differently. Always pair your colour choices with clear text, symbols, or patterns to ensure everyone can access the information.<\/p>\n<\/div>\n\n\n\n<div id=\"examples\" class=\"wp-block-ace-standard-examples bg_grey inner-padding standard-examples\"><h3>Practical example<\/h3>\n<h4 class=\"wp-block-ace-heading\"><\/h4>\n\n\n\n<div class=\"wp-block-ace-standard-example standard-example\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-ace-image content-image alt-block\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-ace-content-blocks border-top\">\n<div class=\"wp-block-ace-intro content-intro\"><p><\/p><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.nhs.uk\/\">The NHS website <\/a>uses colour to enhance clarity, but it\u2019s not the only method for conveying meaning. Links are both underlined and coloured, with high contrast between text and background.<\/li>\n\n\n\n<li><a href=\"https:\/\/weareunlimited.org.uk\/\">The Unlimited website<\/a> has a high contrast toggle. This feature changes the background and text colours to a <span data-definition=\"high-contrast-setting\" data-definition-id=\"4387\" title=\"High contrast setting\" data-definition-name=\"High contrast setting\" class=\"ace-definition-inserter\"><\/span> to improve readability for users with visual access needs.<\/li>\n\n\n\n<li><a href=\"https:\/\/wearecolorblind.com\/examples\/trello-colorblind-friendly-mode\/\">Trello <\/a>offers a colour-blind-friendly mode for their labels. However, this mode can make the interface feel too busy for some users. Trello lets users switch this mode on or off as needed. When activated, small patterns appear alongside colour-coded labels. These patterns help sighted users distinguish between labels without relying solely on colour.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div id=\"key_considerations\" class=\"wp-block-ace-standard-key-considerations standard-key-considerations standard-content\"><h3>Key considerations<\/h3>\n<h4 class=\"wp-block-ace-heading\">Accessible use of colour<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Ensure text has a <span data-definition=\"contrast-ratio\" data-definition-id=\"4338\" title=\"Contrast ratio\" data-definition-name=\"Contrast ratio\" class=\"ace-definition-inserter\"><\/span> of at least 4.5:1 for body text and 3:1 for larger text. Avoid using colour alone to convey meaning; incorporate patterns, icons, or text labels as well. Don\u2019t use red and green colour combinations, as some individuals struggle to differentiate between them. See <a href=\"https:\/\/allin.online\/standard\/digital-communications\/monitoring-and-continuous-improvement\/adopting-web-content-accessibility-guidelines-wcag\/\">Digital Communications 6.03 Adopting Web Content Accessibility Guidelines<\/a> for more information.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Utilise colour contrast checkers or accessibility tools to confirm that your chosen colours are accessible. Some tools demonstrate how colour combinations might appear to people with a range of visual access needs. Other tools test colour combinations for <span title=\"WCAG\" data-definition-name=\"WCAG\" data-definition=\"wcag\" data-definition-id=\"4507\" class=\"ace-definition-inserter\"><\/span>compliance. Examples of tools are provided in the Learning Resources section of this standard.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use colours consistently across your website and marketing materials to create familiarity. Whenever possible, provide options for users to switch to high contrast themes. Verify that colours remain clear when viewed in <span data-definition=\"greyscale\" data-definition-id=\"4384\" title=\"Greyscale\" data-definition-name=\"Greyscale\" class=\"ace-definition-inserter\"><\/span>or printed in black and white.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Engage individuals with lived experience of visual barriers for testing and feedback. See <a href=\"https:\/\/allin.online\/standard\/digital-communications\/monitoring-and-continuous-improvement\/audits-testing-and-feedback\/\">Digital Communications 6.04 Audits, Testing and Feedback<\/a> for further information. Include guidance in your brand guidelines on which colours can be used in WCAG AA or AAA compliant combinations and which are not accessible together. Share these accessible colour palettes and guidelines with partners or suppliers.<\/p>\n\n\n\n<h4 class=\"wp-block-ace-heading\">Supporting text<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">You should not use colour to communicate meaning without supporting text.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Consider whether your organisations website uses colour to communicate key information. The following are some common examples.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Availability indicators: <\/strong>These utilise a \u2018traffic light system\u2019 of green, yellow, and red to display ticket sales. Always include a pattern, icon, or text label alongside colour.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Price zone indicators:<\/strong> Colour-coded seat icons indicate pricing for different seats. Ensure seats are also differentiated through additional means, like distinct icons or text labels.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Online status for customer support lines: <\/strong>Colours indicate the busyness of support lines. Accompany colour with text and patterns to enhance clarity.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\n<div id=\"specification_table\" class=\"wp-block-ace-specification-table bg_white specification_table hide\"><h3>Standard &#8211; specifications<\/h3><div class=\"bg_grey inner-padding\"><table class=\"specification-table\"><tbody><\/tbody><\/table><\/div><\/div>\n\n\n\n<div id=\"influencing_accessible_practice\" class=\"wp-block-ace-standard-influencing-accessible-practice standard-influencing-accessible-practice standard-content hide\"><h3>Influencing accessible practice<\/h3>\n<h4 class=\"wp-block-ace-heading\"><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\n<div id=\"definitions_list\" class=\"wp-block-ace-definitions-list bg_white\"><h3>Definitions and acronyms<\/h3><div class=\"ace-definitions-list bg_grey inner-padding\"><div class=\"ace-definition-item\"><h4>Contrast ratio<\/h4><div><p>Colour contrast ratios are numbers that compare the brightness of text to that of its background. Higher contrast between text and background makes text easier to read. WCAG recommends a contrast ratio of at least 4.5 to 1 for body text.<\/p>\n<\/div><\/div><div class=\"ace-definition-item\"><h4>Greyscale<\/h4><div><p>Viewing or displaying content in black and white. This is useful for testing whether content is still understandable without colour.<\/p>\n<\/div><\/div><div class=\"ace-definition-item\"><h4>High contrast setting<\/h4><div><p>A colour setting that increases the difference between text and background. These settings help people with low vision or visual fatigue.<\/p>\n<\/div><\/div><div class=\"ace-definition-item\"><h4>User interface components<\/h4><div><p>Parts where users interact with the website, such as dropdown menus, text boxes and toggle switches.<\/p>\n<\/div><\/div><div class=\"ace-definition-item\"><h4>WCAG<\/h4><div><p>Web Content Accessibility Guidelines. A set of international accessibility standards for digital content.<\/p>\n<\/div><\/div><\/div><\/div>\n\n\n\n<div id=\"learning_resources\" class=\"wp-block-ace-standard-learning-resources standard-content\"><h3>Learning resources<\/h3><div class=\"links-on-newtab-text\"><\/div>\n<h4 class=\"wp-block-ace-heading\"><strong>Relevant WCAG sections<\/strong>&nbsp;<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/use-of-color\">1.4.1 Use of Colour (Level A)<\/a> Colour must not be the only visual way of conveying information, indicating an action, prompting a response, or distinguishing an item.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/contrast-minimum\">1.4.3 Contrast (Minimum) (Level AA)<\/a> Text and images of text must have a contrast ratio of at least 4.5:1 against the background for normal text and 3:1 for large text. This supports readability for users with low vision or colour vision differences.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/non-text-contrast.html\">1.4.11 Non-Text Contrast (Level AA<\/a>) Visual elements like icons, form fields, graphs, and buttons must have a <span data-definition=\"contrast-ratio\" data-definition-id=\"4338\" title=\"Contrast ratio\" data-definition-name=\"Contrast ratio\" class=\"ace-definition-inserter\"><\/span> of at least 3:1 against adjacent colours. This applies to any essential graphical objects and <span data-definition=\"user-interface-components\" data-definition-id=\"4499\" title=\"User interface components\" data-definition-name=\"User interface components\" class=\"ace-definition-inserter\"><\/span>.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/contrast-enhanced.html\">1.4.6 Contrast (Enhanced) (Level AAA)<\/a> Provides stronger contrast requirements: 7:1 for normal text and 4.5:1 for large text, supporting users with more severe visual impairments.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/text-spacing.html\">1.4.12 Text Spacing (Level AA)<\/a> While not about colour directly, this supports overall readability when combined with good contrast and layout.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<h4 class=\"wp-block-ace-heading\">More resources<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"AAArdvark: WCAG in Plain English&nbsp;\">AAArdvark: WCAG in Plain English&nbsp;<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/contrast-grid.eightshapes.com\/?version=1.1.0&amp;background-colors=&amp;foreground-colors=%23FFFFFF%2C%20White%0D%0A%23F2F2F2%0D%0A%23DDDDDD%0D%0A%23CCCCCC%0D%0A%23888888%0D%0A%23404040%2C%20Charcoal%0D%0A%23000000%2C%20Black%0D%0A%232F78C5%2C%20Effective%20on%20Extremes%0D%0A%230F60B6%2C%20Effective%20on%20Lights%0D%0A%23398EEA%2C%20Ineffective%0D%0A&amp;es-color-form__tile-size=compact&amp;es-color-form__show-contrast=aaa&amp;es-color-form__show-contrast=aa&amp;es-color-form__show-contrast=aa18&amp;es-color-form__show-contrast=dnp\">Eight Shapes Contrast Grid<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wearecolorblind.com\/examples\/trello-colorblind-friendly-mode\/\">We Are Color Blind: Trello Colorblind Friendly Mode<\/a><\/li>\n\n\n\n<li><a href=\"WhoCanUse: Who Can Use This Colour Combination\">WhoCanUse: Who Can Use This Colour Combination<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/learn.attitudeiseverything.org.uk\/mod\/lesson\/view.php?id=458&amp;pageid=189&amp;startlastseen=yes\">Attitude is Everything: Live Events Access Charter<\/a><\/li>\n\n\n\n<li><a href=\"WebAIM: Colour Contrast Checker\">WebAIM: Colour Contrast Checker<\/a><\/li>\n<\/ul>\n\n\n\n<div id=\"skills_development\" class=\"wp-block-ace-standard-skills-development standard-skills-development standard-content hide\"><h3>Support and skills development<\/h3>\n<h4 class=\"wp-block-ace-heading\"><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\t<div id=\"linked_standards\" class=\"wp-block page-links wp-block-ace-linked-standards \">\n\t\t\t<h3 class=\"block-title\">\n\t\t\t\tLinked Standards\t\t\t<\/h3>\n\t\t\t\t\t\t<div class='flex flex_50 link_blocks'>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"flex_item post_item bg_grey--dark\">\n\t\t\t\t\t\t\t<picture class=\"featured-img alt-block\">\n\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/allin.online\/wp-content\/themes\/ace\/assets\/fallback.jpeg\" alt=\"Placeholder image\" \/>\t\t\t\t\t\t\t\t<div class = \"alt_block\">\n\t\t\t\t\t\t\t\t\t<button class=\"alt_trigger\" aria-label=\"Open the Image Description\">Amgen<\/button>\n\t\t\t\t\t\t\t\t\t<div class=\"alt_modal\" id=\"0\" role=\"dialog\" aria-label=\"Image Description\" aria-describedby=\"desc_4575\">\n\t\t\t\t\t\t\t\t\t\t<p id=\"desc_4575\">Placeholder image<\/p>\n\t\t\t\t\t\t\t\t\t\t<button class=\"close\">Cau <span class=\"screen-reader-text\">Disgrifiad Delwedd\n<\/span><\/button>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/picture>\n\t\t\t\t\t\t\t<div class=\"linked_standard--content inner-padding card\">\n\t\t\t\t\t\t\t\t<h4>DC 6.03 Adopting Web Content Accessibility Guidelines (WCAG)<\/h4>\n\t\t\t\t\t\t\t\t<p>Web Content Accessibility Guidelines (WCAG) are the international standard for digital accessibility.<a href=\"\/login\" class=\"locked card_target\"><span aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14.999\" height=\"18\" viewBox=\"0 0 14.999 18\">\n  <path id=\"unlock\" d=\"M13.507,7.5H3.75V5.249A3.741,3.741,0,0,1,11.022,4l1.133-1.133a5.234,5.234,0,0,0-9.9,2.378V7.5H1.493A1.5,1.5,0,0,0,0,9V16.5A1.5,1.5,0,0,0,1.493,18H13.507A1.5,1.5,0,0,0,15,16.5V9a1.5,1.5,0,0,0-1.492-1.5\" transform=\"translate(0)\" fill=\"#472961\" fill-rule=\"evenodd\"\/>\n<\/svg><br \/>\n<\/span>This content is only available to logged in users.<\/a><\/p>\n\t\t\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"31.832\" height=\"24\" viewBox=\"0 0 31.832 24\">\n  <path id=\"arrow\" d=\"M33.728,24.848l-10.2-10.2a1.773,1.773,0,1,0-2.508,2.508l7.189,7.189H4.272a1.772,1.772,0,0,0,0,3.545H28.178L21.022,35.08a1.755,1.755,0,0,0,0,2.508,1.827,1.827,0,0,0,1.271.536,1.747,1.747,0,0,0,1.271-.536L33.8,27.355a1.827,1.827,0,0,0,.536-1.271,2.283,2.283,0,0,0-.6-1.237Z\" transform=\"translate(-2.499 -14.123)\" fill=\"#472961\"\/>\n<\/svg>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"flex_item post_item bg_grey--dark\">\n\t\t\t\t\t\t\t<picture class=\"featured-img alt-block\">\n\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/allin.online\/wp-content\/themes\/ace\/assets\/fallback.jpeg\" alt=\"Placeholder image\" \/>\t\t\t\t\t\t\t\t<div class = \"alt_block\">\n\t\t\t\t\t\t\t\t\t<button class=\"alt_trigger\" aria-label=\"Open the Image Description\">Amgen<\/button>\n\t\t\t\t\t\t\t\t\t<div class=\"alt_modal\" id=\"0\" role=\"dialog\" aria-label=\"Image Description\" aria-describedby=\"desc_4576\">\n\t\t\t\t\t\t\t\t\t\t<p id=\"desc_4576\">Placeholder image<\/p>\n\t\t\t\t\t\t\t\t\t\t<button class=\"close\">Cau <span class=\"screen-reader-text\">Disgrifiad Delwedd\n<\/span><\/button>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/picture>\n\t\t\t\t\t\t\t<div class=\"linked_standard--content inner-padding card\">\n\t\t\t\t\t\t\t\t<h4>DC 6.04 Audits, Testing, and Feedback<\/h4>\n\t\t\t\t\t\t\t\t<p>Regular audits help identify barriers, support inclusive design, legal compliance, and maintain a cycle of continuous improvement.<a href=\"\/login\" class=\"locked card_target\"><span aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14.999\" height=\"18\" viewBox=\"0 0 14.999 18\">\n  <path id=\"unlock\" d=\"M13.507,7.5H3.75V5.249A3.741,3.741,0,0,1,11.022,4l1.133-1.133a5.234,5.234,0,0,0-9.9,2.378V7.5H1.493A1.5,1.5,0,0,0,0,9V16.5A1.5,1.5,0,0,0,1.493,18H13.507A1.5,1.5,0,0,0,15,16.5V9a1.5,1.5,0,0,0-1.492-1.5\" transform=\"translate(0)\" fill=\"#472961\" fill-rule=\"evenodd\"\/>\n<\/svg><br \/>\n<\/span>This content is only available to logged in users.<\/a><\/p>\n\t\t\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"31.832\" height=\"24\" viewBox=\"0 0 31.832 24\">\n  <path id=\"arrow\" d=\"M33.728,24.848l-10.2-10.2a1.773,1.773,0,1,0-2.508,2.508l7.189,7.189H4.272a1.772,1.772,0,0,0,0,3.545H28.178L21.022,35.08a1.755,1.755,0,0,0,0,2.508,1.827,1.827,0,0,0,1.271.536,1.747,1.747,0,0,0,1.271-.536L33.8,27.355a1.827,1.827,0,0,0,.536-1.271,2.283,2.283,0,0,0-.6-1.237Z\" transform=\"translate(-2.499 -14.123)\" fill=\"#472961\"\/>\n<\/svg>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\n\n\t<div id=\"references\" class=\"wp_block references wp-block-ace-standard-references \">\n\t\t<h3 class=\"block-title\">\n\t\t\tReferences\t\t<\/h3>\n\n\t\t<div class=\"links-on-newtab-text\"><\/div>\n\t\t<ol class=\"references-list\">\n\t\t\t\t\t\t\t<li class = \"references-list-item\"><p><span class=\"TextRun SCXW200808981 BCX8\" lang=\"EN-GB\" xml:lang=\"EN-GB\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW200808981 BCX8\">Attitude is Everything (2025)\u00a0<\/span><\/span><span class=\"TextRun SCXW200808981 BCX8\" lang=\"EN-GB\" xml:lang=\"EN-GB\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW200808981 BCX8\">Live Events Access Charter: Outward Voice: Digital Design. [Available at:\u00a0<\/span><\/span><a class=\"Hyperlink SCXW200808981 BCX8\" href=\"https:\/\/learn.attitudeiseverything.org.uk\/mod\/lesson\/view.php?id=458&amp;pageid=189&amp;startlastseen=yes\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"TextRun Underlined SCXW200808981 BCX8\" lang=\"EN-GB\" xml:lang=\"EN-GB\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW200808981 BCX8\" data-ccp-charstyle=\"Hyperlink\">Attitude is Everything Charter: Digital Design\u00a0<\/span><\/span><\/a><a class=\"Hyperlink SCXW200808981 BCX8\" href=\"https:\/\/learn.attitudeiseverything.org.uk\/mod\/lesson\/view.php?id=249&amp;pageid=113&amp;startlastseen=yes\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"TextRun Underlined SCXW200808981 BCX8\" lang=\"EN-GB\" xml:lang=\"EN-GB\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW200808981 BCX8\" data-ccp-charstyle=\"Hyperlink\">]<\/span><\/span><\/a><span class=\"TextRun SCXW200808981 BCX8\" lang=\"EN-GB\" xml:lang=\"EN-GB\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW200808981 BCX8\">\u00a0<\/span><\/span><span class=\"TextRun SCXW200808981 BCX8\" lang=\"EN-GB\" xml:lang=\"EN-GB\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW200808981 BCX8\">\u00a0<\/span><\/span><span class=\"EOP SCXW200808981 BCX8\" data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559740&quot;:360}\">\u00a0<\/span><\/p>\n<\/li>\n\t\t\t\t\t\t\t<li class = \"references-list-item\"><p>Eight Shapes (n.d.), Contrast Grid [online] Available at: <a href=\"https:\/\/contrast-grid.eightshapes.com\/?version=1.1.0&amp;background-colors=&amp;foreground-colors=%23FFFFFF%2C%20White%0D%0A%23F2F2F2%0D%0A%23DDDDDD%0D%0A%23CCCCCC%0D%0A%23888888%0D%0A%23404040%2C%20Charcoal%0D%0A%23000000%2C%20Black%0D%0A%232F78C5%2C%20Effective%20on%20Extremes%0D%0A%230F60B6%2C%20Effective%20on%20Lights%0D%0A%23398EEA%2C%20Ineffective%0D%0A&amp;es-color-form__tile-size=compact&amp;es-color-form__show-contrast=aaa&amp;es-color-form__show-contrast=aa&amp;es-color-form__show-contrast=aa18&amp;es-color-form__show-contrast=dnp\">Eight Shapes Contrast Grid<\/a> [Accessed 14 August 2025]<\/p>\n<\/li>\n\t\t\t\t\t\t\t<li class = \"references-list-item\"><p>We Are Color Blind (n.d.), Trello Colorblind Friendly Mode [online] Available at: <a href=\"https:\/\/wearecolorblind.com\/examples\/trello-colorblind-friendly-mode\/\">Trello Colorblind friendly mode<\/a> [Accessed 14 August 2025]<\/p>\n<\/li>\n\t\t\t\t\t\t\t<li class = \"references-list-item\"><p>WebAIM (n.d.), Contrast Checker [online] Available at:<a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\"> WebAIM contrast checker<\/a> [Accessed 25 October 2025]<\/p>\n<\/li>\n\t\t\t\t\t\t\t<li class = \"references-list-item\"><p>Who Can Use (n.d.) Who Can Use This Colour Combination? [online] Available at: <a href=\"https:\/\/www.whocanuse.com\/\">Who can use this colour combination tool<\/a> [Accessed 04 June 2025]<\/p>\n<\/li>\n\t\t\t\t\t\t\t<li class = \"references-list-item\"><p>World Wide Web Consortium (W3C), (n.d.) Web Accessibility Initiative WAI Standards Guidelines [online] Available at: <a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\">W3C Standards guidance<\/a> [Accessed 26 October 2025]<\/p>\n<\/li>\n\t\t\t\t\t<\/ol>\n\t<\/div> \n<\/div><aside class=\"sidebar flex-item\"><h3>DC 2.02 Use of Colour<\/h3><nav class=\"sub-nav\"><ul><li><a href=\"#overview\">Overview (Back to top)<\/a><\/li><li><a href=\"#examples\">Practical example<\/a><\/li><li><a href=\"#key_considerations\">Key considerations<\/a><\/li><li><a href=\"#definitions_list\">Definitions and acronyms<\/a><\/li><li><a href=\"#learning_resources\">Learning resources<\/a><\/li><li><a href=\"#linked_standards\">Linked Standards<\/a><\/li><li><a href=\"#references\">References<\/a><\/li><\/ul><\/nav><div class=\"hide fixed scroll_menu\" aria-live=\"polite\"><h3>DC 2.02 Use of Colour<\/h3><ul><li><a href=\"#overview\">Overview (Back to top)<\/a><\/li><li><a href=\"#examples\">Practical example<\/a><\/li><li><a href=\"#key_considerations\">Key considerations<\/a><\/li><li><a href=\"#definitions_list\">Definitions and acronyms<\/a><\/li><li><a href=\"#learning_resources\">Learning resources<\/a><\/li><li><a href=\"#linked_standards\">Linked Standards<\/a><\/li><li><a href=\"#references\">References<\/a><\/li><\/ul><a href=\"https:\/\/form.jotform.com\/252393341563356?standard=Digital Communications 2.02 Use of Colour\" class=\"feedback_link button bg_secondary white\">Give us feedback on this Standard<\/a><a href=\"https:\/\/allin.online\/cy\/standard\/digital-communications\/\" class=\"return_link\">Back to Digital Communications<\/a><\/div><a href=\"https:\/\/form.jotform.com\/252393341563356?standard=Digital Communications 2.02 Use of Colour\" class=\"feedback_link button bg_secondary white\">Give us feedback on this Standard<\/a><a href=\"https:\/\/allin.online\/cy\/standard\/digital-communications\/\" class=\"return_link\">Back to Digital Communications<\/a><\/aside><\/div>\n","protected":false},"featured_media":0,"parent":4518,"menu_order":2,"template":"","class_list":["post-4520","standard","type-standard","status-publish","hentry"],"acf":{"short_description":"Make accessible colour choices and avoid relying on colour alone or using colour combinations with poor contrast to communicate information. Check your colour choices to ensure they work for everyone. ","make_visible_to_taster_account":false},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Use of Colour - All In<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/allin.online\/cy\/standard\/digital-communications\/content-usability\/use-of-colour\/\" \/>\n<meta property=\"og:locale\" content=\"cy_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Use of Colour - All In\" \/>\n<meta property=\"og:url\" content=\"https:\/\/allin.online\/cy\/standard\/digital-communications\/content-usability\/use-of-colour\/\" \/>\n<meta property=\"og:site_name\" content=\"All In\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-09T12:23:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/allin.online\/wp-content\/uploads\/2023\/11\/All-In_OG-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/allin.online\\\/cy\\\/standard\\\/digital-communications\\\/content-usability\\\/use-of-colour\\\/\",\"url\":\"https:\\\/\\\/allin.online\\\/cy\\\/standard\\\/digital-communications\\\/content-usability\\\/use-of-colour\\\/\",\"name\":\"Use of Colour - All In\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/allin.online\\\/cy\\\/#website\"},\"datePublished\":\"2025-11-12T14:49:40+00:00\",\"dateModified\":\"2026-09-09T12:23:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/allin.online\\\/cy\\\/standard\\\/digital-communications\\\/content-usability\\\/use-of-colour\\\/#breadcrumb\"},\"inLanguage\":\"cy-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/allin.online\\\/cy\\\/standard\\\/digital-communications\\\/content-usability\\\/use-of-colour\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/allin.online\\\/cy\\\/standard\\\/digital-communications\\\/content-usability\\\/use-of-colour\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Hafan\",\"item\":\"https:\\\/\\\/allin.online\\\/cy\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Digital Communications\",\"item\":\"https:\\\/\\\/allin.online\\\/cy\\\/standard\\\/digital-communications\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Content Usability\",\"item\":\"https:\\\/\\\/allin.online\\\/cy\\\/standard\\\/digital-communications\\\/content-usability\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Use of Colour\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/allin.online\\\/cy\\\/#website\",\"url\":\"https:\\\/\\\/allin.online\\\/cy\\\/\",\"name\":\"All in\",\"description\":\"Croeso i bawb\",\"publisher\":{\"@id\":\"https:\\\/\\\/allin.online\\\/cy\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/allin.online\\\/cy\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"cy-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/allin.online\\\/cy\\\/#organization\",\"name\":\"All in\",\"url\":\"https:\\\/\\\/allin.online\\\/cy\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"cy-GB\",\"@id\":\"https:\\\/\\\/allin.online\\\/cy\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/allin.online\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/696x696.png\",\"contentUrl\":\"https:\\\/\\\/allin.online\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/696x696.png\",\"width\":696,\"height\":696,\"caption\":\"All in\"},\"image\":{\"@id\":\"https:\\\/\\\/allin.online\\\/cy\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Use of Colour - All In","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/allin.online\/cy\/standard\/digital-communications\/content-usability\/use-of-colour\/","og_locale":"cy_GB","og_type":"article","og_title":"Use of Colour - All In","og_url":"https:\/\/allin.online\/cy\/standard\/digital-communications\/content-usability\/use-of-colour\/","og_site_name":"All In","article_modified_time":"2026-09-09T12:23:57+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/allin.online\/wp-content\/uploads\/2023\/11\/All-In_OG-image.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/allin.online\/cy\/standard\/digital-communications\/content-usability\/use-of-colour\/","url":"https:\/\/allin.online\/cy\/standard\/digital-communications\/content-usability\/use-of-colour\/","name":"Use of Colour - All In","isPartOf":{"@id":"https:\/\/allin.online\/cy\/#website"},"datePublished":"2025-11-12T14:49:40+00:00","dateModified":"2026-09-09T12:23:57+00:00","breadcrumb":{"@id":"https:\/\/allin.online\/cy\/standard\/digital-communications\/content-usability\/use-of-colour\/#breadcrumb"},"inLanguage":"cy-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/allin.online\/cy\/standard\/digital-communications\/content-usability\/use-of-colour\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/allin.online\/cy\/standard\/digital-communications\/content-usability\/use-of-colour\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Hafan","item":"https:\/\/allin.online\/cy\/"},{"@type":"ListItem","position":2,"name":"Digital Communications","item":"https:\/\/allin.online\/cy\/standard\/digital-communications\/"},{"@type":"ListItem","position":3,"name":"Content Usability","item":"https:\/\/allin.online\/cy\/standard\/digital-communications\/content-usability\/"},{"@type":"ListItem","position":4,"name":"Use of Colour"}]},{"@type":"WebSite","@id":"https:\/\/allin.online\/cy\/#website","url":"https:\/\/allin.online\/cy\/","name":"All in","description":"Croeso i bawb","publisher":{"@id":"https:\/\/allin.online\/cy\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/allin.online\/cy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"cy-GB"},{"@type":"Organization","@id":"https:\/\/allin.online\/cy\/#organization","name":"All in","url":"https:\/\/allin.online\/cy\/","logo":{"@type":"ImageObject","inLanguage":"cy-GB","@id":"https:\/\/allin.online\/cy\/#\/schema\/logo\/image\/","url":"https:\/\/allin.online\/wp-content\/uploads\/2023\/11\/696x696.png","contentUrl":"https:\/\/allin.online\/wp-content\/uploads\/2023\/11\/696x696.png","width":696,"height":696,"caption":"All in"},"image":{"@id":"https:\/\/allin.online\/cy\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/allin.online\/cy\/wp-json\/wp\/v2\/standard\/4520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/allin.online\/cy\/wp-json\/wp\/v2\/standard"}],"about":[{"href":"https:\/\/allin.online\/cy\/wp-json\/wp\/v2\/types\/standard"}],"up":[{"embeddable":true,"href":"https:\/\/allin.online\/cy\/wp-json\/wp\/v2\/standard\/4518"}],"wp:attachment":[{"href":"https:\/\/allin.online\/cy\/wp-json\/wp\/v2\/media?parent=4520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}