{"id":38,"date":"2022-10-29T00:15:47","date_gmt":"2022-10-29T00:15:47","guid":{"rendered":"https:\/\/docs.joedolson.com\/wp-accessibility\/?p=38"},"modified":"2022-10-29T00:15:47","modified_gmt":"2022-10-29T00:15:47","slug":"toolbar-for-high-contrast-and-large-font-styles","status":"publish","type":"post","link":"https:\/\/docs.joedolson.com\/wp-accessibility\/2022\/10\/29\/toolbar-for-high-contrast-and-large-font-styles\/","title":{"rendered":"Toolbar for high-contrast and large font styles"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">While not a solution in itself, if your theme has low contrast issues or small fonts, using this custom control to toggle high-contrast or large font modes can be useful. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">All styles can be customized or extended within your theme directory, since default states for these tools may not be suitable for your site. The accessibility toolbar is based on the original written by <a href=\"http:\/\/www.usableinteractions.com\/2013\/01\/a11y-toolbar-to-be-incorporated-into-wp-accessibility-plugin\/\">Chris Rodriguez<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To customize high contrast styles, place a stylesheet called <code>a11y-contrast <\/code>in your theme&#8217;s home directory.  With a custom stylesheet, you are responsible for defining all styles used for high contrast. You can make a copy of the stylesheet from <code>wp-accessibility\/toolbar\/css\/a11y-contrast.css<\/code> for a starting place.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The large font styles add the class <code>.fontsize<\/code> to your site&#8217;s <code>body<\/code> element when active. Any styles you define in your theme or in the WordPress customizer at <code>Appearance > Customize > Additional Styles<\/code> that use this class will take effect when activated. For example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.fontsize h2 {\n    font-size: 4rem;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The above would simply set a size of 4rem for <code>h2<\/code> headings when the fontsize toggle is activated.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The toolbar also supports a grayscale option for testing, but grayscale has no real-life application for users, and is not enabled for users.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While not a solution in itself, if your theme has low contrast issues or small fonts, using this custom control to toggle high-contrast or large font modes can be useful. All styles can be customized or extended within your theme directory, since default states for these tools may not be suitable for your site. The [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-38","post","type-post","status-publish","format-standard","hentry","category-features"],"_links":{"self":[{"href":"https:\/\/docs.joedolson.com\/wp-accessibility\/wp-json\/wp\/v2\/posts\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.joedolson.com\/wp-accessibility\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.joedolson.com\/wp-accessibility\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.joedolson.com\/wp-accessibility\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.joedolson.com\/wp-accessibility\/wp-json\/wp\/v2\/comments?post=38"}],"version-history":[{"count":1,"href":"https:\/\/docs.joedolson.com\/wp-accessibility\/wp-json\/wp\/v2\/posts\/38\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/docs.joedolson.com\/wp-accessibility\/wp-json\/wp\/v2\/posts\/38\/revisions\/39"}],"wp:attachment":[{"href":"https:\/\/docs.joedolson.com\/wp-accessibility\/wp-json\/wp\/v2\/media?parent=38"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.joedolson.com\/wp-accessibility\/wp-json\/wp\/v2\/categories?post=38"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.joedolson.com\/wp-accessibility\/wp-json\/wp\/v2\/tags?post=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}