{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/colorcontrast-app-a-new-place-for-our-color-contrast-checker/","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\": \"ColorContrast.App: a new place for our color contrast checker\",\n  \"cover\": \"/blogs/colorcontrastapp/cover.svg\",\n  \"noshadow\": true,\n  \"date\": \"2023-04-13\",\n  \"type\": [\"announcement\"]\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, `We first released our `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/color-contrast/\"\n  }), `color contrast checker`), ` three years ago. At the time it was one of the first ones that `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/blog/color-contrast-checker-that-makes-suggestions-for-better-colors/\"\n  }), `gave suggestions`), `, based on the needs I had while working on an open-source corona tracking app.`), mdx(\"p\", null, `Later on the contrast checker was updated with support for `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/blog/the-eyedropper-api-pick-colors-from-anywhere-on-your-screen/\"\n  }), `the new EyeDropper API`), ` so you could pick colors from anywhere on your screen as well as the ability to set your preferred format between hex, rgb, hsl and hwb.`), mdx(\"p\", null, `We've been adding a bunch more, read on below!`), mdx(\"h2\", {\n    \"id\": \"a-new-home-colorcontrastapp\"\n  }, `A new home: `, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"https://colorcontrast.app\"\n  }), `ColorContrast.App`)), mdx(\"p\", null, `And now it's time for our color contrast checker to get a new home at `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://colorcontrast.app\"\n  }), `ColorContrast.App`), `! It'll still be available here `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/color-contrast/\"\n  }), `on the site`), ` as well, but the short, memorable domain should make it easier to find and share.`), mdx(\"h2\", {\n    \"id\": \"dark-mode\"\n  }, `Dark mode`), mdx(\"p\", null, `While moving the contrast checker to a new domain, we also took the opportunity to add a dark mode. The site will by default use whatever your system default is (and change along with it) unless you explicitly set it to light or dark mode, then it'll stay that way.`), mdx(\"img\", {\n    src: lightdark,\n    alt: \"Ligth and dark mode side by side in Polypane\",\n    className: \"imgshadow\"\n  }), mdx(\"h2\", {\n    \"id\": \"apca\"\n  }, `APCA`), mdx(\"p\", null, `Recently, we added support for APCA in `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/blog/polypane-13-1/#apca-support-in-the-color-picker\"\n  }), `Polypane 13.1`), ` and based on that we've also added support for it in our online color contrast checker. While APCA is not a standard yet, it's a more reasonable way to calculate contrast (though it is also stricter compared to WCAG 2) so it's good to contrast and compare.`), mdx(\"img\", {\n    src: apca,\n    alt: \"APCA rating\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `While WCAG 2 has a well known set of limits for contrast, APCA's limits are more fine-grained and are more context and font-dependent. In order to make the resulting values more easily digestible, we're grading contrasts on three levels:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `45`), `: For large (36px or more) or bold (24px or more) or non-text elements.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `60`), `: For medium-size (24px or more) or bold (16px) text.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `75`), `: For normal body text.`)), mdx(\"p\", null, `These roughly correspond to the middle of APCA's current \"Bronze\" level scoring and we've been in contact with `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.myndex.com/\"\n  }), `Myndex`), ` to validate this approach.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `We're keen to hear your thoughts on these rating levels`), `, so let us know if they work for you (or why not). For a more fine-grained set of scores there is always the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.myndex.com/APCA/\"\n  }), `official APCA Contrast calculator`), `.`), mdx(\"h2\", {\n    \"id\": \"color-blindness-simulators\"\n  }, `Color Blindness Simulators`), mdx(\"p\", null, `If you've used Polypane you know it ships with `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/debug-tools/#simulators\"\n  }), `over 20 different simulators`), `. In ColorContrast.App you can now switch between the four most popular ones and get a live preview of what the colors (can) look like for someone with that specific color blindness.`), mdx(\"p\", null, `You can now pick from the following simulators and get an instant preview of your selected colors:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Protanopia`), `: Red-blindness`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Deuteranopia`), `: Green-blindness`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Tritanopia`), `: Blue-blindness`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Achromatopsia`), `: Total color blindness`)), mdx(\"video\", {\n    src: simulators,\n    controls: true,\n    muted: true,\n    playsInline: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `Please keep in mind that `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `you should not change colors based on what you see with these simulators on`), `. Both the WCAG and APCA ratings already take visual impairments into account, so use the rating to determine if a set of colors has enough contrast.`), mdx(\"h2\", {\n    \"id\": \"suggestion-previews\"\n  }, `Suggestion previews`), mdx(\"p\", null, `Lastly, when you now hover over any of the suggested colors, the examples now update to show you what the text or background would look like with that color:`), mdx(\"video\", {\n    src: previews,\n    controls: true,\n    muted: true,\n    playsInline: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"div\", {\n    \"style\": {\n      \"textAlign\": \"center\"\n    }\n  }, mdx(\"h2\", {\n    parentName: \"div\"\n  }, `Get it`), `\n  `, mdx(\"p\", {\n    parentName: \"div\"\n  }, `Use the new contrast checker at`), `\n  `, mdx(\"p\", _extends({\n    parentName: \"div\"\n  }, {\n    \"style\": {\n      \"marginTop\": \"0\",\n      \"fontWeight\": \"bold\",\n      \"fontSize\": \"2.5rem\"\n    }\n  }), `\n   `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://colorcontrast.app\"\n  }), ` `, mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"src\": \"/blogs/colorcontrastapp/cover.svg\",\n    \"alt\": \"\",\n    \"style\": {\n      \"width\": \"3rem\",\n      \"height\": \"3rem\",\n      \"verticalAlign\": \"middle\"\n    }\n  })), ` ColorContrast.App`), `\n  `)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"tableOfContents":{"items":[{"url":"#a-new-home-colorcontrastapp","title":"A new home: ColorContrast.App"},{"url":"#dark-mode","title":"Dark mode"},{"url":"#apca","title":"APCA"},{"url":"#color-blindness-simulators","title":"Color Blindness Simulators"},{"url":"#suggestion-previews","title":"Suggestion previews"}]},"excerpt":"We first released our  color contrast checker  three years ago. At the time it was one of the first ones that  gave suggestions , based on the needs I had while…","frontmatter":{"title":"ColorContrast.App: a new place for our color contrast checker","cover":"/blogs/colorcontrastapp/cover.svg","date":"2023-04-13","updated":null},"fields":{"slug":"/blog/colorcontrast-app-a-new-place-for-our-color-contrast-checker/","date":"2023-04-12T22:00:00.000Z","ogFileName":"color-contrast-app-a-new-place-for-our-color-contrast-checker"}}},"pageContext":{"slug":"/blog/colorcontrast-app-a-new-place-for-our-color-contrast-checker/"}},"staticQueryHashes":["4164364741","425175329"]}