{"id":7139,"date":"2026-11-05T04:55:27","date_gmt":"2026-11-05T04:55:27","guid":{"rendered":"https:\/\/www.originux.com\/resources\/?p=7139"},"modified":"2026-11-05T04:55:29","modified_gmt":"2026-11-05T04:55:29","slug":"wcag-2-2-guide-for-designers-a-detailed-guide","status":"publish","type":"post","link":"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/","title":{"rendered":"WCAG 2.2 Guide for Designers: A Detailed Guide"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#What_Is_WCAG\" >What Is WCAG?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#Why_Designers_Should_Care\" >Why Designers Should Care<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#The_Four_Principles_POUR\" >The Four Principles: POUR<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#Conformance_Levels\" >Conformance Levels<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#What_Is_New_in_WCAG_22\" >What Is New in WCAG 2.2?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#Design_Rules_You_Already_Need_From_Earlier_Versions\" >Design Rules You Already Need From Earlier Versions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#Designing_Focus_States_2411_to_2413\" >Designing Focus States (2.4.11 to 2.4.13)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#Designing_Target_Size_258\" >Designing Target Size (2.5.8)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#Designing_for_Dragging_257\" >Designing for Dragging (2.5.7)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#Designing_Help_and_Forms_326_and_337\" >Designing Help and Forms (3.2.6 and 3.3.7)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#Designing_Accessible_Login_338\" >Designing Accessible Login (3.3.8)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#A_Quick_Designer_Checklist\" >A Quick Designer Checklist<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#How_to_Test_Your_Designs\" >How to Test Your Designs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#How_to_Work_With_Developers\" >How to Work With Developers<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#Common_Mistakes_to_Avoid\" >Common Mistakes to Avoid<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#Final_Thoughts\" >Final Thoughts<\/a><\/li><\/ul><\/nav><\/div>\n\n<p class=\"wp-block-paragraph\">A designer finishes a clean login screen. It looks sharp. Then an accessibility review flags it. The focus ring is too faint. The buttons are tiny. The sign-in asks users to solve a puzzle. None of these problems were visible in the mockup. All of them were design choices. This guide explains WCAG 2.2 in plain terms and shows what designers can do about it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Is_WCAG\"><\/span>What Is WCAG?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">WCAG stands for Web Content Accessibility Guidelines. The W3C publishes it. It is the most widely used standard for making digital products usable by people with disabilities. That includes people with low vision, color blindness, hearing loss, motor limits, and cognitive differences. It also helps people on small screens, in bright light, or with a hand full.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WCAG 2.2 became an official W3C Recommendation in October 2023. It builds on WCAG 2.1 and adds nine new success criteria. It also removes one old criterion, 4.1.1 Parsing, because modern browsers made it obsolete. A site that meets 2.2 also meets 2.1 and 2.0, apart from that one criterion.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_Designers_Should_Care\"><\/span>Why Designers Should Care<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Many accessibility failures start in design, not code. Color choices, type size, spacing, layout, and flow all decide whether a product can be used. Fixing these in a mockup costs minutes. Fixing them after launch costs weeks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are legal reasons too. Rules such as the Americans with Disabilities Act in the US and the European Accessibility Act in the EU point to WCAG as the working benchmark. Many procurement teams ask for WCAG 2.1 or 2.2 Level AA in contracts. Accessible design is also good design. It improves usability for everyone.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_Four_Principles_POUR\"><\/span>The Four Principles: POUR<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">WCAG groups its rules under four principles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Perceivable.<\/strong> Users must be able to see or hear the content. Think contrast, text alternatives, and captions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Operable.<\/strong> Users must be able to use the controls. Think keyboard access, focus, target size, and time limits.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Understandable.<\/strong> Users must be able to follow the content and the interface. Think clear labels, predictable behavior, and helpful errors.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Robust.<\/strong> The product must work with assistive tools, such as screen readers. This is mostly a code concern, but good structure in design helps.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conformance_Levels\"><\/span>Conformance Levels<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">WCAG has three levels. Level A is the basic floor. Level AA is the common target for most products and the level most laws and contracts expect. Level AAA is the highest and is rarely required in full, since some AAA rules cannot be met by all content. Aim for AA, and adopt AAA items where they are practical.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Is_New_in_WCAG_22\"><\/span>What Is New in WCAG 2.2?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The nine new criteria focus on people with cognitive and learning differences, low vision, and motor disabilities. Here they are, with the level for each.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2.4.11 Focus Not Obscured (Minimum), AA.<\/strong> When an element gets keyboard focus, it must not be fully hidden by other content, such as a sticky header or a cookie banner.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2.4.12 Focus Not Obscured (Enhanced), AAA.<\/strong> The focused element must not be hidden at all.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2.4.13 Focus Appearance, AAA.<\/strong> The focus indicator must be large enough and have enough contrast to see easily.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2.5.7 Dragging Movements, AA.<\/strong> Anything that works by dragging must also work with a simple click or tap.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2.5.8 Target Size (Minimum), AA.<\/strong> Interactive targets should be at least 24 by 24 CSS pixels, with some exceptions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3.2.6 Consistent Help, A.<\/strong> If a help option appears on several pages, such as chat or a contact link, it should sit in the same relative place each time.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3.3.7 Redundant Entry, A.<\/strong> Do not make users enter the same information twice in one process. Auto-fill it or let them select it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3.3.8 Accessible Authentication (Minimum), AA.<\/strong> Logging in must not depend on a cognitive test, such as remembering a password or solving a puzzle, unless there is an alternative.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3.3.9 Accessible Authentication (Enhanced), AAA.<\/strong> The same rule, with fewer exceptions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Design_Rules_You_Already_Need_From_Earlier_Versions\"><\/span>Design Rules You Already Need From Earlier Versions<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">WCAG 2.2 still includes the older rules designers must know.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Text contrast.<\/strong> Body text needs a contrast ratio of at least 4.5 to 1 against its background. Large text, meaning 18 point or 14 point bold and up, needs 3 to 1.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Non-text contrast.<\/strong> Icons, input borders, and focus rings need at least 3 to 1 against nearby colors.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Do not use color alone.<\/strong> An error shown only in red fails for color-blind users. Add an icon, text, or pattern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Resize and reflow.<\/strong> Text should scale to 200 percent without breaking, and layouts should reflow at narrow widths without sideways scrolling.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Text alternatives.<\/strong> Meaningful images need alt text. Decorative ones should be marked so screen readers skip them.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Captions and transcripts.<\/strong> Video needs captions. Audio needs transcripts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Keyboard access.<\/strong> Every function must work without a mouse.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Headings and labels.<\/strong> Clear structure helps screen reader users move around.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Designing_Focus_States_2411_to_2413\"><\/span>Designing Focus States (2.4.11 to 2.4.13)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Keyboard users depend on the focus indicator. Many designs remove it for looks. That is a failure.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Design a visible focus style for every interactive element. A two-pixel outline with strong contrast is a good start, and it comes close to the AAA focus appearance rule. Do not rely on a faint glow or a color shift alone.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then check what else sits on the page. Sticky headers, footers, chat widgets, and cookie banners can cover the focused item as users tab down the page. Leave scroll padding below sticky bars, or design them so they do not hide content. Test by tabbing through your own mockups, not only by looking at them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Designing_Target_Size_258\"><\/span>Designing Target Size (2.5.8)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Small buttons are hard for users with tremors, large fingers, or one free hand. WCAG 2.2 sets the minimum at 24 by 24 CSS pixels. There are exceptions. Small targets pass if enough spacing surrounds them, if the same action exists elsewhere in a larger form, or if the target sits inside a sentence.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Treat 24 pixels as the floor, not the goal. Many platform guides suggest about 44 by 44 pixels for touch. Give icons a larger hit area than their visible size, and keep space between close controls such as table row actions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Designing_for_Dragging_257\"><\/span>Designing for Dragging (2.5.7)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Drag and drop is common in boards, sliders, and file uploads. It is hard for people who cannot hold and move a pointer. For every drag action, design a simple alternative. A kanban card could offer a \u201cMove to\u201d menu. A slider could offer plus and minus buttons or a number field. A file upload could offer a button as well as a drop zone.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Designing_Help_and_Forms_326_and_337\"><\/span>Designing Help and Forms (3.2.6 and 3.3.7)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Place help in the same spot across pages. If the live chat button sits at the bottom right on one page, keep it there on all pages. The same goes for a \u201cContact us\u201d link in the header or footer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In multi-step flows, never ask for the same detail twice. If a user enters a shipping address in step one, offer a \u201cSame as shipping\u201d option for billing. Pre-fill what you already know. Exceptions exist for security checks and for cases where old data is no longer valid.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Good forms also need clear labels above fields, visible hints, errors placed next to the field, and plain-language fixes such as \u201cEnter a 10-digit mobile number.\u201d<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Designing_Accessible_Login_338\"><\/span>Designing Accessible Login (3.3.8)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Authentication is where cognitive load hits hard. People with memory or attention differences may not be able to recall a password, copy a code by hand, or solve a puzzle.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Design login so users can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Paste into password fields.<\/li>\n\n\n\n<li>Use a password manager.<\/li>\n\n\n\n<li>Sign in with a passkey, a biometric, or an email link.<\/li>\n\n\n\n<li>Copy and paste a one-time code, or have it auto-filled.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Avoid forcing users to retype characters from a distorted image. Avoid blocking paste. If you use a CAPTCHA, offer an alternative that does not need a cognitive test.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A_Quick_Designer_Checklist\"><\/span>A Quick Designer Checklist<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Run this list before handoff.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Text contrast meets 4.5 to 1, or 3 to 1 for large text.<\/li>\n\n\n\n<li>Icons, borders, and focus rings meet 3 to 1.<\/li>\n\n\n\n<li>Meaning never depends on color alone.<\/li>\n\n\n\n<li>Every interactive element has a clear focus style.<\/li>\n\n\n\n<li>Sticky elements do not hide focused items.<\/li>\n\n\n\n<li>Targets are at least 24 by 24 pixels, and ideally larger on touch.<\/li>\n\n\n\n<li>Drag actions have a click or tap alternative.<\/li>\n\n\n\n<li>Help links stay in the same place across pages.<\/li>\n\n\n\n<li>Forms do not ask for the same data twice.<\/li>\n\n\n\n<li>Login allows paste, password managers, or another simple method.<\/li>\n\n\n\n<li>Text scales to 200 percent and layouts reflow.<\/li>\n\n\n\n<li>Images have alt text notes, and video has captions.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Test_Your_Designs\"><\/span>How to Test Your Designs<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can test early, even in Figma. Use contrast checkers and plugins to scan color pairs. Zoom designs to 200 percent and check the layout. Mark tab order and focus states in your specs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once a build exists, test with the keyboard alone. Tab through every flow and watch where focus goes. Use a screen reader such as NVDA, VoiceOver, or TalkBack for key tasks. Run automated tools, such as axe or Lighthouse, to catch common issues. Remember that automated tools find only a share of problems, so manual checks and real user testing with people with disabilities matter most.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Work_With_Developers\"><\/span>How to Work With Developers<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Put accessibility in the design file, not only in a separate document. Annotate focus order, heading levels, alt text, and error messages. Name colors by purpose, such as \u201ctext-primary,\u201d so contrast can be checked and fixed in one place. Build accessible components once in a design system and reuse them. Review builds against the design, and test again after each release.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Common_Mistakes_to_Avoid\"><\/span>Common Mistakes to Avoid<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Removing focus outlines for a cleaner look.<\/strong> Keyboard users lose their place.<\/li>\n\n\n\n<li><strong>Light gray text on white.<\/strong> It looks elegant and fails contrast.<\/li>\n\n\n\n<li><strong>Tiny icon buttons.<\/strong> They miss the target size rule and frustrate everyone.<\/li>\n\n\n\n<li><strong>Placeholder text as the only label.<\/strong> It disappears while typing.<\/li>\n\n\n\n<li><strong>Drag-only interactions.<\/strong> Some users cannot use them at all.<\/li>\n\n\n\n<li><strong>Sticky banners that cover focus.<\/strong> Keyboard users cannot see where they are.<\/li>\n\n\n\n<li><strong>Login that blocks paste.<\/strong> It breaks password managers and accessibility.<\/li>\n\n\n\n<li><strong>Asking for the same information twice.<\/strong> It adds effort and errors.<\/li>\n\n\n\n<li><strong>Treating accessibility as a final audit.<\/strong> Late fixes cost more and often force redesign.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Final_Thoughts\"><\/span>Final Thoughts<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">WCAG 2.2 gives designers clearer rules for focus, target size, dragging, help, redundant entry, and login. The new criteria are practical and mostly reachable with small, early design choices. Aim for Level AA, check contrast and focus in your mockups, and design alternatives for drag and login. Test with a keyboard and a screen reader, and involve real users. When accessibility is part of the design process from the start, products work for more people and feel better for everyone.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A designer finishes a clean login screen. It looks sharp. Then an accessibility review flags it. The focus ring is too faint. The buttons are tiny. The sign-in asks users to solve a puzzle. None of these problems were visible in the mockup. All of them were design choices. This guide explains WCAG 2.2 in&hellip; <a class=\"more-link\" href=\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/\">Continue reading <span class=\"screen-reader-text\">WCAG 2.2 Guide for Designers: A Detailed Guide<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7139","post","type-post","status-publish","format-standard","hentry","category-blog","entry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>WCAG 2.2 Guide for Designers: A Detailed Guide<\/title>\n<meta name=\"description\" content=\"New to WCAG 2.2? See what changed, which nine new criteria affect design work, and how to check contrast, focus, target size, forms, and login flows before handoff.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WCAG 2.2 Guide for Designers: A Detailed Guide\" \/>\n<meta property=\"og:description\" content=\"New to WCAG 2.2? See what changed, which nine new criteria affect design work, and how to check contrast, focus, target size, forms, and login flows before handoff.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"OriginUX Studio\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-05T04:55:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-11-05T04:55:29+00:00\" \/>\n<meta name=\"author\" content=\"master.origin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"master.origin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/\"},\"author\":{\"name\":\"master.origin\",\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c\"},\"headline\":\"WCAG 2.2 Guide for Designers: A Detailed Guide\",\"datePublished\":\"2026-11-05T04:55:27+00:00\",\"dateModified\":\"2026-11-05T04:55:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/\"},\"wordCount\":1731,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#organization\"},\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/\",\"url\":\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/\",\"name\":\"WCAG 2.2 Guide for Designers: A Detailed Guide\",\"isPartOf\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#website\"},\"datePublished\":\"2026-11-05T04:55:27+00:00\",\"dateModified\":\"2026-11-05T04:55:29+00:00\",\"description\":\"New to WCAG 2.2? See what changed, which nine new criteria affect design work, and how to check contrast, focus, target size, forms, and login flows before handoff.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.originux.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WCAG 2.2 Guide for Designers: A Detailed Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.originux.com\/resources\/#website\",\"url\":\"https:\/\/www.originux.com\/resources\/\",\"name\":\"OriginUX Studio\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.originux.com\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.originux.com\/resources\/#organization\",\"name\":\"OriginUX Studio\",\"url\":\"https:\/\/www.originux.com\/resources\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png\",\"contentUrl\":\"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png\",\"width\":120,\"height\":120,\"caption\":\"OriginUX Studio\"},\"image\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c\",\"name\":\"master.origin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g\",\"caption\":\"master.origin\"},\"sameAs\":[\"https:\/\/www.originux.com\"],\"url\":\"https:\/\/www.originux.com\/resources\/author\/master-origin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WCAG 2.2 Guide for Designers: A Detailed Guide","description":"New to WCAG 2.2? See what changed, which nine new criteria affect design work, and how to check contrast, focus, target size, forms, and login flows before handoff.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/","og_locale":"en_US","og_type":"article","og_title":"WCAG 2.2 Guide for Designers: A Detailed Guide","og_description":"New to WCAG 2.2? See what changed, which nine new criteria affect design work, and how to check contrast, focus, target size, forms, and login flows before handoff.","og_url":"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/","og_site_name":"OriginUX Studio","article_published_time":"2026-11-05T04:55:27+00:00","article_modified_time":"2026-11-05T04:55:29+00:00","author":"master.origin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"master.origin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#article","isPartOf":{"@id":"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/"},"author":{"name":"master.origin","@id":"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c"},"headline":"WCAG 2.2 Guide for Designers: A Detailed Guide","datePublished":"2026-11-05T04:55:27+00:00","dateModified":"2026-11-05T04:55:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/"},"wordCount":1731,"commentCount":0,"publisher":{"@id":"https:\/\/www.originux.com\/resources\/#organization"},"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/","url":"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/","name":"WCAG 2.2 Guide for Designers: A Detailed Guide","isPartOf":{"@id":"https:\/\/www.originux.com\/resources\/#website"},"datePublished":"2026-11-05T04:55:27+00:00","dateModified":"2026-11-05T04:55:29+00:00","description":"New to WCAG 2.2? See what changed, which nine new criteria affect design work, and how to check contrast, focus, target size, forms, and login flows before handoff.","breadcrumb":{"@id":"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.originux.com\/resources\/blog\/wcag-2-2-guide-for-designers-a-detailed-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.originux.com\/resources\/"},{"@type":"ListItem","position":2,"name":"WCAG 2.2 Guide for Designers: A Detailed Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.originux.com\/resources\/#website","url":"https:\/\/www.originux.com\/resources\/","name":"OriginUX Studio","description":"","publisher":{"@id":"https:\/\/www.originux.com\/resources\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.originux.com\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.originux.com\/resources\/#organization","name":"OriginUX Studio","url":"https:\/\/www.originux.com\/resources\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/","url":"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png","contentUrl":"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png","width":120,"height":120,"caption":"OriginUX Studio"},"image":{"@id":"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c","name":"master.origin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g","caption":"master.origin"},"sameAs":["https:\/\/www.originux.com"],"url":"https:\/\/www.originux.com\/resources\/author\/master-origin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts\/7139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/comments?post=7139"}],"version-history":[{"count":1,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts\/7139\/revisions"}],"predecessor-version":[{"id":7140,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts\/7139\/revisions\/7140"}],"wp:attachment":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/media?parent=7139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/categories?post=7139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/tags?post=7139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}