{"id":350365,"date":"2021-08-26T15:08:00","date_gmt":"2021-08-26T22:08:00","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=350365"},"modified":"2022-08-25T08:13:39","modified_gmt":"2022-08-25T15:13:39","slug":"accent-color","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/a\/accent-color\/","title":{"rendered":"accent-color"},"content":{"rendered":"\n<p>The <code>accent-color<\/code> property in CSS is capable of re-tinting the accented color of form controls provided by the browser&#8217;s default styles with a custom color value.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  accent-color: #f8a100;\n}<\/code><\/pre>\n\n\n\n<p><code>accent-color<\/code> is defined in <a href=https://css-tricks.com/"https:////www.w3.org//TR//css-ui-4//#widget-accent\" rel=\"noopener\">CSS Basic User Interface Module Level 4<\/a>, which is currently in Working Draft. That means the details are still a work in progress and could change between now and when the spec becomes a formal recommendation.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">accent-color: auto | &lt;color>;<\/code><\/pre>\n\n\n\n<ul class=\"ticss-e916a65e\"><li><strong>Initial value:<\/strong> auto<\/li><li><strong>Applies to:<\/strong> all elements<\/li><li><strong>Inherited:<\/strong> yes<\/li><li><strong>Computed value:<\/strong> the keyword <code>auto<\/code> or a computed color<\/li><li><strong>Animation type:<\/strong> by computed value type<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-values\">Values<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Keyword *\/\naccent-color: auto;\n\n\/* &lt;color> *\/\naccent-color: red;\naccent-color: #f8a100\naccent-color: rgba(102, 100, 70, 1);\naccent-color: hsla(180, 100%, 70%, 1);\n\n\/* Global*\/\naccent-color: inherit;\naccent-color: initial;\naccent-color: revert;\naccent-color: unset;<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-finally-an-easy-way-to-style-forms\">Finally, an &#8220;easy&#8221; way to style forms!<\/h3>\n\n\n<p>Styling forms has traditionally been&#8230; well, awful. No need to look further than <a href=https://css-tricks.com/"https:////css-tricks.com//some-innocent-fun-with-html-video-and-progress///">customizing the <code>&lt;progress&gt;<\/code> element<\/a> to see just how difficult it is to style controls. What that generally leads to is a decision between accepting the browser&#8217;s default styles or a major lift to reset and recreate them from scratch.<\/p>\n\n\n\n<p>Here&#8217;s what it usually takes to get a custom <code>&lt;progress&gt;<\/code> color:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PomMMEO\" src=https://css-tricks.com/"////codepen.io//anon//embed//PomMMEO?height=575&amp;theme-id=1&amp;slug-hash=PomMMEO&amp;default-tab=css,result\%22 height=\"575\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PomMMEO\" title=\"CodePen Embed PomMMEO\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p><code>accent-color<\/code> allows us to change the color used in form controls with just one line of CSS:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwVXzqW\" src=https://css-tricks.com/"////codepen.io//anon//embed//RwVXzqW?height=450&amp;theme-id=1&amp;slug-hash=RwVXzqW&amp;default-tab=css,result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwVXzqW\" title=\"CodePen Embed RwVXzqW\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"it-works-with-specific-form-controls\">It works with specific form controls<\/h3>\n\n\n<p>Before you go off adding accent colors to all the things, it&#8217;s worth noting that four specific form controls support the <code>accent-color<\/code> property:<\/p>\n\n\n\n<ul><li>checkboxes (<code>&lt;input type=\"checkbox\"&gt;<\/code>)<\/li><li>radio buttons (<code>&lt;input type=\"radio\"&gt;<\/code>)<\/li><li>range (<code>&lt;input type=\"range\"&gt;<\/code>)<\/li><li>progress (<code>&lt;progress&gt;<\/code>)<\/li><\/ul>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvewwXL\" src=https://css-tricks.com/"////codepen.io//anon//embed//wvewwXL?height=650&amp;theme-id=1&amp;slug-hash=wvewwXL&amp;default-tab=result\%22 height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvewwXL\" title=\"CodePen Embed wvewwXL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-it-works-with-preferred-color-schemes\">It works with preferred color schemes<\/h3>\n\n\n<p>The <code>accent-color<\/code> property respects color schemes. If a user has their preferred color scheme set to, say, light in their OS settings then the browser has to evaluate the <code>accent-color<\/code> value and determine an appropriate UI color for it. This way, we&#8217;re assured an accessible color contrast between the browser&#8217;s UI and the accent. There&#8217;s no putting up with a light accent color that sits against light form control UI.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2021//08//radio-buttons-accent-color-ui.jpg?resize=239%2C150&amp;ssl=1\%22 alt=\"\" class=\"wp-image-350380\" width=\"239\" height=\"150\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/radio-buttons-accent-color-ui.jpg?w=956&amp;ssl=1 956w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/radio-buttons-accent-color-ui.jpg?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/radio-buttons-accent-color-ui.jpg?resize=768%2C482&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Each browser has its own way of calculating what color to use. <a href=https://css-tricks.com/"https:////accent-color.glitch.me/" rel=\"noopener\">This demo on Glitch<\/a> shows a series of checkbox controls with various accent colors. View it in a browser that <a href=https://css-tricks.com/"#browser-support\">supports<\/a> <code>accent-color<\/code> to see how that browser pairs UI color with different accent colors.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1664\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2021//08//DJhB56n10Eh8O29RsRdE.webp?resize=1600%2C1664&amp;ssl=1\%22 alt=\"\" class=\"wp-image-350377\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/DJhB56n10Eh8O29RsRdE.webp?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/DJhB56n10Eh8O29RsRdE.webp?resize=288%2C300&amp;ssl=1 288w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/DJhB56n10Eh8O29RsRdE.webp?resize=985%2C1024&amp;ssl=1 985w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/DJhB56n10Eh8O29RsRdE.webp?resize=768%2C799&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/DJhB56n10Eh8O29RsRdE.webp?resize=1477%2C1536&amp;ssl=1 1477w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/DJhB56n10Eh8O29RsRdE.webp?resize=1000%2C1040&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Chrome&#8217;s color algorithm, left, compared to Firefox (Credit: <a href=https://css-tricks.com/"https:////accent-color.glitch.me///" rel=\"noopener\">web.dev<\/a>)<\/figcaption><\/figure>\n\n\n\n<p>And, if we have an accent color that we love but it just ain&#8217;t working with the browser&#8217;s choice of UI color, we can reach for the <code>color-scheme<\/code> property to override it.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdmNNXw\" src=https://css-tricks.com/"////codepen.io//anon//embed//mdmNNXw?height=1050&amp;theme-id=1&amp;slug-hash=mdmNNXw&amp;default-tab=result\%22 height=\"1050\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdmNNXw\" title=\"CodePen Embed mdmNNXw\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p><em>Buuuuuut,<\/em> you might not wanna question the browser&#8217;s choice even if it ends up a little inconsistent between browsers. That&#8217;s a lot to juggle and you might do more harm to the UI&#8217;s accessibility than good.<\/p>\n\n\n\n<p class=\"is-style-explanation\">The browser will not override an <code>accent-color<\/code> in dark mode <a href=https://css-tricks.com/"https:////css-tricks.com//a-complete-guide-to-dark-mode-on-the-web//#handling-user-agent-styles\">like it sometimes does in other situations<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-a-different-approach-is-required-for-other-form-controls\">A different approach is required for other form controls<\/h3>\n\n\n<p>Again, only a few form controls currently support accent colors. That means we still need to resort to traditional <s>hacks<\/s> approaches to styling other types of form controls. But, hey, Adam Argyle and Joey Arhar have your back with a <a href=https://css-tricks.com/"https:////web.dev//accent-color//#extra:-more-tinting\" rel=\"noopener\">nice snippet<\/a> that helps bring an accent color to other form controls as well as list markers, selection, and visible focus:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">html { \n  --brand: hotpink;\n  scrollbar-color: hotpink Canvas;\n}\n\n:root { accent-color: var(--brand); }\n:focus-visible { outline-color: var(--brand); }\n::selection { background-color: var(--brand); }\n::marker { color: var(--brand); }\n\n:is(\n  ::-webkit-calendar-picker-indicator,\n  ::-webkit-clear-button,\n  ::-webkit-inner-spin-button, \n  ::-webkit-outer-spin-button\n) {\n  color: var(--brand);\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">93<\/td><td class=\"has-text-align-center\" data-align=\"center\">92<\/td><td class=\"has-text-align-center\" data-align=\"center\">93<\/td><td class=\"has-text-align-center\" data-align=\"center\">15.4<\/td><td class=\"has-text-align-center\" data-align=\"center\">79<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">iOS Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">15.4<\/td><td class=\"has-text-align-center\" data-align=\"center\">104<\/td><td class=\"has-text-align-center\" data-align=\"center\">101<\/td><td class=\"has-text-align-center\" data-align=\"center\">104<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><\/tr><\/tbody><\/table><figcaption><p>Source: <a href=https://css-tricks.com/"https:////caniuse.com//mdn-css_properties_accent-color/" rel=\"noopener\">caniuse<\/a><br><\/p><\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-video-accent-color-on-shoptalk\">Video: <code>accent-color<\/code> on ShopTalk<\/h3>\n\n\n<p>Chris and Dave show off not just the basics of <code>accent-color<\/code>, but how it can be used to write leaner CSS, account for color schemes, and even some tricks that would have been difficult to pull off without it.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"accent-color\" width=\"500\" height=\"281\" src=https://css-tricks.com/"https:////www.youtube.com//embed//F17DzJYysWM?feature=oembed\%22 frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-further-reading\">Further reading<\/h3>\n\n\n<ul><li><a href=https://css-tricks.com/"https:////web.dev//accent-color///" rel=\"noopener\">CSS accent-color<\/a> (web.dev)<\/li><li><a href=https://css-tricks.com/"https:////github.com//w3c//csswg-drafts//issues//5187/" rel=\"noopener\">CSSWG Pull Request #5187<\/a> (GitHub)<\/li><li><a href=https://css-tricks.com/"https:////chromestatus.com//feature//4752739957473280/" rel=\"noopener\">accent-color CSS property<\/a> (Chrome Platform Status)<\/li><li><a href=https://css-tricks.com/"https:////bugzilla.mozilla.org//show_bug.cgi?id=1705605\%22 rel=\"noopener\">Firefox Bug Ticket #1705605<\/a> (Mozilla Bugzilla)<\/li><li><a href=https://css-tricks.com/"https:////bugs.webkit.org//show_bug.cgi?id=227587\%22 rel=\"noopener\">Safari Bug Ticket #227587<\/a> (Safari Bugzilla)<\/li><li><a href=https://css-tricks.com/"https:////lists.webkit.org//pipermail//webkit-dev//2021-June//031885.html/" rel=\"noopener\">Request for position: accent-color CSS property<\/a> (Chromium message to Safari)<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The accent-color property in CSS is capable of re-tinting the accented color of form controls provided by the browser&#8217;s default [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":300990,"parent":13712,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/350365"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=350365"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/350365\/revisions"}],"predecessor-version":[{"id":372901,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/350365\/revisions\/372901"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13712"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/300990"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=350365"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=350365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}