{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/color-contrast-checker-that-makes-suggestions-for-better-colors/","result":{"data":{"mdx":{"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/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Color contrast checker that makes suggestions for better colors\",\n  \"cover\": \"\",\n  \"date\": \"2020-03-30\"\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `For the past week or so I've been helping out with `, mdx(\"a\", {\n    href: \"https://github.com/BustByte/coronastatus/\"\n  }, `Coronastatus`), `,\nan online platform that's now live in 20+ countries where people can self-report their health status in relation to the\nCOVID-19 pandemic. One of the things I spent time on was making sure that the site and the colors used were accessible.`), mdx(\"p\", null, `Polypane made it super easy to check if a color combination had enough contrast but it doesn't tell you what\ncolor would be good enough. There are online tools for that available but they were slow and I quickly decided to built it\nright into Polypane. In the next version the contrast checker overlay will give you suggestions for better colors:`), mdx(Tweet, {\n    tweetLink: \"kilianvalkhof/status/1243121547142930432\",\n    align: \"center\",\n    mdxType: \"Tweet\"\n  }), mdx(\"p\", null, `And as I promised in that tweet, I also started working on an online tool. There are many color contrast checker tools\nonline but they don't update on-the-fly, don't actually calculate the contrast correctly (by not taking alpha into account)\nor don't give suggestions. I think tools need to be `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `fast, correct and actionable`), ` if they're worth using so I decided\nto build one that is.`), mdx(\"p\", null, `It updates on the fly, giving you the ratio and suggested colors as you type your color or as you use the color picker.`), mdx(\"p\", null, `It takes transparency into account for the foreground color (mixing it with the background color before calculating the contrast ratio) and the background color (with a warning.)`), mdx(\"p\", null, `It suggest the closest color by luminance that meets the required contrast ratio.`), mdx(\"p\", null, `It does this for both the AA and AAA levels of the WCAG, and lets you know when the contrast is enough for all text, just for large text, or for no text.`), mdx(\"p\", null, `Oh, and it saves your colors and preferred level in the URL, so you can share it out easily :)`), mdx(\"p\", null, `Go check it out here:`), mdx(\"h3\", {\n    \"id\": \"color-contrast-checker-that-makes-suggestions-for-better-colors\"\n  }, mdx(\"a\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"href\": \"/color-contrast/\"\n  }), `Color contrast checker that makes suggestions for better colors`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"tableOfContents":{"items":[{"url":"#color-contrast-checker-that-makes-suggestions-for-better-colors","title":"Color contrast checker that makes suggestions for better colors"}]},"excerpt":"For the past week or so I've been helping out with  Coronastatus ,\nan online platform that's now live in 20+ countries where people can self-report their health…","frontmatter":{"title":"Color contrast checker that makes suggestions for better colors","cover":"","date":"2020-03-30","updated":null},"fields":{"slug":"/blog/color-contrast-checker-that-makes-suggestions-for-better-colors/","date":"2020-03-29T22:00:00.000Z","ogFileName":"color-contrast-checker-that-makes-suggestions-for-better-colors"}}},"pageContext":{"slug":"/blog/color-contrast-checker-that-makes-suggestions-for-better-colors/"}},"staticQueryHashes":["4164364741","425175329"]}