alphagov · Ciandelle · Mar 19, 2025 · Mar 20, 2025 · Mar 20, 2025 · Mar 20, 2025
diff --git a/src/accessibility/wcag-2.2/index.md b/src/accessibility/wcag-2.2/index.md
@@ -37,7 +37,7 @@ We've made changes to these components and patterns to comply with WCAG 2.2 leve
 
 See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/) on the W3C website.
 
-[Our Images page](/styles/images/) also includes guidance to help ensure icons and images in your service meet Target size (minimum).
+In June 2025, the Design System started to retire the WCAG 2.2 labels in our components and patterns, bringing the WCAG 2.2-specific messages into our overall guidance where it's useful.
 
 {{ govukTable({
   caption: "Components",
@@ -53,22 +53,6 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
     }
   ],
   rows: [
-    [
-      {
-        html: '<a href="/components/back-link/">Back link component</a>'
-      },
-      {
-        html: 'Redundant entry<br>Target size (minimum)'
-      }
-    ],
-    [
-      {
-        html: '<a href="/components/breadcrumbs/">Breadcrumbs component</a>'
-      },
-      {
-        html: 'Target size (minimum)'
-      }
-    ],
     [
       {
         html: '<a href="/components/button/">Button component</a>'
@@ -77,14 +61,6 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
         html: 'Target size (minimum)'
       }
     ],
-    [
-      {
-        html: '<a href="/components/cookie-banner/">Cookie banner component</a>'
-      },
-      {
-        html: 'Focus not obscured (minimum)<br>Target size (minimum)'
-      }
-    ],
     [
       {
         html: '<a href="/components/error-message/">Error message component</a>'
@@ -101,22 +77,6 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
         html: 'Dragging movements<br>Redundant entry'
       }
     ],
-    [
-      {
-        html: '<a href="/components/footer/">GOV.UK footer component</a>'
-      },
-      {
-        html: 'Consistent help'
-      }
-    ],
-    [
-      {
-        html: '<a href="/components/header/">GOV.UK header component</a>'
-      },
-      {
-        html: 'Focus not obscured (Minimum)<br>Consistent help'
-      }
-    ],
     [
       {
         html: '<a href="/components/phase-banner/">Phase banner component</a>'
@@ -133,14 +93,6 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
         html: 'Dragging movements'
       }
     ],
-    [
-      {
-        html: '<a href="/components/service-navigation/">Service navigation component</a>'
-      },
-      {
-        html: 'Focus not obscured (Minimum)<br>Consistent help'
-      }
-    ],
     [
       {
         html: '<a href="/components/summary-list/">Summary list component</a>'

diff --git a/src/components/back-link/index.md b/src/components/back-link/index.md
@@ -8,27 +8,9 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
-{% from "_wcag-callout.njk" import wcagCallout %}
-{% from "_wcag-note.njk" import wcagNote %}
 
 Use the back link component to help users go back to the previous page in a multi-page transaction.
 
-{{ wcagCallout({
-  type: "component",
-  introAction: "use the",
-  name: "Back link",
-  criteria: [
-    {
-      text: "make sure users do not need to re-enter information they've previously given when they go back to a page",
-      anchor: "wcag-avoid-information-reentry"
-    },
-    {
-      text: "make sure users can interact with the Back link component",
-      anchor: "wcag-interact-back-links"
-    }
-  ]
-}) }}
-
 Although browsers have a back button, some sites break when you use it - so many users avoid it, instead of losing their progress in a service. Also, not all users are aware of the back button.
 
 {{ example({ group: "components", item: "back-link", example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }}
@@ -49,17 +31,6 @@ Always place back links at the top of a page, before the `<main>` element. Placi
 
 Make sure the link takes users to the previous page they were on, in the state they last saw it.
 
-{% call wcagNote({id: "wcag-avoid-information-reentry"}) %}
-
-<p>If a user decides to go back to a previous page, make sure information they have already entered is pre-populated.</p>
-<p>Do not pre-populate if the information is no longer valid, or when pre-populating would be a major safety or security concern. This is to comply with <a href="https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html">WCAG 2.2 success criterion 3.3.7 Redundant entry</a>.</p>
-{% endcall %}
-
-{% call wcagNote({id: "wcag-interact-back-links"}) %}
-
-<p>Make sure no other interactive elements are too close to the Back link component. This is to make sure users can easily interact with it. This relates to <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">WCAG 2.2 success criterion 2.5.8 Target size (minimum)</a>.</p>
-{% endcall %}
-
 Where possible, ensure the back link works even when JavaScript is not available. If this is not possible, you should hide the back link when JavaScript is not available.
 
 There are 2 ways to use the back link component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk), you can use the Nunjucks macro.
@@ -76,4 +47,4 @@ Use the `govuk-back-link--inverse` modifier class to show a white link on a dark
 
 Make sure all users can see the back link – the background colour must have a contrast ratio of at least 4.5:1 with white to meet [WCAG 2.2 success criterion 1.4.3 Contrast (minimum), level AA](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html).
 
-{{ example({ group: "components", item: "back-link", example: "inverse", html: true, nunjucks: true, open: false }) }}
+{{ example({ group: "components", item: "back-link", example: "inverse", html: true, nunjucks: true, open: false }) }}
diff --git a/src/components/breadcrumbs/index.md b/src/components/breadcrumbs/index.md
@@ -8,23 +8,9 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
-{% from "_wcag-callout.njk" import wcagCallout %}
-{% from "_wcag-note.njk" import wcagNote %}
 
 The breadcrumbs component helps users to understand where they are within a website’s structure and move between levels.
 
-{{ wcagCallout({
-  type: "component",
-  introAction: "use",
-  name: "Breadcrumbs",
-  criteria: [
-    {
-      text: "make sure users can interact with the Breadcrumbs component",
-      anchor: "wcag-interact-breadcrumbs"
-    }
-  ]
-}) }}
-
 {{ example({ group: "components", item: "breadcrumbs", example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }}
 
 ## When to use this component
@@ -43,11 +29,6 @@ Always place breadcrumbs at the top of a page, before the `<main>` element. Plac
 
 The breadcrumbs should start with your 'home' page and end with the parent section of the current page.
 
-{% call wcagNote({id: "wcag-interact-breadcrumbs"}) %}
-
-<p>Make sure no other interactive elements are too close to the Breadcrumbs component. This is to make sure users can easily interact with it. This relates to <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">WCAG 2.2 success criterion 2.5.8 Target size (minimum)</a>.</p>
-{% endcall %}
-
 There are 2 ways to use the breadcrumbs component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk), you can use the Nunjucks macro.
 
 {{ example({ group: "components", item: "breadcrumbs", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second" }) }}
@@ -66,4 +47,4 @@ Use the `govuk-breadcrumbs--inverse` modifier class to show white links and arro
 
 Make sure all users can see the breadcrumbs – the background colour must have a contrast ratio of at least 4.5:1 with white to [meet WCAG 2.2 success criterion 1.4.3 Contrast (minimum), level AA](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html).
 
-{{ example({ group: "components", item: "breadcrumbs", example: "inverse", html: true, nunjucks: true, open: false }) }}
+{{ example({ group: "components", item: "breadcrumbs", example: "inverse", html: true, nunjucks: true, open: false }) }}
diff --git a/src/components/cookie-banner/index.md b/src/components/cookie-banner/index.md
@@ -8,29 +8,37 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
-{% from "_wcag-callout.njk" import wcagCallout %}
-{% from "_wcag-note.njk" import wcagNote %}
+{% from "_brand-callout.njk" import brandCallout %}
 
 Allow users to accept or reject cookies which are not essential to making your service work.
 
-{{ wcagCallout({
-  type: "component",
-  introAction: "use the",
-  name: "Cookie banner",
-  criteria: [
-    {
-      text: "make sure that items in focus can be seen all times",
-      anchor: "wcag-see-focus"
-    },
-    {
-      text: "make sure users can interact with buttons and links in the Cookie banner component",
-      anchor: "wcag-interact-cookie-banner"
-    }
-  ]
-}) }}
-
 {{ example({ group: "components", item: "cookie-banner", example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }}
 
+<strong class="govuk-tag brand-tag-green">
+  Brand
+</strong>
+<p class="govuk-body"><a href="#">See an example of the Cookie banner showing the refreshed GOV.UK branding</a>.</p>
+
+If you use the page template, you'll also get the Cookie banner without having to add it, as it's included by default. However, if you want to customise the default Cookie banner, read the [page template guidance about customising components](/styles/page-template/#changing-template-content).
+
+{% call brandCallout({ text: "Brand", classes: "brand-tag-green" }) %}
+
+<h2>Brand changes to the {{title}} component</h2>
+<p class="govuk-body">From 25 June 2025, the {{title}} component will change to support a wider refresh of the GOV.UK brand. </p>
+
+<p class="govuk-body">The Cookie banner component’s background colour will change to light blue.</p>
+
+<p class="govuk-body">To help service teams in government get ready to use the new branding, we’ve provided several options to update their services.</p>
+{% endcall %}
+
+### Update to refresh the GOV.UK brand
+
+If you use the Nunjucks macro and page template across your service, you can enable the brand refresh by setting the page template’s `rebrand` option to `true`. This will automatically make all needed changes related to the brand refresh.
+
+You can enable the brand refresh within the GOV.UK header component by setting its `rebrand` option to true. You’ll also need to add some code to your `<html>` and `<head>` elements.
+
+[See the release notes for more details](https://github.com/alphagov/govuk-frontend/releases) and and other ways to update.
+
 ## When to use this component
 
 Use this component if your service sets any cookies on a user’s device.
@@ -81,15 +89,7 @@ Make sure the cookie banner does not:
 
 Position the cookie banner after the opening `<body>` tag and before the ’skip to main content‘ link. If you're using the Nunjucks page template, use the `bodyStart` block.
 
-{% call wcagNote({id: "wcag-see-focus"}) %}
-
-<p>Do not make the Cookie banner component ‘sticky’ to the top of the page by using `position: fixed` or any other method. This is to make sure it does not cover or obscure any content which has a focus applied. This is to comply with <a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html">WCAG 2.2 success criterion 2.4.11 Focus not obscured (minimum)</a>.</p>
-{% endcall %}
-
-{% call wcagNote({id: "wcag-interact-cookie-banner"}) %}
-
-<p>Do not change the padding or margins of buttons and links within the Cookie banner component. This is to make sure there’s adequate space for the user to interact with the buttons and links. This relates to <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">WCAG 2.2 success criterion 2.5.8 Target size (minimum)</a>.</p>
-{% endcall %}
+Do not make the Cookie banner component ‘sticky’ to the top of the page by using `position: fixed` or any other method. This is to make sure it does not cover or obscure any content which has a focus applied. This is to comply with [WCAG 2.2 success criterion 2.4.11 Focus not obscured (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html).
 
 ### Option 1: If you’re only using essential cookies
 
@@ -211,4 +211,4 @@ We decided to remove the visible focus indicator from the confirmation message f
 - it's the first element, at the very top of the page
 - it displays in place of the cookie message, which is the last thing the user interacted with
 
-In this scenario, we assume that a visible focus indicator would be more likely to confuse users than to help them. However, we need more research to prove this.
+In this scenario, we assume that a visible focus indicator would be more likely to confuse users than to help them. However, we need more research to prove this.
diff --git a/src/components/footer/index.md b/src/components/footer/index.md
@@ -8,27 +8,33 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
-{% from "_wcag-callout.njk" import wcagCallout %}
-{% from "_wcag-note.njk" import wcagNote %}
+{% from "_brand-callout.njk" import brandCallout %}
+{%- from "govuk/components/tag/macro.njk" import govukTag -%}
 
 The GOV.UK footer provides copyright, licensing and other information about your service.
 
-{{ wcagCallout({
-  type: "component",
-  introAction: "use the",
-  name: "GOV.UK footer",
-  criteria: [
-    {
-      text: "make sure help links can be found in a consistent place on each page",
-      anchor: "wcag-consistent-links"
-    }
-  ]
-}) }}
-
 {{ example({ group: "components", item: "footer", example: "default", id: "default-1", html: true, nunjucks: true, open: false, size: "m", loading: "eager" }) }}
 
+<strong class="govuk-tag brand-tag-green">
+  Brand
+</strong>
+<p class="govuk-body"><a href="#">See an example of the GOV.UK footer showing the refreshed GOV.UK branding</a>.</p>
+
 If you use the page template, you'll also get the footer without having to add it, as it's included by default. However, if you want to customise the default footer, read the [page template guidance about customising components](/styles/page-template/#changing-template-content).
 
+{% call brandCallout({ text: "Brand", classes: "brand-tag-green" }) %}
+
+<h2>Brand changes to the {{title}} component</h2><p class="govuk-body">From 25 June 2025, the {{title}} component will change to support a wider refresh of the GOV.UK brand.</p>
+
+<p class="govuk-body">The updated {{title}} component:</p>
+<ul class="govuk-list">
+<li>uses a light blue as the background colour, instead of grey</li>
+<li>adds a thick blue top border</li>
+<li>adds a small crown logo, in addition to the existing coat of arms</li>
+</ul>
+<p class="govuk-body">To help service teams in government get ready to use the new branding, <a href="#update-to-refresh-the-govuk-brand">we’ve provided several options to update their services</a>.</p>
+{% endcall %}
+
 ## When to use this component
 
 Use the footer at the bottom of every page of your service.
@@ -39,6 +45,18 @@ Add a copyright notice to the footer to clarify who owns the copyright. For GOV.
 
 Make it clear whether content is available for re-use - and if it is, under what sort of licence. Use an [Open Government Licence](https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/) unless you have permission from the National Archives to use a [different type of licence](https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/open-government-licence/other-licences/).
 
+### Update to refresh the GOV.UK brand
+
+<strong class="govuk-tag brand-tag-green">
+  Brand
+</strong>
+
+If you use the Nunjucks macro and page template across your service, you can enable the brand refresh by setting the page template’s `rebrand` option to `true`. This will automatically make all needed changes related to the brand refresh.
+
+You can enable the brand refresh within the GOV.UK footer component by setting its `rebrand` option to true. You’ll also need to add some code to your `<html>` and `<head>` elements.
+
+[See the release notes](https://github.com/alphagov/govuk-frontend/releases) for more details and other ways to update.
+
 ### Footer without links
 
 {{ example({ group: "components", item: "footer", example: "default", titleSuffix: "second", html: true, nunjucks: true, open: false, size: "m", titleSuffix: "second" }) }}
@@ -60,10 +78,9 @@ You can add links to:
 
 Use ‘Privacy’, ‘Accessibility’, ‘Cookies’ and ‘Terms and conditions’ for the link text.
 
-{% call wcagNote({id: "wcag-consistent-links"}) %}
+If you include links to ‘help’ pages within the GOV.UK footer component, make sure to place those links consistently within the footer content.
 
-<p>If you include links to ‘help’ pages within the GOV.UK footer component, make sure to place those links consistently within the footer content. Also make sure that ‘help’ links always function in a similar way across each page. This is to comply with <a href="https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html">WCAG 2.2 success criterion 3.2.6 Consistent help</a>.</p>
-{% endcall %}
+Also make sure that ‘help’ links always function in a similar way across each page. This is to comply with [WCAG 2.2 success criterion 3.2.6 Consistent help](https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html).
 
 ## Adding secondary navigation
 
@@ -75,4 +92,4 @@ Only add secondary GOV.UK navigation if you’re creating a GOV.UK service, and
 
 ### Footer with links and secondary navigation
 
-{{ example({ group: "components", item: "footer", example: "full", html: true, nunjucks: true, open: false, size: "xl" }) }}
+{{ example({ group: "components", item: "footer", example: "full", html: true, nunjucks: true, open: false, size: "xl" }) }}