{"componentChunkName":"component---src-templates-posts-js","path":"/tools/contrastchecker","result":{"data":{"mdx":{"id":"88a908a6-d8da-5eb8-a7ac-467cf1caae32","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Colour Contrast Checker\",\n  \"path\": \"/tools/contrastchecker\",\n  \"excerpt\": \"Colour and contrast can be used to help all our users, especially those with varying levels of visual impairments.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Masthead = makeShortcode(\"Masthead\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Masthead, {\n    title: \"Colour Contrast Checker\",\n    subheader: \"Colour and contrast can be used to help all our users, especially those with varying levels of visual impairments. It supports our users to see and understand content, interact with the right elements, understand actions, and help communicate mood and tone.\",\n    moreinfoTitle: \"accessibility principles\",\n    moreinfoUrl: \"/principles/accessibility\",\n    mdxType: \"Masthead\"\n  }), mdx(AccessibilityChecker, {\n    mdxType: \"AccessibilityChecker\"\n  }), mdx(\"h2\", null, \"Explanation\"), mdx(\"p\", null, \"This tool follows the Web Content Accessibility Guidelines (WCAG). These are a set of recommendations for making the web more accessible. There are two levels of contrast ratio: \"), mdx(\"div\", {\n    className: \"wcagTbl\"\n  }, mdx(\"div\", {\n    className: \"chckTxt\"\n  }, mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"AA - Minimum contrast\"), \" \", mdx(\"br\", null), \"\\nContrast ratio of at least 4.5:1 for normal text and 3:1 for large or bold text. \"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"AAA - Enhanced contrast\"), \" \", mdx(\"br\", null), \"\\nContrast ratio of at least 7:1 for normal text and 4.5:1 for large or bold text.  \")), mdx(\"div\", {\n    className: \"chckImg\"\n  }, mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"391px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/7761d6a96dc8e48cbf51e4198f08dd3d/14e0c/accKey.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"65.66666666666667%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABwUlEQVQ4y22TWauBYRDH3+//Bdy6cKUoFJHlWEIRSQlxIfu+78ucflMjTuet6Zl9/u/8n8e53+/yfD5VrterHI9Hud1ucjqdVCeOHA4HPS+Xi+aRg2BT+3g8VJzX6yX2rddrKZVK8vPzI41GQ5LJpOTzeSmXy+rPZDKSy+XUb/ZgMJDPz2Eak23i+XyW/X6vk0G43W5lt9sp4tVqpTpxEKNbvYlD0mKx0MLlcqlFIOWcz+eqE8O2OPn4EXyfog03m420Wi0x3QbUajWJx+MSDAb1TCQSEgqFdB2gtCbUmTg0GA6H4nK5xOfzSSQS0WSC7IdB9Xpdut2u9Ho91fFNp1MdbMjfCK0hU4vFolQqFUXJfiAjlUopMlASRxgcDoe1jtxPlI4Z/CLIaMRkxKaazU7tnM1mXzGTNylGgjXCHo/HX8mGxuJ/CXmTAlvsC4ToFKOn02nx+/0Si8Ukm83qbxYKha/dfRLyJoVmbrdbPB6PLt+uCf5msymdTkf6/b60220lZTQa/cuwNgQRjFFUrVZlMploIrvkVfAaotGoBAIBJQTb6/Xqa/n3l+2C0oDbb5eak8UbAQxCpwh2AfEXHfILUgC9eRdlgOkAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Contrast Key\",\n    \"title\": \"Contrast Key\",\n    \"src\": \"/static/7761d6a96dc8e48cbf51e4198f08dd3d/14e0c/accKey.png\",\n    \"srcSet\": [\"/static/7761d6a96dc8e48cbf51e4198f08dd3d/5a46d/accKey.png 300w\", \"/static/7761d6a96dc8e48cbf51e4198f08dd3d/14e0c/accKey.png 391w\"],\n    \"sizes\": \"(max-width: 391px) 100vw, 391px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")))), mdx(\"div\", {\n    className: \"wcagTbl\"\n  }, mdx(\"div\", {\n    className: \"chckTxt smol\"\n  }, mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Contrast Ratio\"), \" \", mdx(\"br\", null), \"\\nThis represents how different one colour is from another, typically written as 1:1 or 21:1.\\nThe greater the difference is between the two numbers, the better the contrast. \")), mdx(\"div\", {\n    className: \"chckImg smol\"\n  }, mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"254px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/ced0bce2e68198e622e488734a276c2e/6a91e/accContrast.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"56.69291338582677%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABSklEQVQoz3VSO8+CQBDk/7f8AW0IBbEzsbCSnsJCg/EVCGJEXhoLHzBfZpO9HF90k2V3b2/n5uZwXq8XPp+P8ff7ja7r0Pe9+C+zZ2x3+FFTgKqqEEURmqZBWZY4n8/I81zqzWaDy+Xy8zADyA1kRuPwfD7HdDrFaDTCbDbDeDzGZDKB53myzpvpnO0Dhrbx6uw9n0+pGdu2Ndf9Zc7tdsM3v9/vxgnE+Hg8TJ9r3+Yc6nW9XkUrxqIoBjmjul1rzr22O3VdS8J4Op2w3+9FfD7EbreTHg9l5DpZMJIxc/ZsN4AsjsejgPAV0zTFdruVB2KPIIfDAavVSnrL5VJystQDDSATMuJAkiQSCc6ckZvJKAxD+L6PxWIB13URBAGyLDO/1wBQNWFNcM3JViUhM7KiLOv1GnEcS18ZDjRUDXTYvsY3DfWl/2v4Bwn0PYoQOjD3AAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Contrast Key\",\n    \"title\": \"Contrast Key\",\n    \"src\": \"/static/ced0bce2e68198e622e488734a276c2e/6a91e/accContrast.png\",\n    \"srcSet\": [\"/static/ced0bce2e68198e622e488734a276c2e/6a91e/accContrast.png 254w\"],\n    \"sizes\": \"(max-width: 254px) 100vw, 254px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")))), mdx(InsightBlock, {\n    insighttype: \"Helpful Hint\",\n    mdxType: \"InsightBlock\"\n  }, \"All colours must be AA compliant but where possible an AAA standard should be met.\"), mdx(\"hr\", null), mdx(\"h2\", null, \"Useful Resources\"), mdx(\"p\", null, \"Below are some useful plugins that can be used to test your designs and get an insight into how colours can affect people with different levels of visual impairments:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    target: \"_blank\",\n    href: \"https://chrome.google.com/webstore/detail/spectrum/ofclemegkcmilinpcimpjkfhjfgmhieb?hl=en\"\n  }, \"Spectrum - test your web page with multiple types of colour vision deficiency\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    target: \"_blank\",\n    href: \"https://chrome.google.com/webstore/detail/funkify-\\u2013-disability-simu/ojcijjdchelkddboickefhnbdpeajdjg?hl=en\"\n  }, \"Funkify - helps you view the web through the eyes of extreme users with different abilities and disabilities\"))));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Colour Contrast Checker"}}},"pageContext":{"id":"88a908a6-d8da-5eb8-a7ac-467cf1caae32"}}}